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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

:root {

  --black: #030507;
  --black-soft: #060a0e;

  --navy: #07111d;
  --navy-2: #091827;

  --surface: #0d141d;
  --surface-2: #111b27;
  --surface-3: #142231;

  --white: #f7f9fc;
  --text: #d7e0e9;

  --muted: #8d9bac;
  --muted-light: #a6b2c0;

  --blue: #69c8fa;
  --blue-light: #afe4ff;
  --violet: #8e91ff;
  --cyan: #5dd9c8;

  --border:
    rgba(155, 187, 218, .14);

  --border-hover:
    rgba(105, 200, 250, .34);

  --container:
    min(
      1480px,
      calc(100% - 80px)
    );
}


body {

  background:
    var(--black);

  color:
    var(--white);

  font-family:
    "Inter",
    sans-serif;

  overflow-x:
    hidden;
}


body.menu-open {
  overflow: hidden;
}


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


button {
  font: inherit;
}


svg {
  stroke-width: 1.8;
}


.container {

  width:
    var(--container);

  margin-inline:
    auto;
}


.section {
  padding: 100px 0;
}


h1,
h2,
h3,
h4 {

  font-family:
    "Manrope",
    sans-serif;
}


h2 {

  font-size:
    clamp(
      38px,
      4vw,
      58px
    );

  line-height: 1.06;

  letter-spacing: -2.8px;
}


h2 span {
  color: var(--blue);
}


p {

  color:
    var(--muted);

  font-size: 15px;

  line-height: 1.72;
}



/* =====================================================
BACKGROUND EFFECTS
===================================================== */

.grain {

  position: fixed;

  inset: 0;

  z-index: 9999;

  pointer-events: none;

  opacity: .02;

  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


.mouse-glow {

  position: fixed;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  pointer-events: none;

  z-index: -1;

  transform:
    translate(-50%, -50%);

  background:
    radial-gradient(
      circle,
      rgba(105,200,250,.07),
      transparent 70%
    );
}



/* =====================================================
HEADER
===================================================== */

.header {

  position: fixed;

  width: 100%;

  top: 20px;

  z-index: 1000;
}


.nav-shell {

  width:
    min(
      1530px,
      calc(100% - 64px)
    );

  min-height: 76px;

  margin: auto;

  padding: 0 24px;

  display: flex;

  align-items: center;

  border-radius: 18px;

  border:
    1px solid
    var(--border);

  background:
    rgba(10,17,27,.82);

  backdrop-filter:
    blur(22px);

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.28);

  transition: .3s ease;
}


.header.scrolled
.nav-shell {

  background:
    rgba(6,10,16,.96);

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.42);
}



/* BRAND */

.brand {

  display: inline-flex;

  align-items: center;

  gap: 11px;
}


.brand-name {

  font-family:
    "Manrope",
    sans-serif;

  font-size: 23px;

  font-weight: 800;

  letter-spacing: -.7px;
}


.brand-mark {

  position: relative;

  width: 42px;
  height: 31px;
}


.brand-mark i {

  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  border:
    2px solid
    var(--blue);

  background:
    #101b27;

  z-index: 2;
}


.brand-mark i:nth-child(1) {
  left: 0;
  bottom: 2px;
}

.brand-mark i:nth-child(2) {
  left: 18px;
  top: 11px;
}

.brand-mark i:nth-child(3) {
  right: 0;
  top: 0;
}


.brand-mark b {

  position: absolute;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--violet)
    );

  transform-origin: left;
}


.brand-mark b:nth-of-type(1) {

  width: 22px;

  left: 5px;
  bottom: 8px;

  transform:
    rotate(-33deg);
}


.brand-mark b:nth-of-type(2) {

  width: 23px;

  left: 24px;
  top: 15px;

  transform:
    rotate(-47deg);
}



/* NAV */

.desktop-nav {

  margin-left: auto;
  margin-right: 32px;

  display: flex;

  align-items: center;

  gap: 30px;
}


.desktop-nav > a,
.nav-trigger {

  color:
    #bec9d4;

  font-size: 13px;

  font-weight: 600;

  border: 0;

  background: none;

  cursor: pointer;
}


.desktop-nav > a:hover,
.nav-trigger:hover {
  color: var(--blue);
}


.nav-dropdown-wrap {
  position: relative;
}


.nav-trigger {

  display: inline-flex;

  align-items: center;

  gap: 6px;
}


.nav-trigger svg {

  width: 14px;
  height: 14px;
}


.nav-dropdown {

  position: absolute;

  width: 360px;

  left: -25px;

  top:
    calc(100% + 25px);

  padding: 10px;

  border-radius: 16px;

  border:
    1px solid
    var(--border);

  background:
    rgba(7,12,18,.98);

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(8px);

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.45);

  transition: .23s ease;
}


.nav-dropdown-wrap:hover
.nav-dropdown {

  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);
}


.nav-dropdown a {

  display: flex;

  gap: 12px;

  padding: 13px;

  border-radius: 10px;
}


.nav-dropdown a:hover {

  background:
    rgba(105,200,250,.05);
}


.nav-drop-icon {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  flex: 0 0 36px;

  border-radius: 9px;

  background:
    rgba(105,200,250,.05);

  color: var(--blue);
}


.nav-drop-icon svg {

  width: 16px;
  height: 16px;
}


.nav-dropdown strong {

  display: block;

  font-size: 13px;
}


.nav-dropdown small {

  display: block;

  margin-top: 4px;

  color:
    var(--muted);

  font-size: 11px;
}


.nav-cta {

  min-height: 46px;

  padding: 0 18px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  border-radius: 9px;

  color: #061018;

  background:
    linear-gradient(
      135deg,
      #b7e9ff,
      #70c8fa
    );

  font-size: 13px;

  font-weight: 800;
}


.nav-cta svg {

  width: 15px;
  height: 15px;
}


.mobile-toggle,
.mobile-menu {
  display: none;
}



/* =====================================================
COMMON
===================================================== */

.eyebrow,
.section-label {

  color:
    var(--blue);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;
}


.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;
}


.eyebrow > span {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--cyan);
}


.section-label {

  display: block;

  margin-bottom: 16px;
}


.btn {

  min-height: 54px;

  padding: 0 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border-radius: 9px;

  font-size: 13px;

  font-weight: 700;

  transition: .25s ease;
}


.btn svg {

  width: 15px;
  height: 15px;
}


.btn-primary {

  color: #061018;

  background:
    linear-gradient(
      135deg,
      #b9eaff,
      #70c7fa
    );
}


.btn-secondary {

  border:
    1px solid
    var(--border);

  background:
    rgba(255,255,255,.018);

  color:
    #d1dae3;
}



/* =====================================================
HERO
===================================================== */

.hero {

  position: relative;

  min-height: 870px;

  padding: 175px 0 80px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(24,76,125,.27),
      transparent 35%
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(51,112,170,.11),
      transparent 32%
    ),
    linear-gradient(
      140deg,
      #07111c 0%,
      #030608 50%,
      #06101a 100%
    );
}


.hero-grid {

  position: absolute;

  inset: 0;

  opacity: .08;

  background-image:
    linear-gradient(
      rgba(105,200,250,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(105,200,250,.08) 1px,
      transparent 1px
    );

  background-size: 68px 68px;
}


.hero-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(100px);
}


.hero-orb-one {

  width: 450px;
  height: 450px;

  left: -180px;
  bottom: 40px;

  background:
    rgba(60,160,230,.075);
}


.hero-orb-two {

  width: 480px;
  height: 480px;

  right: -180px;
  top: 70px;

  background:
    rgba(126,116,255,.055);
}


.hero-layout {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1.04fr .96fr;

  gap: 82px;

  align-items: center;
}


.hero-copy h1 {

  max-width: 800px;

  margin-top: 22px;

  font-size:
    clamp(
      54px,
      5.7vw,
      80px
    );

  line-height: .98;

  letter-spacing: -4.8px;
}


.hero-changing-line {

  display: block;

  margin-top: 7px;
}


.hero-changing-line > span {

  display: inline-block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--violet)
    );

  -webkit-background-clip: text;
  background-clip: text;

  transition:
    opacity .28s ease,
    transform .28s ease,
    filter .28s ease;
}


.hero-changing-line > span.out {

  opacity: 0;

  transform:
    translateY(-14px);

  filter: blur(6px);
}


.hero-changing-line > span.in {

  animation:
    heroWordIn .45s ease;
}


@keyframes heroWordIn {

  from {

    opacity: 0;

    transform:
      translateY(15px);

    filter: blur(5px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);

    filter: blur(0);
  }
}


.hero-description {

  max-width: 630px;

  margin-top: 26px;

  font-size: 16px;
}


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 29px;
}


.hero-proof {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 12px;

  margin-top: 25px;
}


.hero-proof span {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    #8493a4;

  font-size: 11px;
}


.hero-proof span svg {

  width: 13px;
  height: 13px;

  color:
    #75a6bf;
}


.hero-proof-dot {

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    #536170;
}



/* DASHBOARD */

.hero-dashboard-wrap {

  position: relative;

  perspective: 1300px;
}


.dashboard-card {

  position: relative;

  padding: 26px;

  overflow: hidden;

  border-radius: 23px;

  border:
    1px solid
    rgba(105,200,250,.16);

  background:
    linear-gradient(
      145deg,
      rgba(15,23,32,.97),
      rgba(7,11,16,.97)
    );

  box-shadow:
    0 50px 110px
    rgba(0,0,0,.43);

  transform-style:
    preserve-3d;

  transition:
    transform .18s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.hero-dashboard-wrap:hover
.dashboard-card {

  border-color:
    rgba(105,200,250,.32);

  box-shadow:
    0 60px 140px
    rgba(0,0,0,.55),
    0 0 70px
    rgba(105,200,250,.05);
}


.dashboard-shine {

  position: absolute;

  width: 260px;
  height: 600px;

  left: -300px;
  top: -150px;

  transform: rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.025),
      transparent
    );

  pointer-events: none;
}


.hero-dashboard-wrap:hover
.dashboard-shine {

  animation:
    dashboardShine
    1.5s ease;
}


@keyframes dashboardShine {

  to {
    left: 120%;
  }
}


.dashboard-head {

  display: flex;

  justify-content: space-between;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(--border);
}


.dashboard-head small {

  color:
    var(--blue);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.4px;
}


.dashboard-head h3 {

  margin-top: 6px;

  font-size: 20px;
}


.live-status {

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    var(--cyan);

  font-size: 10px;
}


.live-status i {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--cyan);

  animation:
    pulse 1.6s infinite;
}


@keyframes pulse {

  50% {

    box-shadow:
      0 0 0 8px
      rgba(93,217,200,.08);
  }
}


.dashboard-overview {

  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: center;

  padding: 22px 0;

  border-bottom:
    1px solid
    var(--border);
}


.dashboard-overview span {

  display: block;

  color:
    #8494a6;

  font-size: 11px;
}


.dashboard-overview strong {

  display: block;

  margin: 5px 0;

  font-size: 34px;
}


.dashboard-overview small {

  color:
    var(--cyan);

  font-size: 10px;
}


.health-ring {

  position: relative;

  width: 80px;
  height: 80px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--blue) 87%,
      #17202a 0
    );

  animation:
    ringFloat
    4s ease-in-out infinite;
}


@keyframes ringFloat {

  50% {
    transform:
      translateY(-4px);
  }
}


.health-ring::after {

  content: "";

  position: absolute;

  width: 64px;
  height: 64px;

  border-radius: 50%;

  background:
    #0a1016;
}


.health-ring span {

  position: relative;

  z-index: 2;

  color:
    var(--blue);

  font-size: 18px;

  font-weight: 700;
}


.activity-row {

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 11px;

  align-items: center;

  padding: 14px 5px;

  border-bottom:
    1px solid
    rgba(155,187,218,.07);

  opacity: .36;

  transition:
    opacity .35s ease,
    transform .35s ease,
    background .35s ease;
}


.activity-row.active {

  opacity: 1;

  transform:
    translateX(4px);

  background:
    linear-gradient(
      90deg,
      rgba(105,200,250,.045),
      transparent
    );
}


.activity-icon {

  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  background:
    rgba(105,200,250,.04);

  color:
    var(--blue);
}


.activity-icon.success {
  color: var(--cyan);
}


.activity-icon svg {

  width: 15px;
  height: 15px;
}


.activity-row strong {

  display: block;

  font-size: 11px;
}


.activity-row small {

  display: block;

  margin-top: 3px;

  color:
    #788798;

  font-size: 9px;
}


.activity-row time {

  color:
    #5d6978;

  font-size: 9px;
}


.dashboard-metrics {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 10px;

  margin-top: 16px;
}


.dashboard-metrics > div {

  padding: 13px;

  border-radius: 10px;

  border:
    1px solid
    rgba(155,187,218,.08);

  background:
    rgba(255,255,255,.015);

  transition:
    transform .25s ease,
    background .25s ease;
}


.hero-dashboard-wrap:hover
.dashboard-metrics > div:nth-child(1) {

  transform:
    translateY(-4px);
}


.hero-dashboard-wrap:hover
.dashboard-metrics > div:nth-child(2) {

  transform:
    translateY(-7px);
}


.hero-dashboard-wrap:hover
.dashboard-metrics > div:nth-child(3) {

  transform:
    translateY(-4px);
}


.dashboard-metrics span {

  color:
    #768596;

  font-size: 9px;
}


.dashboard-metrics strong {

  display: block;

  margin-top: 5px;

  font-size: 19px;
}


.float-chip {

  position: absolute;

  z-index: 4;

  padding: 10px 13px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  border-radius: 100px;

  border:
    1px solid
    rgba(105,200,250,.15);

  background:
    rgba(7,12,17,.96);

  font-size: 10px;

  animation:
    floatChip
    4s ease-in-out infinite;
}


.float-chip svg {

  width: 13px;
  height: 13px;
}


.chip-one {

  left: -30px;
  bottom: 60px;

  color:
    var(--cyan);
}


.chip-two {

  right: -15px;
  top: 75px;

  color:
    var(--blue);

  animation-delay: 1s;
}


@keyframes floatChip {

  50% {

    transform:
      translateY(-7px);
  }
}



/* =====================================================
TRUST
===================================================== */

.trust-strip {

  padding: 30px 0 38px;

  overflow: hidden;

  border-top:
    1px solid
    rgba(155,187,218,.06);

  border-bottom:
    1px solid
    rgba(155,187,218,.06);

  background:
    linear-gradient(
      90deg,
      #04070a,
      #07111c,
      #04070a
    );
}


.trust-caption {

  margin-bottom: 23px;

  color:
    #6f8294;

  text-align: center;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.8px;
}


.marquee {

  overflow: hidden;
}


.marquee-track {

  width: max-content;

  display: flex;

  gap: 85px;

  animation:
    marquee 28s linear infinite;
}


.marquee-track span {

  color:
    #98a6b5;

  font-size: 18px;

  font-weight: 600;

  white-space: nowrap;
}


@keyframes marquee {

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



/* =====================================================
HOW IT WORKS
===================================================== */

.system-section {

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(30,92,143,.08),
      transparent 30%
    ),
    #06090d;
}


.section-split-heading {

  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 50px;
}


.section-split-heading p {

  max-width: 500px;

  font-size: 15px;
}


.system-card-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 16px;
}


.system-card {

  min-height: 395px;

  padding: 25px;

  position: relative;

  overflow: hidden;

  border-radius: 19px;

  border:
    1px solid
    var(--border);

  background:
    linear-gradient(
      145deg,
      #101823,
      #080d13
    );

  transition:
    .35s ease;
}


.system-card:hover {

  transform:
    translateY(-7px);

  border-color:
    var(--border-hover);

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.25);
}


.system-card-top {

  display: flex;

  justify-content: space-between;

  align-items: center;
}


.system-number {

  color:
    #66788a;

  font-size: 10px;
}


.system-icon {

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  color:
    var(--blue);

  border:
    1px solid
    rgba(105,200,250,.14);

  background:
    rgba(105,200,250,.04);
}


.system-icon svg {

  width: 19px;
  height: 19px;
}


.system-card h3 {

  margin-top: 34px;

  font-size: 24px;
}


.system-card > p {

  margin-top: 10px;

  font-size: 13px;
}


.system-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 18px;
}


.system-tags span {

  padding: 6px 9px;

  border-radius: 100px;

  border:
    1px solid
    rgba(155,187,218,.1);

  color:
    #8393a5;

  font-size: 9px;
}


.research-animation {

  margin-top: 27px;
}


.research-item {

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 9px;

  align-items: center;

  padding: 10px;

  margin-bottom: 7px;

  border-radius: 8px;

  background:
    rgba(255,255,255,.017);

  opacity: .42;

  transition: .3s ease;
}


.research-item.active {

  opacity: 1;

  background:
    rgba(105,200,250,.055);
}


.research-item > span {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    #536474;
}


.research-item.active > span {
  background: var(--blue);
}


.research-item strong {

  display: block;

  font-size: 10px;
}


.research-item small {

  color:
    #718194;

  font-size: 8px;
}


.research-item svg {

  width: 12px;
  height: 12px;

  color:
    var(--cyan);
}



/* Reach */

.reach-animation {

  position: relative;

  height: 165px;

  margin-top: 22px;
}


.reach-ring {

  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  border:
    1px solid
    rgba(105,200,250,.12);

  transform:
    translate(-50%,-50%);
}


.reach-ring-one {

  width: 115px;
  height: 115px;
}


.reach-ring-two {

  width: 165px;
  height: 165px;

  animation:
    ringExpand
    3s ease-in-out infinite;
}


@keyframes ringExpand {

  50% {

    opacity: .4;

    transform:
      translate(-50%,-50%)
      scale(1.06);
  }
}


.reach-person {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  transform:
    translate(-50%,-50%);

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

  color:
    #051019;
}


.reach-channel {

  position: absolute;

  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    #111c27;

  color:
    var(--blue);

  border:
    1px solid
    rgba(105,200,250,.15);

  animation:
    channelFloat
    3s ease-in-out infinite;
}


.reach-phone {
  left: 11%;
  top: 19%;
}


.reach-email {
  right: 10%;
  top: 16%;
}


.reach-linkedin {
  left: 12%;
  bottom: 11%;
}


.reach-whatsapp {
  right: 11%;
  bottom: 11%;
}


.linkedin-text {

  color: #71c8ff;

  font-size: 11px;

  font-weight: 800;
}


.whatsapp-text {

  color: #65dfbd;

  font-size: 11px;

  font-weight: 800;
}


@keyframes channelFloat {

  50% {

    transform:
      translateY(-6px);
  }
}



/* Qualification */

.qualification-bars {

  margin-top: 27px;

  display: grid;

  gap: 11px;
}


.qualification-bars > div {

  display: grid;

  grid-template-columns:
    65px 1fr;

  gap: 10px;

  align-items: center;
}


.qualification-bars span {

  color:
    #7f90a2;

  font-size: 9px;
}


.qualification-bars strong {

  height: 6px;

  overflow: hidden;

  border-radius: 20px;

  background:
    #17212b;
}


.qualification-bars strong i {

  display: block;

  width: 0;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--cyan)
    );
}


.system-card.visible
.qualification-bars strong i {

  animation:
    barGrow
    1.3s .3s ease forwards;
}


@keyframes barGrow {

  to {
    width: var(--progress);
  }
}



/* Handoff */

.handoff-card {

  margin-top: 27px;

  padding: 14px;

  border-radius: 11px;

  background:
    rgba(255,255,255,.018);

  border:
    1px solid
    rgba(155,187,218,.09);
}


.handoff-head {

  display: flex;

  justify-content: space-between;

  color:
    #8696a6;

  font-size: 9px;
}


.handoff-head svg {

  width: 12px;
  height: 12px;

  color:
    var(--cyan);
}


.handoff-profile {

  margin-top: 15px;

  display: flex;

  align-items: center;

  gap: 10px;
}


.handoff-profile > div {

  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

  color:
    #061018;

  font-size: 9px;

  font-weight: 800;
}


.handoff-profile strong {

  display: block;

  font-size: 10px;
}


.handoff-profile small {

  color:
    #768799;

  font-size: 8px;
}


.handoff-status {

  margin-top: 14px;

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    var(--cyan);

  font-size: 9px;
}


.handoff-status i {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--cyan);

  animation:
    pulse 1.5s infinite;
}



/* =====================================================
OUTREACH
===================================================== */

.outreach-section {

  background:
    radial-gradient(
      circle at 15% 40%,
      rgba(25,80,130,.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #04070a,
      #07101a
    );
}


.outreach-heading {

  max-width: 800px;

  margin-bottom: 46px;
}


.outreach-heading p {

  max-width: 590px;

  margin-top: 17px;

  font-size: 15px;
}


.channel-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 22px;
}


.channel-pills span {

  padding: 9px 12px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  border-radius: 100px;

  border:
    1px solid
    rgba(105,200,250,.12);

  background:
    rgba(105,200,250,.025);

  color:
    #9ba9b8;

  font-size: 11px;
}


.channel-pills svg {

  width: 13px;
  height: 13px;

  color:
    var(--blue);
}


.mini-linkedin,
.mini-whatsapp {

  font-size: 10px;
}


.mini-linkedin {
  color: #69c8fa;
}


.mini-whatsapp {
  color: #64ddb9;
}


.outreach-lab {

  display: grid;

  grid-template-columns:
    .63fr 1.37fr;

  overflow: hidden;

  border-radius: 23px;

  border:
    1px solid
    var(--border);

  background:
    #080d13;

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.26);
}


.outreach-nav {

  border-right:
    1px solid
    var(--border);

  background:
    linear-gradient(
      180deg,
      #0a1118,
      #071019
    );
}


.outreach-nav-item {

  width: 100%;

  min-height: 84px;

  padding: 0 20px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 13px;

  align-items: center;

  border: 0;

  border-bottom:
    1px solid
    var(--border);

  background: transparent;

  color:
    #aab5c0;

  text-align: left;

  cursor: pointer;

  transition: .25s ease;
}


.outreach-nav-item:last-child {
  border-bottom: 0;
}


.outreach-nav-item.active,
.outreach-nav-item:hover {

  color: white;

  background:
    linear-gradient(
      90deg,
      rgba(105,200,250,.075),
      transparent
    );
}


.outreach-icon {

  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  border:
    1px solid
    rgba(105,200,250,.14);

  background:
    rgba(105,200,250,.04);

  color:
    var(--blue);
}


.outreach-icon svg {

  width: 18px;
  height: 18px;
}


.linkedin-box-icon {

  color: #68c9ff;

  font-size: 13px;

  font-weight: 800;
}


.whatsapp-box-icon {

  color: #5eddb8;

  font-size: 13px;

  font-weight: 800;
}


.outreach-nav-item strong {

  display: block;

  font-size: 12px;
}


.outreach-nav-item small {

  display: block;

  margin-top: 4px;

  color:
    #768696;

  font-size: 9px;
}


.outreach-arrow {

  width: 14px;
  height: 14px;

  color:
    #617184;
}


.outreach-nav-item.active
.outreach-arrow {

  color: var(--blue);
}


.outreach-stage {

  min-height: 535px;

  padding: 40px;

  display: grid;

  grid-template-columns:
    .78fr 1.22fr;

  gap: 38px;

  align-items: center;

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(105,200,250,.06),
      transparent 38%
    ),
    #0b121a;
}


.outreach-copy small {

  color:
    var(--blue);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.5px;
}


.outreach-copy h3 {

  margin: 13px 0;

  font-size: 29px;

  line-height: 1.12;

  letter-spacing: -1.3px;
}


.outreach-copy > p {

  font-size: 14px;
}


.outreach-benefits {

  display: grid;

  gap: 9px;

  margin-top: 24px;
}


.outreach-benefits span {

  display: flex;

  align-items: center;

  gap: 8px;

  color:
    #9aa8b7;

  font-size: 11px;
}


.outreach-benefits svg {

  width: 13px;
  height: 13px;

  color:
    var(--cyan);
}


.demo-window {

  overflow: hidden;

  border-radius: 16px;

  border:
    1px solid
    var(--border);

  background:
    #060a0f;

  box-shadow:
    0 28px 65px
    rgba(0,0,0,.34);
}


.demo-top {

  min-height: 42px;

  padding: 0 13px;

  display: flex;

  align-items: center;

  background:
    #131c27;
}


.demo-top > div {

  display: flex;

  gap: 5px;
}


.demo-top > div i {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #526272;
}


.demo-top span {

  margin: 0 auto;

  color:
    #8393a4;

  font-size: 9px;
}


.demo-content {

  min-height: 355px;

  padding: 27px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.demo-person {

  display: flex;

  align-items: center;

  gap: 11px;
}


.demo-avatar {

  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

  color:
    #061018;

  font-weight: 800;
}


.demo-person strong {

  display: block;

  font-size: 11px;
}


.demo-person span {

  color:
    #79899b;

  font-size: 9px;
}


.voice-wave {

  min-height: 120px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;
}


.voice-wave i {

  width: 4px;

  border-radius: 10px;

  background:
    linear-gradient(
      to top,
      var(--blue),
      var(--violet)
    );

  animation:
    voiceWave
    1.05s ease-in-out infinite;
}


.voice-wave i:nth-child(1){height:22px}
.voice-wave i:nth-child(2){height:40px}
.voice-wave i:nth-child(3){height:66px}
.voice-wave i:nth-child(4){height:36px}
.voice-wave i:nth-child(5){height:76px}
.voice-wave i:nth-child(6){height:48px}
.voice-wave i:nth-child(7){height:29px}
.voice-wave i:nth-child(8){height:57px}
.voice-wave i:nth-child(9){height:40px}
.voice-wave i:nth-child(10){height:26px}


@keyframes voiceWave {

  50% {

    transform:
      scaleY(.42);

    opacity: .48;
  }
}


.buyer-signal {

  padding: 15px;

  border-radius: 10px;

  border:
    1px solid
    rgba(93,217,200,.13);

  background:
    rgba(93,217,200,.035);
}


.buyer-signal span {

  color:
    var(--cyan);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;
}


.buyer-signal p {

  margin-top: 6px;

  color:
    #afbac6;

  font-size: 11px;
}



/* Email / LinkedIn / WA demos */

.email-preview,
.linkedin-preview,
.whatsapp-preview,
.follow-preview {

  margin-bottom: 20px;

  padding: 17px;

  border-radius: 11px;

  border:
    1px solid
    rgba(155,187,218,.09);

  background:
    #111923;
}


.email-preview small,
.linkedin-preview small,
.whatsapp-preview small {

  color:
    #75879a;

  font-size: 9px;
}


.email-preview strong,
.linkedin-preview strong,
.whatsapp-preview strong {

  display: block;

  margin: 10px 0;

  font-size: 12px;
}


.email-preview p,
.linkedin-preview p,
.whatsapp-preview p {

  font-size: 11px;
}


.demo-badge {

  width: fit-content;

  margin-top: 13px;

  padding: 6px 9px;

  border-radius: 100px;

  background:
    rgba(93,217,200,.06);

  color:
    var(--cyan);

  font-size: 9px;
}


.follow-message {

  max-width: 82%;

  margin-bottom: 9px;

  padding: 12px;

  border-radius: 10px;

  background:
    #18212b;

  color:
    #acb7c3;

  font-size: 11px;
}


.follow-message.right {

  margin-left: auto;

  background:
    rgba(105,200,250,.09);
}



/* =====================================================
OUTCOMES
===================================================== */

.outcomes-section {

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(31,100,160,.08),
      transparent 35%
    ),
    #070b10;
}


.outcomes-heading {

  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 45px;
}


.outcomes-heading p {

  font-size: 15px;
}


.outcomes-grid {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 16px;
}


.outcome-card {

  min-height: 300px;

  padding: 28px;

  position: relative;

  overflow: hidden;

  border-radius: 18px;

  border:
    1px solid
    var(--border);

  background:
    linear-gradient(
      145deg,
      #111a25,
      #090f16
    );

  transition: .3s ease;
}


.outcome-card:hover {

  transform:
    translateY(-5px);

  border-color:
    var(--border-hover);
}


.outcome-featured {

  grid-row:
    span 2;

  min-height: 616px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(105,200,250,.11),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #132131,
      #091019
    );
}


.outcome-card-icon {

  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background:
    rgba(105,200,250,.05);

  color:
    var(--blue);
}


.outcome-card-icon svg {

  width: 20px;
  height: 20px;
}


.outcome-card > span {

  display: block;

  margin-top: 26px;

  color:
    var(--blue);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.3px;
}


.outcome-card h3 {

  max-width: 540px;

  margin-top: 14px;

  font-size: 26px;

  line-height: 1.18;

  letter-spacing: -1px;
}


.outcome-featured h3 {

  font-size: 35px;
}


.outcome-card p {

  max-width: 550px;

  margin-top: 13px;

  font-size: 14px;
}


.outcome-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 22px;
}


.outcome-tags span {

  padding: 7px 10px;

  border-radius: 100px;

  border:
    1px solid
    rgba(105,200,250,.12);

  color:
    #91a3b4;

  font-size: 9px;
}



/* =====================================================
INDUSTRIES
===================================================== */

.industries-section {

  background:
    linear-gradient(
      180deg,
      #07111c,
      #08101a
    );
}


.industries-header {

  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 43px;
}


.industries-header p {

  font-size: 15px;
}


.industry-browser {

  display: grid;

  grid-template-columns:
    .78fr 1.22fr;

  min-height: 630px;

  overflow: hidden;

  border-radius: 22px;

  border:
    1px solid
    var(--border);

  background:
    #0b141e;
}


.industry-list {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  border-right:
    1px solid
    var(--border);

  background:
    #09111a;
}


.industry-option {

  min-height: 100px;

  padding: 20px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 11px;

  align-items: center;

  border: 0;

  border-right:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);

  background: transparent;

  color:
    #9ba9b7;

  text-align: left;

  cursor: pointer;

  transition: .25s ease;
}


.industry-option.active,
.industry-option:hover {

  color:
    white;

  background:
    rgba(105,200,250,.055);
}


.industry-option > span {

  color:
    #647486;

  font-size: 9px;
}


.industry-option svg {

  width: 13px;
  height: 13px;

  color:
    #66788a;
}


.industry-option.active svg {

  color:
    var(--blue);
}


.industry-detail {

  padding: 55px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(105,200,250,.08),
      transparent 35%
    ),
    #0c1620;
}


.industry-large-icon {

  width: 64px;
  height: 64px;

  display: grid;

  place-items: center;

  border-radius: 18px;

  border:
    1px solid
    rgba(105,200,250,.15);

  background:
    rgba(105,200,250,.05);

  color:
    var(--blue);
}


.industry-large-icon svg {

  width: 26px;
  height: 26px;
}


.industry-detail > span {

  margin-top: 30px;

  color:
    var(--blue);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;
}


.industry-detail h3 {

  max-width: 620px;

  margin-top: 13px;

  font-size: 36px;

  line-height: 1.12;

  letter-spacing: -1.7px;
}


.industry-detail p {

  max-width: 600px;

  margin-top: 15px;

  font-size: 15px;
}


.industry-buyers {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 22px;
}


.industry-buyers span {

  padding: 8px 11px;

  border-radius: 100px;

  border:
    1px solid
    rgba(105,200,250,.12);

  color:
    #9cabba;

  font-size: 10px;
}


.industry-detail > a {

  margin-top: 27px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--blue);

  font-size: 12px;

  font-weight: 700;
}


.industry-detail > a svg {

  width: 14px;
  height: 14px;
}



/* =====================================================
PRICING
===================================================== */

.pricing-section {

  background:
    radial-gradient(
      circle at 85% 45%,
      rgba(85,81,190,.06),
      transparent 34%
    ),
    #060a0f;
}


.pricing-heading {

  max-width: 850px;

  margin: 0 auto 50px;

  text-align: center;
}


.pricing-heading p {

  max-width: 600px;

  margin: 17px auto 0;

  font-size: 15px;
}


.pricing-panel {

  min-height: 500px;

  display: grid;

  grid-template-columns:
    .82fr 1.13fr .78fr;

  overflow: hidden;

  border-radius: 24px;

  border:
    1px solid
    rgba(105,200,250,.16);

  background:
    linear-gradient(
      145deg,
      #121d29,
      #09111a
    );
}


.pricing-summary,
.pricing-features,
.pricing-visual {

  padding: 42px;
}


.pricing-summary {

  border-right:
    1px solid
    var(--border);
}


.pricing-badge {

  display: inline-flex;

  padding: 8px 12px;

  border-radius: 100px;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

  color:
    #051019;

  font-size: 9px;

  font-weight: 800;
}


.pricing-summary h3 {

  margin-top: 28px;

  font-size: 30px;
}


.pricing-summary > p {

  margin-top: 9px;

  font-size: 14px;
}


.pricing-value {

  margin-top: 35px;
}


.pricing-value small {

  color:
    #8293a4;

  font-size: 9px;
}


.pricing-value > div {

  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-top: 5px;
}


.pricing-value strong {

  color: transparent;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--violet)
    );

  -webkit-background-clip: text;
  background-clip: text;

  font-size: 48px;
}


.pricing-value span {

  color:
    #8291a1;

  font-size: 12px;
}


.pricing-note {

  margin: 28px 0 26px;

  font-size: 11px;
}


.pricing-feature-label {

  color:
    #a2a6ff;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.7px;
}


.pricing-feature-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 19px 25px;

  margin-top: 27px;
}


.pricing-feature-grid > div {

  display: flex;

  align-items: center;

  gap: 10px;

  color:
    #c1ccd6;

  font-size: 12px;
}


.pricing-feature-grid > div > span {

  width: 29px;
  height: 29px;

  display: grid;

  place-items: center;

  flex:
    0 0 29px;

  border-radius: 50%;

  background:
    rgba(105,200,250,.08);

  color:
    var(--blue);
}


.pricing-feature-grid svg {

  width: 13px;
  height: 13px;
}


.pricing-text-icon {

  font-size: 9px;

  font-weight: 800;
}


.pricing-text-icon.whatsapp {

  color:
    #62dab7;
}


.pricing-visual {

  position: relative;

  overflow: hidden;
}


.pod-orbit {

  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  border:
    1px solid
    rgba(105,200,250,.09);

  transform:
    translate(-50%,-50%);

  animation:
    podOrbit
    4s ease-in-out infinite;
}


.pod-orbit-one {

  width: 280px;
  height: 280px;
}


.pod-orbit-two {

  width: 190px;
  height: 190px;

  animation-delay: 1s;
}


@keyframes podOrbit {

  50% {

    transform:
      translate(-50%,-50%)
      scale(1.06);

    opacity: .45;
  }
}


.sales-pod-card {

  position: absolute;

  width: 210px;

  left: 50%;
  top: 50%;

  padding: 22px;

  transform:
    translate(-50%,-50%);

  border-radius: 17px;

  border:
    1px solid
    rgba(105,200,250,.14);

  background:
    rgba(7,12,18,.94);
}


.sales-pod-avatar {

  width: 55px;
  height: 55px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

  color:
    #061018;

  font-weight: 800;
}


.sales-pod-card > span {

  display: block;

  margin-top: 17px;

  color:
    var(--blue);

  font-size: 8px;

  letter-spacing: 1.2px;
}


.sales-pod-card > strong {

  display: block;

  margin-top: 6px;

  font-size: 14px;
}


.sales-pod-card > small {

  display: block;

  margin-top: 5px;

  color:
    #758698;

  font-size: 9px;
}


.pod-status {

  margin-top: 18px;

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    var(--cyan);

  font-size: 9px;
}


.pod-status i {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--cyan);

  animation:
    pulse 1.5s infinite;
}


.pod-stat {

  position: absolute;

  padding: 10px;

  display: flex;

  align-items: center;

  gap: 9px;

  border-radius: 11px;

  border:
    1px solid
    var(--border);

  background:
    rgba(7,12,18,.94);

  animation:
    podFloat 4s ease-in-out infinite;
}


.pod-stat svg {

  width: 15px;
  height: 15px;

  color:
    var(--blue);
}


.pod-stat strong {

  display: block;

  font-size: 14px;
}


.pod-stat span {

  color:
    #758698;

  font-size: 8px;
}


.pod-stat-one {

  right: 10px;
  top: 85px;
}


.pod-stat-two {

  left: 12px;
  bottom: 85px;

  animation-delay: 1s;
}


@keyframes podFloat {

  50% {
    transform:
      translateY(-7px);
  }
}



/* =====================================================
FAQ
===================================================== */

.faq-section {

  padding: 105px 0;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(55,85,160,.07),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #05070b,
      #071020
    );
}


.faq-heading {

  max-width: 900px;

  margin: 0 auto 46px;

  text-align: center;
}


.faq-heading p {

  max-width: 650px;

  margin: 16px auto 0;

  font-size: 15px;
}


.faq-list {

  max-width: 980px;

  margin: auto;
}


.faq-item {

  margin-bottom: 12px;

  overflow: hidden;

  border-radius: 15px;

  border:
    1px solid
    rgba(130,145,235,.14);

  background:
    #161a35;

  transition: .25s ease;
}


.faq-item.active {

  border-color:
    rgba(105,200,250,.35);

  background:
    #171d3d;
}


.faq-question {

  width: 100%;

  min-height: 80px;

  padding: 0 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border: 0;

  background: transparent;

  color: white;

  cursor: pointer;

  text-align: left;
}


.faq-question strong {

  font-size: 15px;
}


.faq-question > span {

  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  flex: 0 0 38px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.07);

  color:
    #8597c9;
}


.faq-item.active
.faq-question > span {

  background:
    var(--blue);

  color:
    #07101a;
}


.faq-question svg {

  width: 16px;
  height: 16px;
}


.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition:
    max-height .35s ease;
}


.faq-answer p {

  padding: 0 22px;

  color:
    #9fb0d0;

  font-size: 14px;
}


.faq-item.active
.faq-answer {

  max-height: 220px;
}


.faq-item.active
.faq-answer p {

  padding-bottom: 24px;
}



/* =====================================================
CTA
===================================================== */

.cta-section {

  padding: 45px 0 105px;

  background:
    #071020;
}


.cta-panel {

  min-height: 390px;

  padding: 50px;

  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 60px;

  align-items: center;

  overflow: hidden;

  border-radius: 25px;

  color:
    #06101c;

  background:
    linear-gradient(
      135deg,
      #c8ddff,
      #b6d8ff
    );

  box-shadow:
    0 35px 85px
    rgba(0,0,0,.16);
}


.cta-copy > span {

  color:
    #42638e;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.cta-panel h2 {

  max-width: 620px;

  margin-top: 14px;

  color:
    #06101c;

  font-size:
    clamp(
      37px,
      4vw,
      54px
    );
}


.cta-panel p {

  max-width: 550px;

  margin-top: 16px;

  color:
    #28405d;

  font-size: 15px;
}


.cta-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  align-items: center;

  margin-top: 27px;
}


.cta-main-button {

  min-height: 54px;

  padding: 0 22px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  border-radius: 9px;

  color: white;

  background:
    #227eef;

  font-size: 13px;

  font-weight: 700;
}


.cta-main-button svg {

  width: 15px;
  height: 15px;
}


.cta-secondary-link {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    #163e70;

  font-size: 12px;

  font-weight: 700;
}


.cta-secondary-link svg {

  width: 14px;
  height: 14px;
}


.cta-visual {

  position: relative;

  min-height: 280px;
}


.cta-circle {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(20,65,105,.15);
}


.circle-large {

  width: 270px;
  height: 270px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);
}


.circle-small {

  width: 190px;
  height: 190px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);
}


.cta-screen {

  position: absolute;

  width: 250px;

  left: 50%;
  top: 50%;

  overflow: hidden;

  transform:
    translate(-50%,-50%);

  border-radius: 15px;

  border:
    1px solid
    rgba(9,45,78,.22);

  background:
    #10293f;

  box-shadow:
    0 20px 55px
    rgba(20,60,100,.18);
}


.cta-screen-bar {

  min-height: 30px;

  padding: 0 10px;

  display: flex;

  align-items: center;

  gap: 5px;

  background:
    #0b1e30;
}


.cta-screen-bar i {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #87b8df;
}


.cta-screen-body {

  padding: 22px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;
}


.cta-person {

  min-height: 72px;

  display: grid;

  place-items: center;

  border-radius: 7px;

  background:
    #bbd8e7;

  color:
    #17324a;

  font-weight: 800;
}


.cta-floating-icon {

  position: absolute;

  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background:
    white;

  color:
    #297dd8;

  box-shadow:
    0 15px 35px
    rgba(30,70,110,.15);

  animation:
    ctaFloat 3s ease-in-out infinite;
}


.cta-phone {

  left: 11%;
  top: 20%;
}


.cta-calendar {

  right: 8%;
  bottom: 18%;

  animation-delay: .8s;
}


.cta-floating-icon svg {

  width: 18px;
  height: 18px;
}


@keyframes ctaFloat {

  50% {
    transform:
      translateY(-7px);
  }
}



/* =====================================================
FOOTER
===================================================== */

.footer {

  padding: 75px 0 28px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(30,80,120,.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #09111a,
      #070b10
    );

  border-top:
    1px solid
    var(--border);
}


.footer-top {

  display: grid;

  grid-template-columns:
    1.15fr 1.85fr;

  gap: 100px;

  padding-bottom: 55px;
}


.footer-brand p {

  max-width: 420px;

  margin-top: 20px;

  color:
    #8d9cad;

  font-size: 14px;
}


.footer-primary-link {

  margin-top: 25px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--blue);

  font-size: 13px;

  font-weight: 700;
}


.footer-primary-link svg {

  width: 14px;
  height: 14px;
}


.footer-columns {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 45px;
}


.footer-column h4 {

  margin-bottom: 18px;

  color:
    #edf3f8;

  font-size: 13px;
}


.footer-column a {

  display: block;

  margin-bottom: 12px;

  color:
    #8393a5;

  font-size: 12px;

  transition: .2s ease;
}


.footer-column a:hover {

  color:
    var(--blue);
}


.footer-contact {

  padding: 25px 0;

  display: grid;

  grid-template-columns:
    1fr 1fr auto;

  align-items: center;

  gap: 40px;

  border-top:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);
}


.footer-contact small {

  display: block;

  margin-bottom: 6px;

  color:
    #667688;

  font-size: 9px;

  letter-spacing: 1.3px;
}


.footer-contact a,
.footer-contact strong {

  color:
    #bbc7d2;

  font-size: 12px;

  font-weight: 500;
}


.social-links {

  display: flex;

  gap: 8px;
}


.social-links a {

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  border:
    1px solid
    var(--border);

  color:
    #9aa8b7;

  transition: .25s ease;
}


.social-links a:hover {

  color:
    var(--blue);

  border-color:
    var(--border-hover);

  transform:
    translateY(-2px);
}


.social-links span {

  font-weight: 800;
}


.social-links svg {

  width: 15px;
  height: 15px;
}


.footer-bottom {

  padding-top: 22px;

  display: flex;

  justify-content: space-between;
}


.footer-bottom p,
.footer-bottom a {

  color:
    #69798b;

  font-size: 11px;
}


.footer-bottom > div {

  display: flex;

  gap: 20px;
}



/* =====================================================
REVEALS
===================================================== */

.reveal {

  opacity: 0;

  transform:
    translateY(24px);

  filter: blur(3px);

  transition:
    opacity .72s ease,
    transform .72s ease,
    filter .72s ease;
}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

  filter: blur(0);
}


.reveal-scale {

  opacity: 0;

  transform:
    translateY(25px)
    scale(.975);

  filter: blur(4px);

  transition:
    opacity .82s ease,
    transform .82s ease,
    filter .82s ease;
}


.reveal-scale.visible {

  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}



/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:1180px) {

  :root {

    --container:
      min(
        100% - 48px,
        1480px
      );
  }


  .desktop-nav {
    display: none;
  }


  .mobile-toggle {

    display: block;

    margin-left: 15px;

    border: 0;

    background: transparent;
  }


  .mobile-toggle span {

    display: block;

    width: 23px;
    height: 2px;

    margin: 5px 0;

    background: white;
  }


  .mobile-menu {

    position: fixed;

    top: 104px;

    left: 30px;
    right: 30px;

    padding: 22px;

    border-radius: 17px;

    border:
      1px solid
      var(--border);

    background:
      rgba(7,12,18,.98);

    flex-direction: column;

    gap: 15px;
  }


  .mobile-menu.open {
    display: flex;
  }


  .mobile-menu a {

    color:
      #bcc7d2;

    font-size: 13px;
  }


  .mobile-cta {

    padding: 12px;

    border-radius: 9px;

    text-align: center;

    background:
      var(--blue);

    color:
      #051019 !important;
  }


  .hero-layout {

    grid-template-columns:
      1fr;

    gap: 65px;
  }


  .hero-dashboard-wrap {

    max-width: 720px;

    margin: auto;
  }


  .system-card-grid {

    grid-template-columns:
      1fr 1fr;
  }


  .outreach-lab {

    grid-template-columns:
      1fr;
  }


  .outreach-nav {

    display: grid;

    grid-template-columns:
      repeat(5,1fr);

    border-right: 0;

    border-bottom:
      1px solid
      var(--border);
  }


  .outreach-nav-item {

    grid-template-columns:
      1fr;

    justify-items: center;

    padding: 14px;

    text-align: center;
  }


  .outreach-arrow {
    display: none;
  }


  .outreach-stage {

    grid-template-columns:
      1fr 1fr;
  }


  .industry-browser {

    grid-template-columns:
      1fr;
  }


  .industry-list {

    border-right: 0;

    border-bottom:
      1px solid
      var(--border);
  }


  .pricing-panel {

    grid-template-columns:
      .9fr 1.1fr;
  }


  .pricing-visual {
    display: none;
  }

}


@media(max-width:820px) {

  .section {
    padding: 80px 0;
  }


  .nav-cta {
    display: none;
  }


  .hero {

    min-height: auto;

    padding-top: 140px;
  }


  .hero-copy h1 {

    font-size: 53px;

    letter-spacing: -3.4px;
  }


  .section-split-heading,
  .outcomes-heading,
  .industries-header {

    grid-template-columns:
      1fr;

    gap: 20px;
  }


  .outreach-nav {

    grid-template-columns:
      1fr 1fr;
  }


  .outreach-stage {

    grid-template-columns:
      1fr;
  }


  .outcomes-grid {

    grid-template-columns:
      1fr;
  }


  .outcome-featured {

    grid-row: auto;

    min-height: 380px;
  }


  .pricing-panel {

    grid-template-columns:
      1fr;
  }


  .pricing-summary {

    border-right: 0;

    border-bottom:
      1px solid
      var(--border);
  }


  .cta-panel {

    grid-template-columns:
      1fr;
  }


  .footer-top {

    grid-template-columns:
      1fr;

    gap: 45px;
  }

}


@media(max-width:560px) {

  :root {

    --container:
      calc(100% - 28px);
  }


  p {

    font-size: 14px;
  }


  .header {
    top: 12px;
  }


  .nav-shell {

    width:
      calc(100% - 28px);

    min-height: 66px;

    padding: 0 15px;
  }


  .brand-name {
    font-size: 19px;
  }


  .hero {
    padding-top: 128px;
  }


  .hero-copy h1 {

    font-size: 43px;

    letter-spacing: -2.7px;
  }


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


  .hero-actions {

    flex-direction: column;
  }


  .hero-actions .btn {

    width: 100%;
  }


  .float-chip {
    display: none;
  }


  .dashboard-metrics {

    grid-template-columns:
      1fr;
  }


  h2 {

    font-size: 33px;

    letter-spacing: -1.8px;
  }


  .system-card-grid {

    grid-template-columns:
      1fr;
  }


  .outreach-nav {

    grid-template-columns:
      1fr;
  }


  .outreach-nav-item {

    grid-template-columns:
      auto 1fr;

    justify-items: initial;

    text-align: left;
  }


  .outreach-stage {
    padding: 23px;
  }


  .outreach-copy h3 {

    font-size: 25px;
  }


  .industry-list {

    grid-template-columns:
      1fr;
  }


  .industry-detail {

    padding: 30px 22px;
  }


  .industry-detail h3 {

    font-size: 29px;
  }


  .pricing-summary,
  .pricing-features {

    padding: 29px 22px;
  }


  .pricing-feature-grid {

    grid-template-columns:
      1fr;
  }


  .faq-question strong {

    font-size: 13px;
  }


  .cta-panel {

    padding: 35px 23px;
  }


  .cta-actions {

    flex-direction: column;

    align-items: flex-start;
  }


  .footer-columns {

    grid-template-columns:
      1fr 1fr;
  }


  .footer-contact {

    grid-template-columns:
      1fr;

    gap: 22px;
  }


  .footer-bottom {

    flex-direction: column;

    gap: 13px;
  }

}

/* ==========================================================
   DAWN — PREMIUM GTM POLISH LAYER
   Add this AFTER all existing CSS
========================================================== */


/* ==========================================================
   GLOBAL ATMOSPHERE
========================================================== */

:root {

  --dawn-bg:
    #030508;

  --dawn-navy:
    #06101c;

  --dawn-navy-2:
    #081525;

  --dawn-surface:
    rgba(12, 20, 31, .92);

  --dawn-surface-light:
    rgba(18, 30, 45, .78);

  --dawn-line:
    rgba(104, 191, 246, .13);

  --dawn-line-active:
    rgba(105, 200, 250, .3);

  --dawn-glow:
    rgba(73, 165, 230, .1);

  --dawn-blue:
    #70cfff;

  --dawn-cyan:
    #61e1ce;

}


body {

  background:
    #030508;

  background-image:
    radial-gradient(
      circle at 15% 8%,
      rgba(28, 78, 132, .08),
      transparent 25%
    ),

    radial-gradient(
      circle at 85% 32%,
      rgba(50, 92, 160, .06),
      transparent 26%
    );

}


/* slightly tighter overall content width */

.container {

  width:
    min(
      1420px,
      calc(100% - 86px)
    );

}


/* improve paragraph readability */

p {

  color:
    #95a5b7;

  font-size:
    15px;

  line-height:
    1.72;

}


/* ==========================================================
   SECTION RHYTHM
========================================================== */

.section {

  position:
    relative;

  overflow:
    hidden;

  padding:
    96px 0;

}


.section::before {

  content:
    "";

  position:
    absolute;

  width:
    520px;

  height:
    520px;

  border-radius:
    50%;

  pointer-events:
    none;

  filter:
    blur(100px);

  opacity:
    .5;

}


.system-section::before {

  right:
    -300px;

  top:
    -210px;

  background:
    rgba(35, 100, 155, .08);

}


.outreach-section::before {

  left:
    -300px;

  top:
    160px;

  background:
    rgba(57, 120, 180, .065);

}


.outcomes-section::before {

  right:
    -250px;

  top:
    100px;

  background:
    rgba(67, 98, 183, .065);

}


.industries-section::before {

  left:
    18%;

  top:
    -350px;

  background:
    rgba(53, 116, 173, .08);

}


.pricing-section::before {

  right:
    8%;

  top:
    0;

  background:
    rgba(93, 88, 210, .05);

}


/* subtle separators */

.section + .section {

  border-top:
    1px solid
    rgba(255, 255, 255, .025);

}


/* ==========================================================
   TYPOGRAPHY TUNING
========================================================== */

h2 {

  letter-spacing:
    -2.5px;

}


.section-label {

  position:
    relative;

  width:
    fit-content;

  padding-left:
    15px;

  color:
    #77cef9;

}


.section-label::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  transform:
    translateY(-50%);

  background:
    #5ee2cb;

  box-shadow:
    0 0 14px
    rgba(94, 226, 203, .35);

}


/* ==========================================================
   NAV — MORE PREMIUM / COMPACT
========================================================== */

.nav-shell {

  min-height:
    70px;

  background:
    linear-gradient(
      180deg,
      rgba(19, 34, 54, .92),
      rgba(12, 23, 39, .92)
    );

  border:
    1px solid
    rgba(129, 176, 224, .15);

  box-shadow:
    0 12px 40px
    rgba(0, 0, 0, .24);

}


.header.scrolled
.nav-shell {

  background:
    rgba(9, 17, 29, .97);

  border-color:
    rgba(110, 177, 226, .2);

}


.desktop-nav > a,
.nav-trigger {

  color:
    #c7d1dc;

}


.nav-cta {

  background:
    linear-gradient(
      135deg,
      #8bd8ff,
      #68bffd
    );

  box-shadow:
    0 8px 24px
    rgba(92, 191, 249, .18);

  transition:
    transform .22s ease,
    box-shadow .22s ease;

}


.nav-cta:hover {

  box-shadow:
    0 12px 32px
    rgba(92, 191, 249, .28);

}


/* ==========================================================
   HERO — REFERENCE-STYLE DEPTH
========================================================== */

.hero {

  min-height:
    820px;

  padding-top:
    160px;

  background:

    radial-gradient(
      circle at 8% 17%,
      rgba(22, 78, 142, .18),
      transparent 27%
    ),

    radial-gradient(
      circle at 83% 23%,
      rgba(54, 96, 167, .1),
      transparent 27%
    ),

    linear-gradient(
      180deg,
      #06101c 0%,
      #020407 65%,
      #030405 100%
    );

}


.hero-grid {

  opacity:
    .055;

  background-size:
    72px 72px;

}


.hero-copy h1 {

  max-width:
    720px;

}


.hero-description {

  max-width:
    610px;

}


.hero-proof {

  opacity:
    .85;

}


/* subtle hero divider glow */

.hero::after {

  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    0;

  width:
    85%;

  height:
    1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(98, 190, 244, .13),
      transparent
    );

}


/* ==========================================================
   HERO DASHBOARD — HIGHER-END PRODUCT FEEL
========================================================== */

.hero-dashboard-wrap {

  perspective:
    1500px;

  transition:
    transform .35s ease;

}


.dashboard-card {

  position:
    relative;

  isolation:
    isolate;

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(65, 130, 185, .08),
      transparent 25%
    ),

    linear-gradient(
      150deg,
      rgba(15, 25, 37, .98),
      rgba(7, 12, 18, .98)
    );

  border:
    1px solid
    rgba(118, 177, 221, .18);

  box-shadow:

    0 40px 100px
    rgba(0, 0, 0, .46),

    inset 0 1px 0
    rgba(255, 255, 255, .025);

  will-change:
    transform;

}


/* animated top edge */

.dashboard-card::before {

  content:
    "";

  position:
    absolute;

  z-index:
    5;

  top:
    -1px;

  left:
    10%;

  width:
    38%;

  height:
    1px;

  opacity:
    .85;

  background:
    linear-gradient(
      90deg,
      transparent,
      #65c9fa,
      transparent
    );

  animation:
    dashboardEdge
    5s ease-in-out infinite;

}


@keyframes dashboardEdge {

  0%,
  100% {

    left:
      3%;

    opacity:
      .2;

  }

  50% {

    left:
      55%;

    opacity:
      .85;

  }

}


/* internal layers gain depth when dashboard tilts */

.dashboard-head,
.dashboard-overview,
.activity-list,
.dashboard-metrics {

  position:
    relative;

  transform:
    translateZ(18px);

}


.dashboard-overview {

  transform:
    translateZ(28px);

}


.dashboard-metrics {

  transform:
    translateZ(35px);

}


.hero-dashboard-wrap:hover
.dashboard-card {

  border-color:
    rgba(108, 199, 248, .34);

  box-shadow:

    0 55px 125px
    rgba(0, 0, 0, .58),

    0 0 70px
    rgba(54, 152, 220, .07);

}


.dashboard-metrics > div {

  background:
    linear-gradient(
      145deg,
      rgba(19, 30, 44, .78),
      rgba(10, 16, 24, .8)
    );

}


.dashboard-metrics > div:hover {

  border-color:
    rgba(102, 198, 248, .22);

  background:
    rgba(22, 37, 52, .9);

}


.activity-row.active {

  border-radius:
    8px;

  background:

    linear-gradient(
      90deg,
      rgba(72, 178, 238, .08),
      rgba(72, 178, 238, .015)
    );

}


/* ==========================================================
   TRUST STRIP
========================================================== */

.trust-strip {

  position:
    relative;

  padding:
    28px 0 34px;

  background:

    radial-gradient(
      circle at 50% 120%,
      rgba(50, 112, 173, .08),
      transparent 35%
    ),

    #030506;

}


.marquee-track span {

  color:
    #b2bbc6;

  opacity:
    .75;

  transition:
    opacity .25s ease;

}


.marquee-track span:hover {

  opacity:
    1;

}


/* ==========================================================
   HOW DAWN WORKS
========================================================== */

.system-section {

  background:

    radial-gradient(
      circle at 80% 0%,
      rgba(42, 111, 168, .075),
      transparent 26%
    ),

    linear-gradient(
      180deg,
      #06101a,
      #04070b
    );

}


.system-card-grid {

  gap:
    13px;

}


.system-card {

  min-height:
    380px;

  border-radius:
    16px;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(81, 155, 205, .06),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      rgba(16, 27, 40, .95),
      rgba(8, 13, 20, .98)
    );

  border:
    1px solid
    rgba(128, 175, 215, .12);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .015);

}


.system-card:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(101, 198, 247, .3);

  box-shadow:
    0 25px 60px
    rgba(0, 0, 0, .3);

}


/* active moving edge */

.system-card::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    40%;

  height:
    1px;

  opacity:
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(115, 207, 255, .75),
      transparent
    );

  transition:
    opacity .3s ease;

}


.system-card:hover::after {

  opacity:
    1;

  animation:
    cardLine
    1.4s linear infinite;

}


@keyframes cardLine {

  from {
    transform:
      translateX(-100%);
  }

  to {
    transform:
      translateX(350%);
  }

}


/* ==========================================================
   MULTI-CHANNEL — MAKE IT FEEL LIKE A PRODUCT DEMO
========================================================== */

.outreach-section {

  background:

    radial-gradient(
      circle at 12% 20%,
      rgba(32, 85, 145, .075),
      transparent 26%
    ),

    radial-gradient(
      circle at 90% 65%,
      rgba(59, 109, 170, .05),
      transparent 25%
    ),

    linear-gradient(
      180deg,
      #030506,
      #07111b
    );

}


.channel-pills span {

  background:
    rgba(12, 24, 35, .58);

  border-color:
    rgba(107, 185, 229, .14);

}


.outreach-lab {

  border:
    1px solid
    rgba(111, 177, 221, .17);

  background:
    rgba(7, 12, 18, .95);

  box-shadow:
    0 40px 90px
    rgba(0, 0, 0, .34);

}


.outreach-nav {

  background:
    linear-gradient(
      180deg,
      #0d1722,
      #09121b
    );

}


.outreach-nav-item {

  position:
    relative;

  min-height:
    82px;

}


.outreach-nav-item::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    2px;

  height:
    0;

  transform:
    translateY(-50%);

  background:
    var(--blue);

  transition:
    height .3s ease;

}


.outreach-nav-item.active::before {

  height:
    58%;

}


.outreach-nav-item.active {

  background:

    linear-gradient(
      90deg,
      rgba(64, 161, 220, .1),
      transparent
    );

}


.outreach-stage {

  background:

    radial-gradient(
      circle at 82% 35%,
      rgba(51, 118, 177, .075),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      #0b151f,
      #080e15
    );

}


.demo-window {

  position:
    relative;

  border-color:
    rgba(113, 182, 228, .15);

  background:
    #05090e;

}


.demo-window::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(94, 151, 255, .035),
      transparent 45%
    );

}


.demo-top {

  background:
    #121b27;

}


.voice-wave {

  position:
    relative;

}


.voice-wave::before {

  content:
    "";

  position:
    absolute;

  width:
    120px;

  height:
    120px;

  border-radius:
    50%;

  border:
    1px solid
    rgba(108, 201, 249, .08);

  animation:
    audioRing
    2.4s ease-in-out infinite;

}


@keyframes audioRing {

  50% {

    transform:
      scale(1.18);

    opacity:
      .25;

  }

}


/* ==========================================================
   BUSINESS OUTCOMES
========================================================== */

.outcomes-section {

  background:

    radial-gradient(
      circle at 10% 20%,
      rgba(36, 87, 146, .08),
      transparent 26%
    ),

    linear-gradient(
      180deg,
      #07111b,
      #04070b
    );

}


.outcomes-grid {

  gap:
    13px;

}


.outcome-card {

  border-radius:
    15px;

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(79, 143, 198, .05),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      rgba(16, 28, 42, .96),
      rgba(8, 14, 21, .98)
    );

  border-color:
    rgba(121, 175, 218, .13);

}


.outcome-card:hover {

  transform:
    translateY(-6px);

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(86, 160, 212, .08),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #122032,
      #091019
    );

}


.outcome-featured {

  background:

    radial-gradient(
      circle at 80% 18%,
      rgba(72, 151, 210, .12),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      #142335,
      #091019
    );

}


/* ==========================================================
   INDUSTRIES — MORE LIKE AN INTERFACE
========================================================== */

.industries-section {

  background:

    radial-gradient(
      circle at 15% 15%,
      rgba(35, 93, 154, .07),
      transparent 25%
    ),

    linear-gradient(
      180deg,
      #07101a,
      #091420
    );

}


.industry-browser {

  min-height:
    585px;

  border-radius:
    18px;

  border-color:
    rgba(111, 177, 222, .16);

  background:
    rgba(8, 15, 23, .94);

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, .25);

}


.industry-list {

  background:
    linear-gradient(
      180deg,
      #0b151f,
      #09121a
    );

}


.industry-option {

  min-height:
    91px;

  transition:
    background .25s ease,
    color .25s ease,
    padding-left .25s ease;

}


.industry-option:hover,
.industry-option.active {

  padding-left:
    25px;

}


.industry-option.active {

  background:
    linear-gradient(
      90deg,
      rgba(79, 166, 223, .11),
      transparent
    );

}


.industry-detail {

  position:
    relative;

  background:

    radial-gradient(
      circle at 45% 50%,
      rgba(76, 160, 216, .09),
      transparent 33%
    ),

    linear-gradient(
      145deg,
      #0d1925,
      #0a131c
    );

}


.industry-detail::after {

  content:
    "";

  position:
    absolute;

  width:
    270px;

  height:
    270px;

  right:
    -70px;

  top:
    -60px;

  border-radius:
    50%;

  border:
    1px solid
    rgba(108, 196, 245, .05);

}


/* ==========================================================
   PRICING PANEL
========================================================== */

.pricing-section {

  background:

    radial-gradient(
      circle at 50% 30%,
      rgba(66, 101, 180, .065),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #060b11,
      #07101b
    );

}


.pricing-panel {

  border-radius:
    20px;

  background:

    radial-gradient(
      circle at 90% 50%,
      rgba(82, 115, 215, .06),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      #142033,
      #0b1420
    );

  box-shadow:
    0 35px 90px
    rgba(0, 0, 0, .26);

}


.pricing-summary {

  background:
    rgba(6, 11, 18, .1);

}


.pricing-feature-grid > div {

  min-height:
    36px;

}


/* ==========================================================
   FAQ — DENSE / PREMIUM
========================================================== */

.faq-section {

  position:
    relative;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(64, 83, 184, .08),
      transparent 26%
    ),

    linear-gradient(
      180deg,
      #05070b,
      #07101f
    );

}


.faq-list {

  max-width:
    970px;

}


.faq-item {

  border-radius:
    13px;

  border:
    1px solid
    rgba(133, 147, 225, .15);

  background:
    linear-gradient(
      180deg,
      #181b37,
      #161a33
    );

}


.faq-item:hover {

  border-color:
    rgba(115, 157, 239, .27);

}


.faq-item.active {

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(55, 102, 220, .08),
      transparent 25%
    ),

    #181d3d;

}


/* ==========================================================
   CTA — CLEANER REFERENCE-LIKE CONVERSION BLOCK
========================================================== */

.cta-section {

  background:
    #07101f;

}


.cta-panel {

  position:
    relative;

  min-height:
    365px;

  border-radius:
    20px;

  background:

    radial-gradient(
      circle at 85% 30%,
      rgba(255, 255, 255, .28),
      transparent 20%
    ),

    linear-gradient(
      135deg,
      #c9ddff,
      #b8d4fb
    );

  box-shadow:
    0 35px 90px
    rgba(0, 0, 0, .2);

}


.cta-panel::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    .18;

  background-image:
    radial-gradient(
      circle,
      #2e5883 1px,
      transparent 1px
    );

  background-size:
    26px 26px;

  mask-image:
    linear-gradient(
      90deg,
      transparent 50%,
      black
    );

}


.cta-screen {

  animation:
    ctaScreenFloat
    5s ease-in-out infinite;

}


@keyframes ctaScreenFloat {

  50% {

    transform:
      translate(-50%, calc(-50% - 7px));

  }

}


/* ==========================================================
   FOOTER — MUCH STRONGER
========================================================== */

.footer {

  padding-top:
    70px;

  background:

    radial-gradient(
      circle at 10% 0%,
      rgba(33, 93, 146, .075),
      transparent 25%
    ),

    linear-gradient(
      180deg,
      #0a131d,
      #060a0f
    );

}


.footer-top {

  gap:
    80px;

}


.footer-brand p {

  font-size:
    14px;

  line-height:
    1.7;

}


.footer-column h4 {

  font-size:
    13px;

  margin-bottom:
    20px;

}


.footer-column a {

  font-size:
    12px;

  margin-bottom:
    13px;

}


.footer-contact a,
.footer-contact strong {

  font-size:
    13px;

}


.footer-bottom p,
.footer-bottom a {

  font-size:
    11px;

}


/* ==========================================================
   REVEAL — MORE POLISHED SEQUENCES
========================================================== */

.reveal {

  transform:
    translateY(30px);

  opacity:
    0;

  filter:
    blur(5px);

  transition:

    opacity .78s
    cubic-bezier(.22,.7,.22,1),

    transform .78s
    cubic-bezier(.22,.7,.22,1),

    filter .78s ease;

}


.reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);

  filter:
    blur(0);

}


.reveal-scale {

  transform:
    translateY(30px)
    scale(.965);

  opacity:
    0;

  filter:
    blur(5px);

  transition:

    opacity .9s
    cubic-bezier(.22,.7,.22,1),

    transform .9s
    cubic-bezier(.22,.7,.22,1),

    filter .9s ease;

}


.reveal-scale.visible {

  opacity:
    1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0);

}


/* stagger grid entrances */

.system-card-grid
.system-card:nth-child(2),

.outcomes-grid
.outcome-card:nth-child(2) {

  transition-delay:
    .08s;

}


.system-card-grid
.system-card:nth-child(3),

.outcomes-grid
.outcome-card:nth-child(3) {

  transition-delay:
    .16s;

}


.system-card-grid
.system-card:nth-child(4),

.outcomes-grid
.outcome-card:nth-child(4) {

  transition-delay:
    .24s;

}


/* ==========================================================
   RESPONSIVE POLISH
========================================================== */

@media(max-width: 1180px) {

  .container {

    width:
      calc(100% - 48px);

  }

}


@media(max-width: 820px) {

  .section {

    padding:
      78px 0;

  }


  .hero {

    padding-top:
      135px;

  }

}


@media(max-width: 560px) {

  .container {

    width:
      calc(100% - 28px);

  }


  .section {

    padding:
      68px 0;

  }


  .dashboard-card {

    padding:
      20px;

  }


  .industry-option:hover,
  .industry-option.active {

    padding-left:
      20px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}
/* ==========================================================
   HERO TYPEWRITER
========================================================== */

#heroWord {

  position: relative;

  display: inline;

  min-width: 1px;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #69c8fa,
      #8e91ff
    );

  -webkit-background-clip: text;
  background-clip: text;
}


#heroWord::after {

  content: "";

  display: inline-block;

  width: 3px;
  height: .86em;

  margin-left: 7px;

  vertical-align: -.08em;

  border-radius: 4px;

  background: #77cfff;

  box-shadow:
    0 0 12px
    rgba(105, 200, 250, .45);

  animation:
    heroCursorBlink
    .72s steps(1)
    infinite;
}


@keyframes heroCursorBlink {

  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

/* ==========================================================
   PRICING — COMPETITOR-INSPIRED PREMIUM LAYOUT
========================================================== */

.pricing-section {

  background:

    radial-gradient(
      circle at 50% 10%,
      rgba(76, 96, 205, .09),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #07101f,
      #060a12
    );

}


.pricing-heading {

  max-width:
    900px;

  margin:
    0 auto 55px;

  text-align:
    center;

}


.pricing-heading p {

  max-width:
    640px;

  margin:
    18px auto 0;

  font-size:
    15px;

}


.competitor-style-pricing {

  display:
    grid;

  grid-template-columns:
    .68fr 1.32fr;

  min-height:
    520px;

  overflow:
    hidden;

  border-radius:
    22px;

  border:
    1px solid
    rgba(105, 168, 224, .2);

  background:

    radial-gradient(
      circle at 78% 30%,
      rgba(86, 101, 210, .08),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      #131e34,
      #0d1629
    );

  box-shadow:
    0 38px 90px
    rgba(0, 0, 0, .3);

}


/* LEFT SIDE */

.competitor-price-side {

  padding:
    56px 52px;

  display:
    flex;

  flex-direction:
    column;

  border-right:
    1px solid
    rgba(145, 169, 208, .14);

  background:
    linear-gradient(
      145deg,
      rgba(24, 35, 61, .72),
      rgba(17, 27, 49, .72)
    );

}


.competitor-price-side
.pricing-badge {

  width:
    fit-content;

  padding:
    9px 14px;

  border-radius:
    100px;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      #806bf6,
      #4e95ff
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1px;

}


.competitor-price-side h3 {

  margin-top:
    36px;

  font-size:
    36px;

  line-height:
    1.1;

}


.pricing-subcopy {

  max-width:
    340px;

  margin-top:
    10px;

  color:
    #a4b3c9;

  font-size:
    14px;

  line-height:
    1.65;

}


.competitor-price-side
.pricing-value {

  margin-top:
    48px;

}


.competitor-price-side
.pricing-value small {

  color:
    #8c9bb2;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .8px;

}


.competitor-price-side
.pricing-value > div {

  display:
    flex;

  align-items:
    baseline;

  gap:
    9px;

  margin-top:
    8px;

}


.competitor-price-side
.pricing-value strong {

  font-size:
    58px;

  line-height:
    1;

  letter-spacing:
    -3px;

  color:
    transparent;

  background:
    linear-gradient(
      90deg,
      #63bfff,
      #8d86ff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}


.competitor-price-side
.pricing-value span {

  color:
    #8ea0ba;

  font-size:
    14px;

}


.competitor-price-side
.pricing-note {

  max-width:
    360px;

  margin-top:
    22px;

  color:
    #8595aa;

  font-size:
    12px;

  line-height:
    1.7;

}


.pricing-assurance {

  margin-top:
    auto;

  padding-top:
    38px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  color:
    #a3b2c9;

  font-size:
    12px;

  line-height:
    1.55;

}


.pricing-assurance svg {

  width:
    18px;

  height:
    18px;

  flex:
    0 0 18px;

  color:
    #86a8d2;

}


/* RIGHT SIDE */

.competitor-features-side {

  padding:
    56px 55px;

  display:
    flex;

  flex-direction:
    column;

}


.competitor-features-side
.pricing-feature-label {

  color:
    #a38dff;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    2px;

}


.competitor-features-side
.pricing-feature-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    26px 38px;

  margin-top:
    34px;

}


.pricing-feature-item {

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  gap:
    12px;

  align-items:
    flex-start;

}


.feature-check {

  width:
    26px;

  height:
    26px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 26px;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #646bff,
      #7b8dff
    );

  color:
    white;

  box-shadow:
    0 5px 15px
    rgba(95, 99, 255, .18);

}


.feature-check svg {

  width:
    13px;

  height:
    13px;

  stroke-width:
    2.5;

}


.pricing-feature-item strong {

  display:
    block;

  color:
    #edf2f8;

  font-size:
    14px;

  font-weight:
    600;

}


.pricing-feature-item small {

  display:
    block;

  margin-top:
    4px;

  color:
    #7f90a6;

  font-size:
    11px;

  line-height:
    1.45;

}


.pricing-main-cta {

  width:
    min(
      330px,
      100%
    );

  min-height:
    58px;

  margin-top:
    auto;

  align-self:
    flex-start;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border-radius:
    10px;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      #785df5,
      #4797ff
    );

  font-size:
    15px;

  font-weight:
    800;

  box-shadow:
    0 14px 32px
    rgba(83, 103, 255, .18);

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.pricing-main-cta:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 40px
    rgba(83, 103, 255, .26);

}


.pricing-main-cta svg {

  width:
    17px;

  height:
    17px;

}


/* subtle entrance */

.competitor-style-pricing.visible
.pricing-feature-item {

  animation:
    pricingFeatureIn
    .65s ease both;

}


.competitor-style-pricing.visible
.pricing-feature-item:nth-child(2) {

  animation-delay:
    .05s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(3) {

  animation-delay:
    .1s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(4) {

  animation-delay:
    .15s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(5) {

  animation-delay:
    .2s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(6) {

  animation-delay:
    .25s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(7) {

  animation-delay:
    .3s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(8) {

  animation-delay:
    .35s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(9) {

  animation-delay:
    .4s;

}

.competitor-style-pricing.visible
.pricing-feature-item:nth-child(10) {

  animation-delay:
    .45s;

}


@keyframes pricingFeatureIn {

  from {

    opacity:
      0;

    transform:
      translateY(12px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* RESPONSIVE */

@media(max-width: 980px) {

  .competitor-style-pricing {

    grid-template-columns:
      1fr;

  }


  .competitor-price-side {

    border-right:
      0;

    border-bottom:
      1px solid
      rgba(145, 169, 208, .14);

  }


  .pricing-assurance {

    margin-top:
      35px;

  }


  .pricing-main-cta {

    margin-top:
      40px;

  }

}


@media(max-width: 620px) {

  .competitor-price-side,
  .competitor-features-side {

    padding:
      32px 23px;

  }


  .competitor-price-side h3 {

    font-size:
      30px;

  }


  .competitor-price-side
  .pricing-value strong {

    font-size:
      48px;

  }


  .competitor-features-side
  .pricing-feature-grid {

    grid-template-columns:
      1fr;

    gap:
      20px;

  }


  .pricing-main-cta {

    width:
      100%;

  }

}
/* ==========================================================
   FIX CENTERED SECTION LABELS
   Pricing + FAQ
========================================================== */

.pricing-heading,
.faq-heading {
  text-align: center;
}

.pricing-heading .section-label,
.faq-heading .section-label {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  text-align: center;
}


/* keep dot aligned correctly */
.pricing-heading .section-label::before,
.faq-heading .section-label::before {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* tighter spacing between label and heading */
.pricing-heading .section-label,
.faq-heading .section-label {
  margin-bottom: 14px;
}


/* pricing heading spacing */
.pricing-heading {
  max-width: 980px;
  margin: 0 auto 54px;
}

.pricing-heading h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}


/* FAQ heading spacing */
.faq-heading {
  max-width: 900px;
  margin: 0 auto 44px;
}

.faq-heading h2 {
  margin-left: auto;
  margin-right: auto;
}


/* keep subtext centered and readable */
.pricing-heading p,
.faq-heading p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pricing-heading p {
  max-width: 650px;
}

.faq-heading p {
  max-width: 680px;
}
/* ==========================================================
   INDUSTRIES — PREMIUM CARD GRID
========================================================== */

.industries-section {

  position: relative;

  background:

    radial-gradient(
      circle at 18% 10%,
      rgba(36, 91, 148, .09),
      transparent 28%
    ),

    radial-gradient(
      circle at 85% 75%,
      rgba(62, 102, 183, .055),
      transparent 27%
    ),

    linear-gradient(
      180deg,
      #07101a,
      #09131e
    );

}


.industries-header-centered {

  max-width: 840px;

  margin:
    0 auto 46px;

  text-align: center;

}


.industries-header-centered
.section-label {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  width: fit-content;

  margin:
    0 auto 14px;

  padding-left: 0;

}


.industries-header-centered
.section-label::before {

  position: static;

  width: 7px;

  height: 7px;

  flex: 0 0 7px;

  transform: none;

}


.industries-header-centered h2 {

  max-width: 780px;

  margin:
    0 auto;

}


.industries-header-centered p {

  max-width: 600px;

  margin:
    18px auto 0;

  font-size: 15px;

}


/* GRID */

.industry-card-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;

}


.industry-card-new {

  position: relative;

  min-height: 240px;

  padding: 24px;

  overflow: hidden;

  border-radius: 17px;

  border:
    1px solid
    rgba(119, 175, 217, .13);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(83, 156, 212, .05),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #111c29,
      #0a121b
    );

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;

}


.industry-card-new::before {

  content: "";

  position: absolute;

  width: 150px;

  height: 150px;

  right: -80px;

  bottom: -85px;

  border-radius: 50%;

  background:
    rgba(105, 200, 250, .05);

  filter:
    blur(28px);

  transition:
    transform .4s ease,
    opacity .4s ease;

}


.industry-card-new::after {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      #65cafa,
      #8c8cff
    );

  transition:
    width .4s ease;

}


.industry-card-new:hover {

  transform:
    translateY(-7px);

  border-color:
    rgba(105, 200, 250, .32);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(83, 156, 212, .09),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      #142232,
      #0b141e
    );

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.28);

}


.industry-card-new:hover::after {

  width: 100%;

}


.industry-card-new:hover::before {

  transform:
    scale(1.4);

}


/* TOP ROW */

.industry-card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.industry-card-icon {

  width: 46px;

  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  border:
    1px solid
    rgba(105,200,250,.13);

  background:
    rgba(105,200,250,.045);

  color:
    var(--blue);

  transition:
    transform .3s ease,
    background .3s ease;

}


.industry-card-new:hover
.industry-card-icon {

  transform:
    translateY(-3px)
    rotate(-4deg);

  background:
    rgba(105,200,250,.09);

}


.industry-card-icon svg {

  width: 19px;

  height: 19px;

}


.industry-index {

  color:
    #526477;

  font-size: 9px;

  letter-spacing: .7px;

}


/* CONTENT */

.industry-card-new h3 {

  margin-top: 35px;

  font-size: 19px;

  line-height: 1.2;

}


.industry-card-new p {

  max-width: 260px;

  margin-top: 9px;

  color:
    #8e9eaf;

  font-size: 13px;

  line-height: 1.55;

}


.industry-card-new a {

  position: absolute;

  left: 24px;

  bottom: 22px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    #72cbfb;

  font-size: 11px;

  font-weight: 700;

  opacity: .75;

  transition:
    opacity .25s ease,
    gap .25s ease;

}


.industry-card-new:hover a {

  opacity: 1;

  gap: 10px;

}


.industry-card-new a svg {

  width: 13px;

  height: 13px;

}


/* staggered entrance */

.industry-card-grid
.industry-card-new:nth-child(2) {
  transition-delay: .04s;
}

.industry-card-grid
.industry-card-new:nth-child(3) {
  transition-delay: .08s;
}

.industry-card-grid
.industry-card-new:nth-child(4) {
  transition-delay: .12s;
}

.industry-card-grid
.industry-card-new:nth-child(6) {
  transition-delay: .04s;
}

.industry-card-grid
.industry-card-new:nth-child(7) {
  transition-delay: .08s;
}

.industry-card-grid
.industry-card-new:nth-child(8) {
  transition-delay: .12s;
}


/* RESPONSIVE */

@media(max-width: 1100px) {

  .industry-card-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }

}


@media(max-width: 760px) {

  .industry-card-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media(max-width: 520px) {

  .industry-card-grid {

    grid-template-columns:
      1fr;

  }


  .industry-card-new {

    min-height:
      220px;

  }

}
/* ==========================================================
   INDUSTRIES — PREMIUM SPLIT PANEL
========================================================== */

.industries-section {

  position:
    relative;

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 13% 18%,
      rgba(39, 91, 151, .09),
      transparent 29%
    ),

    radial-gradient(
      circle at 89% 72%,
      rgba(64, 83, 181, .055),
      transparent 27%
    ),

    linear-gradient(
      180deg,
      #07101b 0%,
      #08121e 100%
    );

}


/* background atmospheric glow */

.industries-section::after {

  content:
    "";

  position:
    absolute;

  width:
    600px;

  height:
    600px;

  right:
    -300px;

  top:
    180px;

  border-radius:
    50%;

  background:
    rgba(72, 146, 202, .055);

  filter:
    blur(110px);

  pointer-events:
    none;

}


/* ==========================================================
   HEADING
========================================================== */

.industries-heading-new {

  position:
    relative;

  z-index:
    2;

  max-width:
    850px;

  margin:
    0 auto 50px;

  text-align:
    center;

}


.industries-heading-new
.section-label {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  width:
    fit-content;

  margin:
    0 auto 14px;

  padding-left:
    0;

}


.industries-heading-new
.section-label::before {

  position:
    static;

  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  transform:
    none;

}


.industries-heading-new h2 {

  max-width:
    800px;

  margin:
    auto;

}


.industries-heading-new p {

  max-width:
    650px;

  margin:
    18px auto 0;

  font-size:
    15px;

  line-height:
    1.7;

}


/* ==========================================================
   MAIN PANEL
========================================================== */

.industries-premium-panel {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    .72fr 1.28fr;

  min-height:
    640px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(113, 169, 218, .17);

  border-radius:
    21px;

  background:

    radial-gradient(
      circle at 85% 12%,
      rgba(79, 105, 205, .065),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #132034,
      #0c1725
    );

  box-shadow:
    0 38px 95px
    rgba(0,0,0,.27);

}


/* top highlight line */

.industries-premium-panel::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    18%;

  width:
    38%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(107,202,251,.55),
      transparent
    );

}


/* ==========================================================
   LEFT SIDE
========================================================== */

.industries-intro {

  padding:
    52px;

  display:
    flex;

  flex-direction:
    column;

  border-right:
    1px solid
    rgba(145,169,208,.13);

  background:

    radial-gradient(
      circle at 10% 0%,
      rgba(84,145,204,.07),
      transparent 30%
    ),

    rgba(8,15,25,.18);

}


.industry-intro-badge {

  width:
    fit-content;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(105,200,250,.16);

  border-radius:
    100px;

  color:
    #78d0fa;

  background:
    rgba(105,200,250,.05);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.3px;

}


.industries-intro h3 {

  max-width:
    430px;

  margin-top:
    32px;

  font-size:
    35px;

  line-height:
    1.1;

  letter-spacing:
    -1.6px;

}


.industries-intro h3 span {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--blue);

}


.industries-intro > p {

  max-width:
    430px;

  margin-top:
    17px;

  color:
    #95a6b9;

  font-size:
    14px;

  line-height:
    1.75;

}


/* HOW IT ADAPTS */

.industry-method {

  margin-top:
    34px;

  display:
    grid;

  gap:
    4px;

}


.industry-method > div {

  position:
    relative;

  padding:
    15px 15px 15px 49px;

  border-radius:
    10px;

  transition:
    background .25s ease,
    transform .25s ease;

}


.industry-method > div:hover {

  transform:
    translateX(5px);

  background:
    rgba(105,200,250,.035);

}


.industry-method > div > span {

  position:
    absolute;

  left:
    15px;

  top:
    17px;

  color:
    #58c7fa;

  font-size:
    9px;

  font-weight:
    700;

}


.industry-method strong {

  display:
    block;

  color:
    #e8eef4;

  font-size:
    13px;

}


.industry-method small {

  display:
    block;

  margin-top:
    4px;

  color:
    #718397;

  font-size:
    11px;

  line-height:
    1.45;

}


.industry-discuss-link {

  width:
    fit-content;

  margin-top:
    auto;

  padding-top:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--blue);

  font-size:
    12px;

  font-weight:
    700;

}


.industry-discuss-link svg {

  width:
    14px;

  height:
    14px;

  transition:
    transform .25s ease;

}


.industry-discuss-link:hover svg {

  transform:
    translate(3px,-3px);

}


/* ==========================================================
   RIGHT
========================================================== */

.industries-list-area {

  padding:
    52px;

}


.industries-list-label {

  display:
    block;

  color:
    #a58dff;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.8px;

}


/* ==========================================================
   TOP INDUSTRIES GRID
========================================================== */

.top-industries-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    11px;

  margin-top:
    25px;

}


.top-industry-card {

  position:
    relative;

  min-height:
    116px;

  padding:
    18px;

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  gap:
    13px;

  align-items:
    start;

  overflow:
    hidden;

  border:
    1px solid
    rgba(131,174,211,.1);

  border-radius:
    13px;

  background:
    rgba(7,14,22,.27);

  transition:
    transform .28s ease,
    background .28s ease,
    border-color .28s ease;

}


.top-industry-card::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    0;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      #63ccfb,
      #8288ff
    );

  transition:
    width .35s ease;

}


.top-industry-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(105,200,250,.25);

  background:
    rgba(17,32,47,.68);

}


.top-industry-card:hover::before {

  width:
    100%;

}


.top-industry-icon {

  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  border:
    1px solid
    rgba(105,200,250,.12);

  background:
    rgba(105,200,250,.055);

  color:
    #69ccfb;

  transition:
    transform .28s ease;

}


.top-industry-card:hover
.top-industry-icon {

  transform:
    translateY(-2px)
    rotate(-4deg);

}


.top-industry-icon svg {

  width:
    16px;

  height:
    16px;

}


.top-industry-card h4 {

  padding-right:
    30px;

  color:
    #edf2f7;

  font-size:
    14px;

  line-height:
    1.25;

}


.top-industry-card p {

  margin-top:
    6px;

  color:
    #7f91a5;

  font-size:
    11px;

  line-height:
    1.45;

}


.industry-card-number {

  position:
    absolute;

  right:
    14px;

  top:
    15px;

  color:
    #536679;

  font-size:
    8px;

}


/* ==========================================================
   MORE INDUSTRIES
========================================================== */

.more-industries {

  margin-top:
    17px;

  padding:
    20px;

  border:
    1px solid
    rgba(113,169,218,.11);

  border-radius:
    13px;

  background:

    linear-gradient(
      90deg,
      rgba(104,199,248,.045),
      rgba(107,105,245,.025)
    );

}


.more-industries-heading {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.more-icon {

  width:
    37px;

  height:
    37px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 37px;

  border-radius:
    10px;

  background:
    rgba(105,200,250,.07);

  color:
    #6dcdf9;

}


.more-icon svg {

  width:
    16px;

  height:
    16px;

}


.more-industries-heading strong {

  display:
    block;

  font-size:
    13px;

}


.more-industries-heading small {

  display:
    block;

  margin-top:
    3px;

  color:
    #77899d;

  font-size:
    10px;

}


.more-industry-tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    17px;

}


.more-industry-tags span {

  padding:
    7px 10px;

  border:
    1px solid
    rgba(114,178,220,.11);

  border-radius:
    100px;

  color:
    #93a3b5;

  background:
    rgba(7,14,22,.25);

  font-size:
    9px;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;

}


.more-industry-tags span:hover {

  color:
    #d9e8f2;

  border-color:
    rgba(105,200,250,.24);

  background:
    rgba(105,200,250,.05);

}


/* ==========================================================
   CARD ENTRANCE ANIMATION
========================================================== */

.industries-premium-panel.visible
.top-industry-card {

  animation:
    industryCardEnter
    .6s ease both;

}


.industries-premium-panel.visible
.top-industry-card:nth-child(2) {
  animation-delay: .05s;
}

.industries-premium-panel.visible
.top-industry-card:nth-child(3) {
  animation-delay: .1s;
}

.industries-premium-panel.visible
.top-industry-card:nth-child(4) {
  animation-delay: .15s;
}

.industries-premium-panel.visible
.top-industry-card:nth-child(5) {
  animation-delay: .2s;
}

.industries-premium-panel.visible
.top-industry-card:nth-child(6) {
  animation-delay: .25s;
}

.industries-premium-panel.visible
.top-industry-card:nth-child(7) {
  animation-delay: .3s;
}

.industries-premium-panel.visible
.top-industry-card:nth-child(8) {
  animation-delay: .35s;
}


@keyframes industryCardEnter {

  from {

    opacity:
      0;

    transform:
      translateY(15px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width: 1050px) {

  .industries-premium-panel {

    grid-template-columns:
      1fr;

  }


  .industries-intro {

    border-right:
      0;

    border-bottom:
      1px solid
      rgba(145,169,208,.13);

  }


  .industry-discuss-link {

    margin-top:
      25px;

  }

}


@media(max-width: 680px) {

  .industries-intro,
  .industries-list-area {

    padding:
      30px 22px;

  }


  .industries-intro h3 {

    font-size:
      29px;

  }


  .top-industries-grid {

    grid-template-columns:
      1fr;

  }


  .top-industry-card {

    min-height:
      105px;

  }

}
/* ==========================================================
   BUSINESS OUTCOMES
   COMPETITOR-STYLE PROOF SECTION
========================================================== */

.proof-section {

  position: relative;
  overflow: hidden;

  padding:
    105px 0;

  background:

    radial-gradient(
      circle at 5% 15%,
      rgba(24, 59, 139, .15),
      transparent 32%
    ),

    radial-gradient(
      circle at 94% 15%,
      rgba(49, 80, 178, .08),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #071020 0%,
      #030507 100%
    );
}


.proof-section::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(100,170,255,.12),
      transparent
    );
}



.proof-layout {

  display: grid;

  grid-template-columns:
    1.08fr .92fr;

  gap:
    72px;

  align-items:
    center;
}



/* ==========================================================
   LEFT CARDS
========================================================== */

.proof-cards {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    16px;
}


.proof-card {

  position: relative;

  overflow: hidden;

  border-radius:
    19px;

  border:
    1px solid
    rgba(119, 151, 210, .18);

  background:

    linear-gradient(
      145deg,
      rgba(18, 26, 49, .98),
      rgba(12, 17, 34, .98)
    );

  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,.018),

    0 20px 55px
    rgba(0,0,0,.15);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.proof-card:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(92, 151, 255, .35);

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.28);
}


.proof-card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  opacity: .55;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(112,150,255,.42),
      transparent
    );
}


/* LARGE */

.proof-card-large {

  grid-column:
    1 / -1;

  min-height:
    310px;

  padding:
    34px 36px;

  background:

    radial-gradient(
      circle at 92% 20%,
      rgba(77, 93, 198, .11),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      #151c38,
      #0d1328
    );
}


/* SMALL */

.proof-card-small {

  min-height:
    315px;

  padding:
    28px;
}


/* ==========================================================
   CARD TYPOGRAPHY
========================================================== */

.proof-card-kicker {

  color:
    #72a9ff;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.5px;
}


.proof-card h3 {

  max-width:
    580px;

  margin-top:
    18px;

  color:
    #f3f6fb;

  font-size:
    27px;

  line-height:
    1.15;

  letter-spacing:
    -1.1px;
}


.proof-card-large h3 {

  font-size:
    31px;
}


.proof-card-small h3 {

  margin-top:
    10px;

  font-size:
    22px;
}


.proof-divider {

  width: 100%;
  height: 1px;

  margin:
    21px 0;

  background:
    rgba(148,162,198,.17);
}


.proof-card p {

  max-width:
    580px;

  color:
    #8ea0be;

  font-size:
    13px;

  line-height:
    1.65;
}



/* ==========================================================
   RESULTS
========================================================== */

.proof-highlight-number {

  margin-top:
    22px;

  color:
    #f5f7fb;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    39px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -2px;
}


.proof-metrics {

  display: flex;

  gap:
    45px;

  margin-top:
    25px;
}


.proof-metrics > div {

  min-width:
    125px;
}


.proof-metrics strong {

  display: block;

  color:
    transparent;

  background:
    linear-gradient(
      90deg,
      #69c8fa,
      #818aff
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    34px;

  font-weight:
    800;

  line-height:
    1;
}


.proof-metrics span {

  display: block;

  margin-top:
    5px;

  color:
    #7e90ae;

  font-size:
    10px;
}



/* ==========================================================
   CARD LINK
========================================================== */

.proof-link {

  width:
    fit-content;

  margin-top:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #5d93ff;

  font-size:
    12px;

  font-weight:
    700;
}


.proof-card-small
.proof-link {

  position: absolute;

  bottom: 27px;
  left: 28px;
}


.proof-link svg {

  width:
    13px;

  height:
    13px;

  transition:
    transform .2s ease;
}


.proof-link:hover svg {

  transform:
    translateX(4px);
}



/* ==========================================================
   RIGHT SIDE
========================================================== */

.proof-message {

  max-width:
    590px;

  padding-left:
    10px;
}


.proof-pill {

  width:
    fit-content;

  padding:
    9px 14px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid
    rgba(84, 131, 255, .35);

  border-radius:
    100px;

  color:
    #9685ff;

  background:
    rgba(62,70,200,.05);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .2px;
}


.proof-pill i {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #4be0bd;

  box-shadow:
    0 0 13px
    rgba(75,224,189,.32);
}


/* LARGE RIGHT HEADING */

.proof-message h2 {

  max-width:
    600px;

  margin-top:
    28px;

  color:
    #f7f8fb;

  font-size:
    clamp(
      46px,
      4.7vw,
      66px
    );

  line-height:
    1.1;

  letter-spacing:
    -3.2px;
}


.proof-message h2 span {

  display:
    block;

  color:
    #f7f8fb;
}


.proof-message-line {

  width:
    100%;

  height:
    1px;

  margin:
    29px 0 26px;

  background:
    linear-gradient(
      90deg,
      rgba(149,162,198,.3),
      transparent
    );
}


.proof-message > p {

  max-width:
    560px;

  color:
    #7697df;

  font-size:
    18px;

  line-height:
    1.65;
}



/* ==========================================================
   CTA
========================================================== */

.proof-main-cta {

  min-height:
    55px;

  margin-top:
    28px;

  padding:
    0 23px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  border-radius:
    10px;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      #4385ff,
      #2e71f1
    );

  font-size:
    13px;

  font-weight:
    800;

  box-shadow:
    0 12px 30px
    rgba(47,105,230,.17);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.proof-main-cta:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 17px 37px
    rgba(47,105,230,.28);
}


.proof-main-cta svg {

  width:
    15px;

  height:
    15px;
}


.proof-note {

  display:
    block;

  margin-top:
    13px;

  color:
    #53637d;

  font-size:
    9px;
}



/* ==========================================================
   ANIMATION
========================================================== */

.proof-cards
.proof-card:nth-child(2) {

  transition-delay:
    .08s;
}


.proof-cards
.proof-card:nth-child(3) {

  transition-delay:
    .16s;
}


.proof-card:hover
.proof-highlight-number,

.proof-card:hover
.proof-metrics strong {

  filter:
    drop-shadow(
      0 0 12px
      rgba(94,139,255,.15)
    );
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width: 1050px) {

  .proof-layout {

    grid-template-columns:
      1fr;

  }


  .proof-message {

    max-width:
      760px;

    padding-left:
      0;

  }

}


@media(max-width: 650px) {

  .proof-section {

    padding:
      75px 0;

  }


  .proof-cards {

    grid-template-columns:
      1fr;

  }


  .proof-card-large {

    grid-column:
      auto;

  }


  .proof-card-large,
  .proof-card-small {

    min-height:
      300px;

    padding:
      25px;

  }


  .proof-card-small
  .proof-link {

    left:
      25px;

    bottom:
      24px;

  }


  .proof-card-large h3 {

    font-size:
      26px;

  }


  .proof-message h2 {

    font-size:
      42px;

    letter-spacing:
      -2px;

  }


  .proof-message > p {

    font-size:
      16px;

  }


  .proof-metrics {

    gap:
      22px;

  }

}
/* ==========================================================
   MULTI-CHANNEL OUTREACH
   HIGH-VISIBILITY VERSION
   Matches the stronger Pricing section visual language
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.outreach-section-v2 {

  position: relative;
  overflow: hidden;

  background:

    radial-gradient(
      circle at 20% 10%,
      rgba(63, 115, 211, .13),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 65%,
      rgba(69, 183, 232, .08),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #07101e 0%,
      #080f1b 100%
    );
}


/* atmospheric light */

.outreach-section-v2::after {

  content: "";

  position: absolute;

  width: 620px;
  height: 620px;

  right: -320px;
  top: 220px;

  border-radius: 50%;

  background:
    rgba(70, 111, 225, .09);

  filter: blur(120px);

  pointer-events: none;
}


/* ==========================================================
   HEADER
========================================================== */

.outreach-heading-v2 {

  position: relative;
  z-index: 2;

  max-width: 850px;

  margin-bottom: 48px;
}


.outreach-heading-v2 h2 {

  max-width: 800px;
}


.outreach-heading-v2 p {

  max-width: 620px;

  margin-top: 18px;

  color: #a2b1c3;

  font-size: 15px;
  line-height: 1.75;
}


/* ==========================================================
   MAIN PANEL
========================================================== */

.outreach-shell {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    .68fr .92fr 1.1fr;

  min-height: 585px;

  overflow: hidden;

  border-radius: 22px;

  border:
    1px solid
    rgba(116, 163, 231, .25);

  background:

    radial-gradient(
      circle at 74% 24%,
      rgba(98, 100, 255, .10),
      transparent 31%
    ),

    radial-gradient(
      circle at 100% 60%,
      rgba(63, 181, 232, .08),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #17233a 0%,
      #101a2c 48%,
      #0c1523 100%
    );

  box-shadow:

    0 40px 100px
    rgba(0,0,0,.38),

    inset 0 1px 0
    rgba(255,255,255,.025);
}


/* top accent like pricing */

.outreach-shell::before {

  content: "";

  position: absolute;

  z-index: 4;

  top: 0;
  left: 23%;

  width: 38%;
  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #67caff,
      #8187ff,
      transparent
    );

  opacity: .9;
}


/* ==========================================================
   LEFT CHANNEL COLUMN
========================================================== */

.outreach-selector {

  position: relative;

  border-right:
    1px solid
    rgba(140, 164, 218, .16);

  background:

    linear-gradient(
      180deg,
      rgba(20, 32, 55, .93),
      rgba(13, 23, 40, .95)
    );
}


.outreach-selector-head {

  padding: 27px 24px 22px;

  border-bottom:
    1px solid
    rgba(140, 164, 218, .13);
}


.outreach-selector-head span {

  color: #8b8dff;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.8px;
}


.outreach-selector-head small {

  margin-top: 6px;

  color: #8d9eb1;

  font-size: 10px;
}


/* channel row */

.outreach-selector
.outreach-nav-item {

  position: relative;

  min-height: 91px;

  padding: 0 22px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 14px;

  align-items: center;

  border: 0;

  border-bottom:
    1px solid
    rgba(140, 164, 218, .11);

  background: transparent;

  color: #a8b5c5;

  text-align: left;

  cursor: pointer;

  transition:
    background .25s ease,
    color .25s ease,
    padding-left .25s ease,
    box-shadow .25s ease;
}


/* active side strip */

.outreach-selector
.outreach-nav-item::before {

  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 3px;
  height: 0;

  transform: translateY(-50%);

  border-radius:
    0 4px 4px 0;

  background:

    linear-gradient(
      180deg,
      #6fd1ff,
      #7b79ff
    );

  box-shadow:
    0 0 18px
    rgba(105, 200, 250, .3);

  transition: height .3s ease;
}


.outreach-selector
.outreach-nav-item.active {

  padding-left: 27px;

  color: #fff;

  background:

    linear-gradient(
      90deg,
      rgba(83, 165, 241, .17),
      rgba(82, 97, 220, .06),
      transparent
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015);
}


.outreach-selector
.outreach-nav-item.active::before {

  height: 62%;
}


.outreach-selector
.outreach-nav-item:hover {

  color: #fff;

  background:

    linear-gradient(
      90deg,
      rgba(76, 147, 218, .09),
      transparent
    );
}


/* icons brighter */

.outreach-icon {

  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  border:
    1px solid
    rgba(107, 204, 255, .22);

  background:

    linear-gradient(
      145deg,
      rgba(42, 89, 139, .35),
      rgba(18, 39, 66, .5)
    );

  color: #70d0ff;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.outreach-nav-item.active
.outreach-icon {

  background:

    linear-gradient(
      135deg,
      rgba(59, 155, 224, .3),
      rgba(75, 94, 220, .17)
    );

  box-shadow:
    0 8px 22px
    rgba(55, 140, 220, .12);
}


.outreach-nav-item:hover
.outreach-icon {

  transform: translateY(-3px);
}


.outreach-icon svg {

  width: 18px;
  height: 18px;
}


.linkedin-box-icon {

  color: #7ad3ff;

  font-size: 12px;
  font-weight: 800;
}


.whatsapp-box-icon {

  color: #63dfbd;

  font-size: 13px;
  font-weight: 800;
}


.outreach-nav-item strong {

  display: block;

  color: #edf2f8;

  font-size: 12px;
  font-weight: 700;
}


.outreach-nav-item small {

  display: block;

  margin-top: 5px;

  color: #8697ab;

  font-size: 9px;
}


.outreach-arrow {

  width: 14px;
  height: 14px;

  color: #6a7c91;
}


.outreach-nav-item.active
.outreach-arrow {

  color: #71d0ff;
}


/* ==========================================================
   CENTER CONTENT
========================================================== */

.outreach-story {

  position: relative;

  padding: 54px 42px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  border-right:
    1px solid
    rgba(140, 164, 218, .14);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(88, 98, 232, .09),
      transparent 31%
    ),

    linear-gradient(
      160deg,
      rgba(22, 34, 57, .58),
      rgba(13, 24, 41, .35)
    );
}


.outreach-story-label {

  color: #78d2ff;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.7px;
}


.outreach-story h3 {

  max-width: 440px;

  margin-top: 17px;

  color: #f8f9fc;

  font-size: 32px;

  line-height: 1.12;

  letter-spacing: -1.5px;
}


.outreach-story > p {

  max-width: 435px;

  margin-top: 18px;

  color: #a3b2c6;

  font-size: 14px;

  line-height: 1.75;
}


/* benefits */

.outreach-benefits {

  display: grid;

  gap: 11px;

  margin-top: 25px;
}


.outreach-benefits span {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #b4c0cd;

  font-size: 11px;
}


.outreach-benefits svg {

  width: 14px;
  height: 14px;

  color: #61e0bd;
}


/* workflow */

.outreach-signal-strip {

  margin-top: 35px;

  padding-top: 25px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1.35fr;

  gap: 10px;

  align-items: center;

  border-top:
    1px solid
    rgba(143, 170, 218, .15);
}


.outreach-signal-strip > div {

  padding: 9px 0;
}


.outreach-signal-strip span {

  color: #6d8095;

  font-size: 8px;
}


.outreach-signal-strip strong {

  display: block;

  margin-top: 4px;

  color: #d1d9e4;

  font-size: 9px;
}


.outreach-signal-strip > svg {

  width: 13px;
  height: 13px;

  color: #7789a1;
}


/* ==========================================================
   RIGHT LIVE WINDOW
========================================================== */

.outreach-live {

  position: relative;

  padding: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:

    radial-gradient(
      circle at 50% 45%,
      rgba(70, 127, 229, .14),
      transparent 38%
    ),

    linear-gradient(
      150deg,
      rgba(19, 29, 51, .5),
      rgba(10, 18, 32, .4)
    );
}


.outreach-live-glow {

  position: absolute;

  width: 390px;
  height: 390px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(68, 146, 235, .13),
      transparent 70%
    );

  filter: blur(45px);

  pointer-events: none;

  animation:
    outreachGlowPulse
    4s ease-in-out infinite;
}


@keyframes outreachGlowPulse {

  50% {

    transform: scale(1.08);

    opacity: .7;

  }

}


/* live window */

.demo-window-v2 {

  position: relative;
  z-index: 2;

  width: 100%;

  max-width: 510px;

  overflow: hidden;

  border-radius: 17px;

  border:
    1px solid
    rgba(106, 181, 235, .24);

  background:

    radial-gradient(
      circle at 50% 35%,
      rgba(57, 89, 169, .05),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #0a111c,
      #070c13
    );

  box-shadow:

    0 35px 80px
    rgba(0, 0, 0, .42),

    0 0 60px
    rgba(68, 139, 220, .055);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.demo-window-v2:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(105, 200, 250, .38);

  box-shadow:

    0 45px 100px
    rgba(0,0,0,.48),

    0 0 75px
    rgba(72, 152, 224, .08);
}


/* browser bar */

.demo-top {

  min-height: 44px;

  padding: 0 15px;

  display: flex;

  align-items: center;

  background:

    linear-gradient(
      180deg,
      #192437,
      #141e2d
    );

  border-bottom:
    1px solid
    rgba(146, 170, 214, .1);
}


.demo-top > div {

  display: flex;

  gap: 5px;
}


.demo-top > div i {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #6b7d92;
}


.demo-top > span {

  margin-left: auto;
  margin-right: auto;

  color: #9baabe;

  font-size: 9px;
}


.demo-live {

  display: flex;

  align-items: center;

  gap: 5px;

  color: #62e1c1;

  font-size: 8px;

  font-weight: 700;
}


.demo-live i {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #62e1c1;

  animation:
    demoLivePulse
    1.5s infinite;
}


/* content */

.demo-content {

  min-height: 405px;

  padding: 30px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


/* avatar */

.demo-avatar {

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:

    linear-gradient(
      135deg,
      #72d0ff,
      #8a86ff
    );

  color: #071019;

  font-weight: 800;

  box-shadow:
    0 10px 30px
    rgba(88, 126, 242, .17);
}


.demo-person strong {

  color: #f2f5f9;

  font-size: 11px;
}


.demo-person span {

  margin-top: 3px;

  color: #8092a8;

  font-size: 9px;
}


/* ==========================================================
   AUDIO VISUAL
========================================================== */

.voice-orbit {

  position: relative;

  min-height: 180px;

  display: grid;

  place-items: center;
}


.voice-orbit::before {

  content: "";

  position: absolute;

  width: 112px;
  height: 112px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(76, 146, 236, .1),
      transparent 70%
    );

  filter: blur(12px);
}


.voice-orbit-ring {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(108, 158, 245, .13);
}


.ring-a {

  width: 125px;
  height: 125px;
}


.ring-b {

  width: 175px;
  height: 175px;

  opacity: .7;

  animation:
    voiceRingPulse
    3s ease-in-out infinite;
}


.voice-wave {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;
}


.voice-wave i {

  width: 4px;

  border-radius: 20px;

  background:

    linear-gradient(
      to top,
      #58d2ff,
      #7d8dff
    );

  box-shadow:
    0 0 8px
    rgba(89, 175, 255, .15);

  animation:
    voiceWave
    1.05s ease-in-out infinite;
}


/* ==========================================================
   BUYER CONTEXT
========================================================== */

.buyer-signal-v2 {

  padding: 18px;

  border-radius: 12px;

  border:
    1px solid
    rgba(84, 220, 190, .21);

  background:

    radial-gradient(
      circle at 0% 0%,
      rgba(75, 220, 190, .07),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      rgba(17, 40, 45, .4),
      rgba(8, 22, 27, .5)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015);
}


.buyer-signal-head > span {

  color: #61e0c0;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.1px;
}


.buyer-signal-head small {

  color: #668e88;

  font-size: 8px;
}


.buyer-signal-v2 p {

  margin-top: 8px;

  color: #b1bdc8;

  font-size: 11px;

  line-height: 1.6;
}


/* ==========================================================
   ACTIVE PANEL ANIMATION
========================================================== */

.outreach-nav-item.active
.outreach-icon {

  animation:
    activeChannelGlow
    2.6s ease-in-out infinite;
}


@keyframes activeChannelGlow {

  50% {

    box-shadow:
      0 0 25px
      rgba(72, 172, 238, .13);

  }

}


/* subtle light sweep */

.demo-window-v2::after {

  content: "";

  position: absolute;

  width: 180px;
  height: 600px;

  left: -250px;
  top: -160px;

  transform: rotate(24deg);

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.025),
      transparent
    );

  animation:
    outreachSweep
    7s ease-in-out infinite;
}


@keyframes outreachSweep {

  0%,
  40% {

    left: -250px;

  }

  70%,
  100% {

    left: 125%;

  }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1180px) {

  .outreach-shell {

    grid-template-columns:
      .72fr 1.28fr;

  }


  .outreach-story {

    border-right: 0;

  }


  .outreach-live {

    grid-column: 1 / -1;

    border-top:
      1px solid
      rgba(140,164,218,.14);

  }

}


@media(max-width:820px) {

  .outreach-shell {

    grid-template-columns: 1fr;

  }


  .outreach-selector {

    border-right: 0;

    border-bottom:
      1px solid
      rgba(140,164,218,.14);

  }


  .outreach-story {

    border-bottom:
      1px solid
      rgba(140,164,218,.14);

  }


  .outreach-live {

    grid-column: auto;

  }

}


@media(max-width:560px) {

  .outreach-story,
  .outreach-live {

    padding: 30px 22px;

  }


  .outreach-story h3 {

    font-size: 27px;

  }


  .outreach-signal-strip {

    grid-template-columns: 1fr;

  }


  .outreach-signal-strip > svg {

    transform: rotate(90deg);

  }

}
/* ==========================================================
   HOW DAWN WORKS — PREMIUM PROCESS DESIGN
========================================================== */

.dawn-process-section {

  position: relative;
  overflow: hidden;

  background:

    radial-gradient(
      circle at 12% 16%,
      rgba(42, 99, 170, .11),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 70%,
      rgba(72, 93, 194, .07),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #07101c 0%,
      #080f1b 100%
    );
}


.dawn-process-section::after {

  content: "";

  position: absolute;

  width: 600px;
  height: 600px;

  right: -330px;
  top: 150px;

  border-radius: 50%;

  background:
    rgba(78, 150, 220, .07);

  filter: blur(120px);

  pointer-events: none;
}


/* ==========================================================
   HEADING
========================================================== */

.dawn-process-heading {

  position: relative;
  z-index: 2;

  max-width: 860px;

  margin-bottom: 48px;
}


.dawn-process-heading h2 {

  max-width: 750px;
}


.dawn-process-heading p {

  max-width: 620px;

  margin-top: 18px;

  color: #a0b0c2;

  font-size: 15px;

  line-height: 1.75;
}


/* ==========================================================
   MAIN PANEL
========================================================== */

.dawn-process-panel {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    .68fr 1.32fr;

  min-height: 650px;

  overflow: hidden;

  border-radius: 22px;

  border:
    1px solid
    rgba(115, 166, 224, .23);

  background:

    radial-gradient(
      circle at 75% 20%,
      rgba(88, 99, 231, .085),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      #17243a,
      #0e1828
    );

  box-shadow:

    0 40px 100px
    rgba(0,0,0,.34),

    inset 0 1px 0
    rgba(255,255,255,.022);
}


.dawn-process-panel::before {

  content: "";

  position: absolute;

  top: 0;
  left: 18%;

  width: 38%;
  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #6bd1ff,
      #7f86ff,
      transparent
    );
}


/* ==========================================================
   LEFT INTRO
========================================================== */

.process-intro {

  padding: 55px 48px;

  display: flex;

  flex-direction: column;

  border-right:
    1px solid
    rgba(143, 169, 217, .15);

  background:

    radial-gradient(
      circle at 0% 0%,
      rgba(67, 143, 208, .09),
      transparent 35%
    ),

    linear-gradient(
      150deg,
      rgba(19, 33, 55, .9),
      rgba(13, 23, 39, .92)
    );
}


.process-intro-badge {

  width: fit-content;

  padding: 8px 12px;

  border-radius: 100px;

  border:
    1px solid
    rgba(105,200,250,.17);

  background:
    rgba(105,200,250,.055);

  color: #78d1fc;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.25px;
}


.process-intro h3 {

  max-width: 420px;

  margin-top: 31px;

  color: #f5f7fa;

  font-size: 36px;

  line-height: 1.1;

  letter-spacing: -1.7px;
}


.process-intro h3 span {

  display: block;

  margin-top: 5px;

  color: #69cafa;
}


.process-intro > p {

  max-width: 420px;

  margin-top: 17px;

  color: #9cacc0;

  font-size: 14px;

  line-height: 1.75;
}


.process-intro-points {

  display: grid;

  gap: 11px;

  margin-top: 33px;
}


.process-intro-points > div {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #bec9d5;

  font-size: 12px;
}


.process-intro-points svg {

  width: 14px;
  height: 14px;

  color: #61dfc0;
}


.process-intro-link {

  width: fit-content;

  margin-top: auto;

  padding-top: 36px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #70cbfa;

  font-size: 12px;

  font-weight: 700;
}


.process-intro-link svg {

  width: 14px;
  height: 14px;

  transition: transform .2s ease;
}


.process-intro-link:hover svg {

  transform: translate(3px,-3px);
}


/* ==========================================================
   RIGHT PROCESS FLOW
========================================================== */

.process-flow {

  position: relative;

  padding: 45px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 14px;

  background:

    radial-gradient(
      circle at 80% 20%,
      rgba(81, 93, 221, .08),
      transparent 32%
    );
}


/* animated flow line */

.process-line {

  position: absolute;

  left: 45px;
  right: 45px;

  top: 50%;

  height: 1px;

  background:
    rgba(123, 163, 211, .12);

  overflow: hidden;
}


.process-line-progress {

  display: block;

  width: 35%;
  height: 100%;

  background:

    linear-gradient(
      90deg,
      transparent,
      #65d1ff,
      #8187ff,
      transparent
    );

  animation:
    processLineMove
    4.8s linear infinite;
}


@keyframes processLineMove {

  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(400%);
  }
}


/* ==========================================================
   STEP CARD
========================================================== */

.process-step {

  position: relative;
  z-index: 2;

  min-height: 260px;

  padding: 24px;

  overflow: hidden;

  border-radius: 15px;

  border:
    1px solid
    rgba(121, 171, 215, .12);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(77, 143, 204, .055),
      transparent 29%
    ),

    linear-gradient(
      145deg,
      rgba(13, 25, 40, .9),
      rgba(9, 17, 29, .92)
    );

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}


.process-step:hover {

  transform: translateY(-6px);

  border-color:
    rgba(105, 200, 250, .3);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(79, 153, 211, .10),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #14253a,
      #0c1826
    );

  box-shadow:
    0 24px 55px
    rgba(0,0,0,.22);
}


.process-step.active {

  border-color:
    rgba(105, 200, 250, .25);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(77, 166, 222, .12),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      #14283d,
      #0d1a2a
    );
}


.process-step::after {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 0;
  height: 2px;

  background:

    linear-gradient(
      90deg,
      #63cfff,
      #8486ff
    );

  transition: width .35s ease;
}


.process-step:hover::after,
.process-step.active::after {

  width: 100%;
}


/* NUMBER */

.process-step-marker {

  position: absolute;

  right: 20px;
  top: 20px;

  color: #62768c;

  font-size: 9px;
}


/* ICON */

.process-step-icon {

  width: 45px;
  height: 45px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  border:
    1px solid
    rgba(105,200,250,.16);

  background:

    linear-gradient(
      145deg,
      rgba(38, 86, 136, .32),
      rgba(16, 36, 59, .45)
    );

  color: #6fd0fd;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.process-step:hover
.process-step-icon {

  transform: translateY(-3px);

  box-shadow:
    0 8px 25px
    rgba(62,157,226,.12);
}


.process-step-icon svg {

  width: 18px;
  height: 18px;
}


/* COPY */

.process-step-copy > span {

  display: block;

  margin-top: 22px;

  color: #6dcbf8;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.3px;
}


.process-step-copy h3 {

  margin-top: 7px;

  color: #f3f6f9;

  font-size: 22px;

  line-height: 1.2;
}


.process-step-copy > p {

  max-width: 320px;

  margin-top: 8px;

  color: #8ea1b5;

  font-size: 12px;

  line-height: 1.6;
}


/* ==========================================================
   RESEARCH MINI UI
========================================================== */

.process-mini-ui {

  margin-top: 19px;
}


.mini-account {

  padding: 9px 10px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 8px;

  align-items: center;

  border-radius: 8px;

  opacity: .45;

  transition: .25s ease;
}


.mini-account.active {

  opacity: 1;

  background:
    rgba(105,200,250,.055);
}


.mini-account > i:first-child {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #536678;
}


.mini-account.active
> i:first-child {

  background: #69ccfa;

  box-shadow:
    0 0 12px
    rgba(105,204,250,.25);
}


.mini-account strong {

  display: block;

  color: #cbd5df;

  font-size: 9px;
}


.mini-account small {

  display: block;

  margin-top: 2px;

  color: #6c7d90;

  font-size: 8px;
}


.mini-account > svg {

  width: 11px;
  height: 11px;

  color: #5bdcbf;
}


/* ==========================================================
   CHANNELS
========================================================== */

.process-channel-row {

  position: relative;

  display: flex;

  gap: 9px;

  margin-top: 22px;
}


.process-channel-row > span {

  width: 37px;
  height: 37px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(105,200,250,.16);

  background:
    rgba(105,200,250,.055);

  color: #69ccfa;

  animation:
    processChannelFloat
    3s ease-in-out infinite;
}


.process-channel-row
> span:nth-child(2) {

  animation-delay: .35s;
}


.process-channel-row
> span:nth-child(3) {

  animation-delay: .7s;
}


.process-channel-row
> span:nth-child(4) {

  animation-delay: 1.05s;
}


@keyframes processChannelFloat {

  50% {
    transform: translateY(-5px);
  }
}


.process-channel-row svg {

  width: 15px;
  height: 15px;
}


.process-linkedin {

  font-size: 10px;

  font-weight: 800;
}


.process-whatsapp {

  color: #5bdabb !important;

  font-size: 10px;

  font-weight: 800;
}


/* ==========================================================
   QUALIFY BARS
========================================================== */

.process-qualify-bars {

  display: grid;

  gap: 9px;

  margin-top: 20px;
}


.process-qualify-bars > div {

  display: grid;

  grid-template-columns:
    50px 1fr;

  gap: 10px;

  align-items: center;
}


.process-qualify-bars span {

  color: #8495a7;

  font-size: 8px;
}


.process-qualify-bars strong {

  height: 6px;

  overflow: hidden;

  border-radius: 100px;

  background: #1a2736;
}


.process-qualify-bars strong i {

  display: block;

  width: var(--value);
  height: 100%;

  border-radius: inherit;

  background:

    linear-gradient(
      90deg,
      #6ccfff,
      #61dec4
    );

  animation:
    processBarPulse
    2.8s ease-in-out infinite;
}


@keyframes processBarPulse {

  50% {

    opacity: .65;

    filter:
      brightness(1.25);
  }
}


/* ==========================================================
   HANDOFF
========================================================== */

.process-handoff {

  margin-top: 20px;

  padding: 13px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 10px;

  align-items: center;

  border-radius: 10px;

  border:
    1px solid
    rgba(105,200,250,.12);

  background:
    rgba(7,15,24,.42);
}


.process-handoff-avatar {

  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:

    linear-gradient(
      135deg,
      #6ccfff,
      #8386ff
    );

  color: #071019;

  font-size: 10px;

  font-weight: 800;
}


.process-handoff strong {

  display: block;

  color: #dce5ed;

  font-size: 9px;
}


.process-handoff small {

  display: block;

  margin-top: 3px;

  color: #718397;

  font-size: 8px;
}


.process-ready {

  display: flex;

  align-items: center;

  gap: 5px;

  color: #5eddbd;

  font-size: 8px;
}


.process-ready i {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #5eddbd;

  animation:
    processReadyPulse
    1.5s infinite;
}


@keyframes processReadyPulse {

  50% {

    box-shadow:
      0 0 0 7px
      rgba(94,221,189,.07);
  }
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1050px) {

  .dawn-process-panel {

    grid-template-columns: 1fr;
  }


  .process-intro {

    border-right: 0;

    border-bottom:
      1px solid
      rgba(143,169,217,.15);
  }


  .process-intro-link {

    margin-top: 26px;
  }

}


@media(max-width:720px) {

  .process-flow {

    grid-template-columns: 1fr;

    padding: 28px 22px;
  }


  .process-line {

    display: none;
  }


  .process-intro {

    padding: 36px 24px;
  }


  .process-intro h3 {

    font-size: 30px;
  }


  .process-step {

    min-height: auto;
  }

}
/* ==========================================================
   CLIENT LOGOS
========================================================== */

.client-logos-section {
  position: relative;
  overflow: hidden;

  padding: 34px 0 42px;

  border-top:
    1px solid
    rgba(255,255,255,.03);

  border-bottom:
    1px solid
    rgba(255,255,255,.035);

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(48, 113, 176, .08),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #040709,
      #06101a
    );
}


/* heading */

.client-logos-heading {
  text-align: center;
  margin-bottom: 27px;
}


.client-logos-heading .section-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  width: fit-content;

  margin: 0 auto;

  padding-left: 0;

  color: #7ccfff;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 2px;
}


.client-logos-heading
.section-label::before {
  position: static;

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  transform: none;

  background: #59ddbd;
}


/* ==========================================================
   MARQUEE
========================================================== */

.client-logo-marquee {
  position: relative;

  width: 100%;
  overflow: hidden;
}


/* left/right fade */

.client-logo-marquee::before,
.client-logo-marquee::after {
  content: "";

  position: absolute;
  z-index: 3;

  top: 0;

  width: 160px;
  height: 100%;

  pointer-events: none;
}


.client-logo-marquee::before {
  left: 0;

  background:
    linear-gradient(
      90deg,
      #050a0f,
      transparent
    );
}


.client-logo-marquee::after {
  right: 0;

  background:
    linear-gradient(
      -90deg,
      #050a0f,
      transparent
    );
}


.client-logo-track {
  width: max-content;

  display: flex;
  align-items: center;

  gap: 68px;

  animation:
    clientLogoScroll
    32s linear infinite;
}


.client-logo-marquee:hover
.client-logo-track {
  animation-play-state: paused;
}


@keyframes clientLogoScroll {
  from {
    transform: translateX(0);
  }

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


/* ==========================================================
   LOGO ITEM
========================================================== */

.client-logo-item {
  min-width: 150px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: .58;

  filter:
    grayscale(1)
    brightness(1.7);

  transition:
    opacity .25s ease,
    filter .25s ease,
    transform .25s ease;
}


.client-logo-item:hover {
  opacity: 1;

  filter:
    grayscale(0)
    brightness(1);

  transform:
    translateY(-3px);
}


.client-logo-item img {
  display: block;

  max-width: 145px;
  max-height: 38px;

  width: auto;
  height: auto;

  object-fit: contain;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width: 768px) {

  .client-logos-section {
    padding:
      30px 0 36px;
  }

  .client-logo-track {
    gap: 46px;

    animation-duration:
      25s;
  }

  .client-logo-item {
    min-width: 125px;
  }

  .client-logo-item img {
    max-width: 120px;
    max-height: 32px;
  }

  .client-logo-marquee::before,
  .client-logo-marquee::after {
    width: 70px;
  }

}
/* ==========================================================
   HERO — PREMIUM VISUAL UPGRADE
   DESIGN ONLY / NO CONTENT CHANGES
========================================================== */


/* ==========================================================
   HERO SECTION
========================================================== */

.hero {

  position: relative;
  overflow: hidden;

  min-height: 860px;

  padding-top: 150px;

  background:

    radial-gradient(
      circle at 10% 18%,
      rgba(44, 108, 177, .13),
      transparent 29%
    ),

    radial-gradient(
      circle at 82% 23%,
      rgba(74, 98, 215, .11),
      transparent 27%
    ),

    radial-gradient(
      circle at 74% 72%,
      rgba(50, 178, 219, .06),
      transparent 24%
    ),

    linear-gradient(
      180deg,
      #07111f 0%,
      #050a11 52%,
      #030609 100%
    );
}


/* ambient lower light */

.hero::before {

  content: "";

  position: absolute;

  width: 760px;
  height: 760px;

  right: -250px;
  top: 60px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(66, 109, 218, .13),
      transparent 68%
    );

  filter: blur(65px);

  pointer-events: none;
}


/* bottom glow separator */

.hero::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 88%;
  height: 1px;

  transform: translateX(-50%);

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(103, 191, 248, .16),
      rgba(122, 119, 255, .12),
      transparent
    );
}


/* ==========================================================
   HERO GRID
========================================================== */

.hero-grid {

  opacity: .035;

  background-size:
    70px 70px;

  mask-image:

    linear-gradient(
      180deg,
      rgba(0,0,0,.8),
      transparent 85%
    );
}


/* ==========================================================
   HERO LAYOUT
========================================================== */

.hero-layout {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    .98fr 1.02fr;

  gap: 86px;

  align-items: center;
}


/* ==========================================================
   LEFT COPY
========================================================== */

.hero-copy {

  position: relative;

  padding-left: 8px;
}


/* soft light behind title */

.hero-copy::before {

  content: "";

  position: absolute;

  z-index: -1;

  width: 420px;
  height: 420px;

  left: -140px;
  top: 90px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(70, 146, 213, .07),
      transparent 68%
    );

  filter: blur(30px);
}


.hero-eyebrow {

  margin-bottom: 28px;

  color: #79d1fb;

  letter-spacing: 2px;
}


.hero-copy h1 {

  max-width: 760px;

  font-size:

    clamp(
      58px,
      6vw,
      86px
    );

  line-height: .99;

  letter-spacing: -4.6px;
}


/* typewriter line gets more depth */

.hero-changing-line {

  position: relative;

  display: block;

  margin-top: 8px;
}


#heroWord {

  position: relative;

  color: transparent;

  background:

    linear-gradient(
      90deg,
      #65ccfa 0%,
      #7c9cff 52%,
      #9a86ff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  filter:
    drop-shadow(
      0 8px 32px
      rgba(102, 140, 255, .08)
    );
}


/* subtle glow under rotating word */

.hero-changing-line::after {

  content: "";

  position: absolute;

  left: 150px;
  bottom: -8px;

  width: 330px;
  height: 24px;

  pointer-events: none;

  background:

    radial-gradient(
      ellipse,
      rgba(83, 163, 247, .10),
      transparent 70%
    );

  filter: blur(12px);
}


.hero-description {

  max-width: 675px;

  margin-top: 31px;

  color: #9cabbc;

  font-size: 17px;

  line-height: 1.75;
}


/* ==========================================================
   HERO BUTTONS
========================================================== */

.hero-actions {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 31px;
}


.hero-primary {

  min-height: 61px;

  padding: 0 27px;

  border-radius: 11px;

  color: #07101a;

  background:

    linear-gradient(
      135deg,
      #a7e0ff,
      #6bc8fb
    );

  box-shadow:

    0 14px 36px
    rgba(77, 180, 237, .17),

    inset 0 1px 0
    rgba(255,255,255,.25);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.hero-primary:hover {

  transform:
    translateY(-3px);

  box-shadow:

    0 20px 46px
    rgba(77,180,237,.25);
}


.hero-secondary {

  min-height: 61px;

  padding: 0 27px;

  border-radius: 11px;

  border:
    1px solid
    rgba(133, 168, 211, .17);

  color: #d6dee8;

  background:

    linear-gradient(
      145deg,
      rgba(20, 31, 46, .82),
      rgba(9, 15, 23, .78)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}


.hero-secondary:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(105,200,250,.25);

  background:
    rgba(18, 31, 45, .9);
}


/* ==========================================================
   HERO PROOF ROW
========================================================== */

.hero-proof {

  margin-top: 24px;

  padding-top: 2px;

  display: flex;

  flex-wrap: wrap;

  gap: 8px 12px;

  opacity: .9;
}


.hero-proof span {

  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: #7f91a5;

  font-size: 11px;
}


.hero-proof svg {

  width: 13px;
  height: 13px;

  color: #6ebfe9;
}


/* ==========================================================
   RIGHT DASHBOARD CONTAINER
========================================================== */

.hero-dashboard-wrap {

  position: relative;

  perspective: 1500px;

  padding: 20px 4px 20px 20px;
}


/* large glow behind dashboard */

.hero-dashboard-wrap::before {

  content: "";

  position: absolute;

  z-index: 0;

  width: 82%;
  height: 76%;

  right: -3%;
  top: 13%;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(73, 118, 225, .16),
      rgba(64, 168, 218, .055) 42%,
      transparent 70%
    );

  filter: blur(60px);

  pointer-events: none;
}


/* subtle outer glass plate */

.hero-dashboard-wrap::after {

  content: "";

  position: absolute;

  z-index: 0;

  inset: 0 0 0 2%;

  border-radius: 28px;

  border:
    1px solid
    rgba(105, 167, 218, .055);

  background:

    linear-gradient(
      145deg,
      rgba(75, 104, 190, .018),
      transparent
    );

  transform:
    translate(17px, 13px);

  pointer-events: none;
}


/* ==========================================================
   DASHBOARD PANEL
========================================================== */

.dashboard-card {

  position: relative;
  z-index: 2;

  overflow: visible;

  border-radius: 27px;

  border:
    1px solid
    rgba(106, 171, 222, .24);

  background:

    radial-gradient(
      circle at 88% 8%,
      rgba(82, 110, 216, .10),
      transparent 29%
    ),

    radial-gradient(
      circle at 8% 65%,
      rgba(56, 157, 207, .045),
      transparent 25%
    ),

    linear-gradient(
      145deg,
      #142032,
      #0b1421 70%,
      #09111b
    );

  box-shadow:

    0 45px 110px
    rgba(0,0,0,.46),

    0 0 80px
    rgba(58, 132, 210, .045),

    inset 0 1px 0
    rgba(255,255,255,.025);

  transition:
    border-color .3s ease,
    box-shadow .3s ease;
}


.hero-dashboard-wrap:hover
.dashboard-card {

  border-color:
    rgba(105,200,250,.34);

  box-shadow:

    0 58px 135px
    rgba(0,0,0,.54),

    0 0 95px
    rgba(61, 145, 220, .075);
}


/* animated top glow line */

.dashboard-card::before {

  content: "";

  position: absolute;

  z-index: 6;

  top: -1px;
  left: 8%;

  width: 36%;
  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #68ccff,
      #8a86ff,
      transparent
    );

  animation:
    heroDashboardLine
    5.5s ease-in-out infinite;
}


@keyframes heroDashboardLine {

  0%,
  100% {

    left: 4%;

    opacity: .35;
  }

  50% {

    left: 58%;

    opacity: .9;
  }

}


/* ==========================================================
   DASHBOARD HEADER
========================================================== */

.dashboard-head {

  padding-bottom: 20px;

  border-bottom:
    1px solid
    rgba(132, 168, 207, .14);
}


.dashboard-kicker {

  color: #70cffb;
}


.dashboard-live {

  padding: 7px 10px;

  border-radius: 100px;

  background:
    rgba(62, 209, 182, .045);
}


.dashboard-live i {

  box-shadow:
    0 0 0 7px
    rgba(82, 224, 193, .045);
}


/* ==========================================================
   CAMPAIGN HEALTH
========================================================== */

.dashboard-overview {

  padding: 26px 0;

  border-bottom:
    1px solid
    rgba(132,168,207,.13);
}


.health-circle {

  position: relative;

  filter:
    drop-shadow(
      0 0 18px
      rgba(91,190,247,.08)
    );
}


/* ==========================================================
   ACTIVITY ROWS
========================================================== */

.activity-list {

  display: grid;
}


.activity-row {

  padding:
    17px 8px;

  border-bottom:
    1px solid
    rgba(125,159,196,.075);

  border-radius: 9px;

  transition:
    opacity .3s ease,
    background .3s ease,
    transform .3s ease;
}


.activity-row.active {

  opacity: 1;

  transform:
    translateX(4px);

  background:

    linear-gradient(
      90deg,
      rgba(81,167,224,.10),
      rgba(71,104,195,.03),
      transparent
    );
}


.activity-row.active
.activity-icon {

  color: #70cef9;

  border-color:
    rgba(105,200,250,.17);

  background:
    rgba(105,200,250,.055);
}


/* ==========================================================
   METRICS
========================================================== */

.dashboard-metrics {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

  margin-top: 18px;
}


.dashboard-metrics > div {

  min-height: 88px;

  padding: 16px;

  border-radius: 12px;

  border:
    1px solid
    rgba(124, 169, 211, .13);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(78, 141, 203, .05),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      rgba(19, 31, 47, .92),
      rgba(12, 20, 31, .94)
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}


.dashboard-metrics > div:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(105,200,250,.25);

  background:

    linear-gradient(
      145deg,
      #17283a,
      #101c2a
    );
}


.dashboard-metrics span {

  color: #8394a8;
}


.dashboard-metrics strong {

  color: #f1f4f7;

  font-size: 23px;
}


/* ==========================================================
   FLOATING STATUS BADGES
========================================================== */

.floating-chip {

  border:
    1px solid
    rgba(105,200,250,.18);

  background:

    linear-gradient(
      145deg,
      rgba(11, 23, 34, .97),
      rgba(7, 14, 21, .98)
    );

  box-shadow:
    0 13px 34px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(12px);
}


.floating-chip.response {

  animation:
    responseFloat
    4.2s ease-in-out infinite;
}


.floating-chip.crm {

  animation:
    crmFloat
    4.8s ease-in-out infinite;
}


@keyframes responseFloat {

  50% {
    transform:
      translateY(-6px);
  }

}


@keyframes crmFloat {

  50% {
    transform:
      translateY(6px);
  }

}


/* ==========================================================
   HERO DASHBOARD HOVER GLOW
========================================================== */

.hero-dashboard-wrap:hover
.dashboard-overview {

  filter:
    brightness(1.04);
}


.hero-dashboard-wrap:hover
.dashboard-metrics {

  transform:
    translateZ(36px);
}


/* ==========================================================
   NAV VISUAL POLISH
========================================================== */

.nav-shell {

  border-radius: 22px;

  border:
    1px solid
    rgba(113, 167, 217, .18);

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(72, 107, 211, .06),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      rgba(18, 31, 49, .96),
      rgba(11, 21, 35, .96)
    );

  box-shadow:

    0 16px 46px
    rgba(0,0,0,.22),

    inset 0 1px 0
    rgba(255,255,255,.018);
}


/* CTA on nav */

.nav-cta {

  border-radius: 10px;

  background:

    linear-gradient(
      135deg,
      #9ddcff,
      #6bc5f8
    );

  box-shadow:
    0 10px 28px
    rgba(70, 174, 232, .15);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width: 1100px) {

  .hero-layout {

    grid-template-columns:
      1fr;

    gap: 55px;
  }


  .hero-copy {

    max-width: 820px;
  }


  .hero-dashboard-wrap {

    max-width: 880px;

    margin:
      0 auto;
  }

}


@media(max-width: 700px) {

  .hero {

    min-height: auto;

    padding-top:
      130px;
  }


  .hero-copy h1 {

    font-size:
      clamp(
        49px,
        13vw,
        67px
      );

    letter-spacing:
      -3px;
  }


  .hero-description {

    font-size:
      15px;
  }


  .hero-actions {

    align-items:
      stretch;

    flex-direction:
      column;
  }


  .hero-primary,
  .hero-secondary {

    width:
      100%;

    justify-content:
      center;
  }


  .hero-dashboard-wrap {

    padding:
      10px 0;
  }


  .dashboard-metrics {

    grid-template-columns:
      1fr;
  }

}
/* ==========================================================
   HERO — COMPACT VERSION
========================================================== */

.hero {
  min-height: 720px;
  padding-top: 132px;
  padding-bottom: 58px;
}

.hero-layout {
  grid-template-columns: .95fr 1.05fr;
  gap: 62px;
  align-items: center;
}

.hero-copy h1 {
  max-width: 760px;

  font-size:
    clamp(
      52px,
      5.1vw,
      74px
    );

  line-height: 1.01;
  letter-spacing: -3.8px;
}

.hero-changing-line {
  margin-top: 4px;
}

.hero-description {
  max-width: 650px;
  margin-top: 25px;

  font-size: 16px;
  line-height: 1.7;
}

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

.hero-proof {
  margin-top: 20px;
}


/* dashboard slightly smaller */

.hero-dashboard-wrap {
  padding: 10px 0 10px 10px;
}

.dashboard-card {
  border-radius: 23px;
}

.dashboard-overview {
  padding: 20px 0;
}

.activity-row {
  padding: 14px 8px;
}

.dashboard-metrics > div {
  min-height: 76px;
  padding: 13px;
}


/* tablet */

@media(max-width:1100px) {

  .hero {
    min-height: auto;
  }

}


/* mobile */

@media(max-width:700px) {

  .hero {
    padding-top: 120px;
    padding-bottom: 50px;
  }

  .hero-copy h1 {
    font-size:
      clamp(
        44px,
        12vw,
        60px
      );

    letter-spacing: -2.8px;
  }

}
/* ==========================================================
   PIPELINE CTA — PREMIUM VERSION
========================================================== */

.pipeline-cta-section {
  position: relative;
  overflow: hidden;

  padding:
    86px 0 92px;

  background:

    radial-gradient(
      circle at 20% 50%,
      rgba(48, 104, 181, .09),
      transparent 31%
    ),

    linear-gradient(
      180deg,
      #07101c,
      #050a11
    );
}


/* ==========================================================
   MAIN PANEL
========================================================== */

.pipeline-cta {
  position: relative;

  min-height: 460px;

  display: grid;

  grid-template-columns:
    .92fr 1.08fr;

  overflow: hidden;

  border-radius: 24px;

  border:
    1px solid
    rgba(111, 163, 225, .25);

  background:

    radial-gradient(
      circle at 80% 20%,
      rgba(89, 89, 232, .13),
      transparent 31%
    ),

    radial-gradient(
      circle at 30% 100%,
      rgba(61, 179, 236, .09),
      transparent 31%
    ),

    linear-gradient(
      135deg,
      #142642 0%,
      #101d35 48%,
      #131a45 100%
    );

  box-shadow:

    0 38px 100px
    rgba(0, 0, 0, .34),

    inset 0 1px 0
    rgba(255, 255, 255, .035);
}


/* animated upper border */

.pipeline-cta::before {
  content: "";

  position: absolute;

  z-index: 5;

  top: 0;
  left: 8%;

  width: 42%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #6bd0ff,
      #8582ff,
      transparent
    );

  animation:
    pipelineTopLine
    6s ease-in-out infinite;
}


@keyframes pipelineTopLine {

  0%,
  100% {
    left: 5%;
    opacity: .35;
  }

  50% {
    left: 51%;
    opacity: 1;
  }

}


/* ==========================================================
   LEFT COPY
========================================================== */

.pipeline-cta-copy {
  position: relative;
  z-index: 3;

  padding:
    62px 28px 58px 62px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.pipeline-cta-label {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: #76d0fa;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.7px;
}


.pipeline-cta-label i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #5ce0c0;

  box-shadow:
    0 0 14px
    rgba(92, 224, 192, .35);
}


.pipeline-cta h2 {
  max-width: 610px;

  margin-top: 22px;

  color: #f7f9fc;

  font-size:
    clamp(
      42px,
      4.1vw,
      60px
    );

  line-height: 1.05;

  letter-spacing: -3px;
}


.pipeline-cta h2 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #68d4fb,
      #788cff,
      #9a7bff
    );

  -webkit-background-clip: text;
  background-clip: text;
}


.pipeline-cta-copy > p {
  max-width: 590px;

  margin-top: 20px;

  color: #a9b7c8;

  font-size: 15px;

  line-height: 1.72;
}


/* ==========================================================
   BUTTONS
========================================================== */

.pipeline-cta-actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 12px;

  margin-top: 30px;
}


.pipeline-primary,
.pipeline-secondary {
  min-height: 56px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border-radius: 10px;

  font-size: 13px;

  font-weight: 800;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


.pipeline-primary {
  padding: 0 23px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #24baf3,
      #557cff,
      #754fff
    );

  box-shadow:
    0 14px 35px
    rgba(68, 111, 245, .24);
}


.pipeline-primary:hover {
  transform: translateY(-3px);

  box-shadow:
    0 20px 44px
    rgba(68, 111, 245, .34);
}


.pipeline-secondary {
  padding: 0 18px;

  color: #c8d5e3;

  border:
    1px solid
    rgba(133, 172, 218, .16);

  background:
    rgba(6, 15, 27, .22);
}


.pipeline-secondary:hover {
  transform: translateY(-3px);

  color: white;

  border-color:
    rgba(106, 202, 251, .29);

  background:
    rgba(22, 38, 61, .48);
}


.pipeline-primary svg,
.pipeline-secondary svg {
  width: 15px;
  height: 15px;
}


/* ==========================================================
   SMALL PROOF ROW
========================================================== */

.pipeline-mini-proof {
  display: flex;

  flex-wrap: wrap;

  gap: 17px;

  margin-top: 27px;
}


.pipeline-mini-proof span {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: #879aae;

  font-size: 10px;
}


.pipeline-mini-proof svg {
  width: 12px;
  height: 12px;

  color: #60ddbf;
}


/* ==========================================================
   RIGHT IMAGE AREA
========================================================== */

.pipeline-cta-visual {
  position: relative;

  min-height: 460px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    24px 26px 24px 0;
}


/* lighting behind visual */

.pipeline-image-glow {
  position: absolute;

  width: 520px;
  height: 390px;

  right: 1%;
  top: 50%;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(76, 104, 255, .23),
      rgba(52, 174, 241, .08) 43%,
      transparent 70%
    );

  filter:
    blur(55px);

  animation:
    pipelineGlow
    5s ease-in-out infinite;
}


@keyframes pipelineGlow {

  50% {
    transform:
      translateY(-50%)
      scale(1.08);

    opacity: .74;
  }

}


/* image frame */

.pipeline-image-frame {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 720px;

  overflow: hidden;

  border-radius: 18px;

  filter:
    drop-shadow(
      0 30px 55px
      rgba(0, 0, 0, .25)
    );

  transition:
    transform .45s
    cubic-bezier(.22,.7,.22,1);
}


.pipeline-cta:hover
.pipeline-image-frame {
  transform:
    translateY(-7px)
    scale(1.015);
}


.pipeline-image-frame img {
  display: block;

  width: 100%;
  height: auto;

  transform:
    scale(1.02);

  mix-blend-mode: screen;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black 12%,
      black 100%
    );
}


/* animated light across visual */

.pipeline-image-shine {
  position: absolute;

  top: -40%;
  left: -40%;

  width: 28%;
  height: 190%;

  transform:
    rotate(20deg);

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.075),
      transparent
    );

  animation:
    pipelineShine
    7s ease-in-out infinite;
}


@keyframes pipelineShine {

  0%,
  40% {
    left: -40%;
  }

  75%,
  100% {
    left: 130%;
  }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width: 1000px) {

  .pipeline-cta {
    grid-template-columns: 1fr;
  }

  .pipeline-cta-copy {
    padding:
      52px 50px 30px;
  }

  .pipeline-cta-visual {
    min-height: auto;

    padding:
      15px 40px 42px;
  }

  .pipeline-image-frame {
    max-width: 700px;
  }

}


@media(max-width: 600px) {

  .pipeline-cta-section {
    padding:
      65px 0;
  }

  .pipeline-cta {
    border-radius: 18px;
  }

  .pipeline-cta-copy {
    padding:
      38px 24px 20px;
  }

  .pipeline-cta h2 {
    font-size:
      39px;

    letter-spacing:
      -2px;
  }

  .pipeline-cta-copy > p {
    font-size:
      14px;
  }

  .pipeline-cta-actions {
    align-items: stretch;

    flex-direction: column;
  }

  .pipeline-primary,
  .pipeline-secondary {
    width: 100%;
  }

  .pipeline-cta-visual {
    padding:
      10px 17px 27px;
  }

  .pipeline-mini-proof {
    gap:
      10px 15px;
  }

}
/* ==========================================================
   PREMIUM FOOTER
========================================================== */

.footer-premium {
  position: relative;
  overflow: hidden;

  padding:
    72px 0 30px;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(36, 94, 158, .10),
      transparent 30%
    ),
    radial-gradient(
      circle at 91% 7%,
      rgba(77, 71, 193, .10),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #07101b,
      #050a10
    );
}


/* ==========================================================
   OUTER SHELL
========================================================== */

.footer-shell {
  position: relative;

  overflow: hidden;

  border-radius: 24px;

  border:
    1px solid
    rgba(111, 167, 221, .22);

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(73, 78, 205, .08),
      transparent 29%
    ),
    radial-gradient(
      circle at 10% 65%,
      rgba(42, 124, 196, .06),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #0e1a2a,
      #08121e 68%,
      #07101a
    );

  box-shadow:
    0 35px 100px
    rgba(0,0,0,.32);
}


/* ==========================================================
   TOP GRID
========================================================== */

.footer-top-grid {
  display: grid;

  grid-template-columns:
    1.35fr .75fr .75fr 1fr;

  gap: 0;

  min-height: 390px;

  padding:
    62px 56px 50px;
}


.footer-top-grid > * + * {
  border-left:
    1px solid
    rgba(120, 160, 200, .14);

  padding-left: 52px;
}


/* ==========================================================
   BRAND
========================================================== */

.footer-brand-block {
  position: relative;

  padding-right: 48px;
}


.footer-logo {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  color: white;
}


.footer-logo strong {
  font-size: 26px;

  letter-spacing: -1px;
}


.footer-logo-mark {
  position: relative;

  width: 48px;
  height: 33px;

  display: block;
}


.footer-logo-mark::before,
.footer-logo-mark::after {
  content: "";

  position: absolute;

  height: 2px;

  transform-origin: left center;

  border-radius: 4px;

  background:
    linear-gradient(
      90deg,
      #5fcfff,
      #408eff
    );
}


.footer-logo-mark::before {
  width: 26px;

  left: 2px;
  top: 23px;

  transform: rotate(-30deg);
}


.footer-logo-mark::after {
  width: 27px;

  left: 23px;
  top: 10px;

  transform: rotate(-39deg);
}


.footer-logo-mark i {
  position: absolute;

  z-index: 2;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  border:
    2px solid #57c8ff;

  background: #0c1724;
}


.footer-logo-mark i:nth-child(1) {
  left: 0;
  bottom: 1px;
}


.footer-logo-mark i:nth-child(2) {
  left: 22px;
  top: 12px;
}


.footer-logo-mark i:nth-child(3) {
  right: 0;
  top: 0;
}


.footer-brand-block > p {
  max-width: 430px;

  margin-top: 31px;

  color: #a3b0c0;

  font-size: 15px;

  line-height: 1.75;
}


/* decorative wave */

.footer-brand-art {
  position: absolute;

  left: 0;
  right: 20px;
  bottom: 3px;

  height: 90px;

  overflow: hidden;
}


.footer-brand-art::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 9px;

  width: 75px;
  height: 60px;

  opacity: .35;

  background-image:
    radial-gradient(
      circle,
      #2577bd 2px,
      transparent 2px
    );

  background-size:
    14px 14px;
}


.footer-brand-art span {
  position: absolute;

  width: 390px;
  height: 100px;

  left: 15px;
  bottom: -65px;

  border-radius: 50%;

  border-top:
    2px solid
    rgba(54, 149, 255, .85);

  transform:
    rotate(-4deg);

  filter:
    drop-shadow(
      0 0 8px
      rgba(59, 144, 255, .35)
    );
}


/* ==========================================================
   LINKS
========================================================== */

.footer-links-column h4,
.footer-cta-column h4 {
  position: relative;

  margin-bottom: 30px;

  color: #61caff;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;
}


.footer-links-column h4::after,
.footer-cta-column h4::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -12px;

  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #43bdf8,
      transparent
    );

  box-shadow:
    0 0 8px
    rgba(67, 189, 248, .45);
}


.footer-links-column {
  display: flex;

  flex-direction: column;
}


.footer-links-column a {
  position: relative;

  width: fit-content;

  margin-bottom: 20px;

  padding-left: 18px;

  color: #b1bdca;

  font-size: 14px;

  transition:
    color .22s ease,
    transform .22s ease;
}


.footer-links-column a::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 5px;
  height: 5px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background: #48baf6;
}


.footer-links-column a:hover {
  color: white;

  transform:
    translateX(4px);
}


/* ==========================================================
   FOOTER CTA
========================================================== */

.footer-cta-column > p {
  max-width: 310px;

  color: #9daabc;

  font-size: 14px;

  line-height: 1.7;
}


.footer-cta-card {
  position: relative;

  margin-top: 28px;

  min-height: 92px;

  padding: 17px 18px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 15px;

  align-items: center;

  overflow: hidden;

  border-radius: 13px;

  border:
    1px solid
    rgba(95, 168, 224, .18);

  background:
    linear-gradient(
      145deg,
      rgba(21, 42, 67, .8),
      rgba(10, 24, 40, .85)
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.footer-cta-card::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(49, 157, 230, .10),
      transparent 40%
    );

  pointer-events: none;
}


.footer-cta-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(95, 194, 251, .35);

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.22);
}


.footer-cta-icon {
  width: 50px;
  height: 50px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(60, 175, 249, .28);

  background:
    rgba(23, 106, 173, .12);

  color: #43c1ff;
}


.footer-cta-icon svg {
  width: 20px;
  height: 20px;
}


.footer-cta-card strong {
  display: block;

  color: #f1f5f8;

  font-size: 14px;
}


.footer-cta-card small {
  display: block;

  margin-top: 4px;

  color: #8193a6;

  font-size: 10px;
}


.footer-cta-arrow {
  width: 16px;
  height: 16px;

  color: #7dbfe8;
}


/* ==========================================================
   CONTACT GRID
========================================================== */

.footer-contact-grid {
  display: grid;

  grid-template-columns:
    .95fr .9fr 1fr 1fr;

  border-top:
    1px solid
    rgba(120, 160, 200, .15);

  border-bottom:
    1px solid
    rgba(120, 160, 200, .15);
}


.footer-contact-grid > * {
  min-height: 170px;

  padding:
    45px 56px;

  display: flex;

  align-items: center;

  gap: 18px;
}


.footer-contact-grid > * + * {
  border-left:
    1px solid
    rgba(120, 160, 200, .14);
}


.footer-contact-icon {
  width: 53px;
  height: 53px;

  display: grid;

  place-items: center;

  flex: 0 0 53px;

  border-radius: 13px;

  border:
    1px solid
    rgba(91, 166, 223, .18);

  background:
    linear-gradient(
      145deg,
      rgba(19, 42, 66, .65),
      rgba(8, 21, 35, .75)
    );

  color: #45bdf7;
}


.footer-contact-icon svg {
  width: 20px;
  height: 20px;
}


.footer-contact-label {
  display: block;

  margin-bottom: 9px;

  color: #5dcaff;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.8px;
}


.footer-contact-item a {
  color: #e1e7ed;

  font-size: 14px;

  font-weight: 600;
}


.footer-contact-item a:hover {
  color: #69ccfb;
}


.footer-address-item address {
  color: #d5dde5;

  font-size: 13px;

  line-height: 1.65;

  font-style: normal;
}


/* ==========================================================
   SOCIAL
========================================================== */

.footer-social-item {
  display: flex;
}


.footer-social-links {
  display: flex;

  gap: 8px;
}


.footer-social-links a {
  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  border:
    1px solid
    rgba(104, 163, 214, .2);

  color: #9eb2c6;

  background:
    rgba(8, 19, 31, .5);

  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease;
}


.footer-social-links a:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(105, 200, 250, .35);

  background:
    rgba(29, 64, 94, .35);
}


.footer-social-links svg {
  width: 18px;
  height: 18px;
}


.footer-social-links .linkedin {
  color: #54baf7;

  font-size: 15px;

  font-weight: 800;
}


.footer-social-links .instagram:hover {
  color: #d76cff;
}


.footer-social-links .facebook span {
  font-family: Arial, sans-serif;

  font-size: 20px;

  font-weight: 800;

  color: #5aa6ff;
}


.footer-social-links .x-social {
  color: #dbe6ef;
}


.footer-social-links .x-social svg {
  width: 16px;
  height: 16px;
}


/* ==========================================================
   BOTTOM
========================================================== */

.footer-bottom {
  min-height: 92px;

  padding:
    0 56px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;
}


.footer-bottom p,
.footer-bottom a {
  color: #7f90a3;

  font-size: 11px;
}


.footer-bottom > div {
  display: flex;

  align-items: center;

  gap: 22px;
}


.footer-bottom > div span {
  width: 1px;
  height: 17px;

  background:
    rgba(130, 160, 190, .36);
}


.footer-bottom a:hover {
  color: #67cafa;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width: 1100px) {

  .footer-top-grid {
    grid-template-columns:
      1.2fr 1fr 1fr;

    row-gap: 45px;
  }


  .footer-cta-column {
    grid-column:
      1 / -1;

    border-left: 0 !important;

    padding-left: 0 !important;

    padding-top: 35px;

    border-top:
      1px solid
      rgba(120,160,200,.14);
  }


  .footer-cta-card {
    max-width:
      520px;
  }


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


  .footer-contact-grid > *:nth-child(3) {
    border-left: 0;
    border-top:
      1px solid
      rgba(120,160,200,.14);
  }


  .footer-contact-grid > *:nth-child(4) {
    border-top:
      1px solid
      rgba(120,160,200,.14);
  }

}


@media(max-width: 760px) {

  .footer-premium {
    padding-top:
      55px;
  }


  .footer-shell {
    border-radius:
      18px;
  }


  .footer-top-grid {
    grid-template-columns:
      1fr;

    padding:
      38px 26px;
  }


  .footer-top-grid > * + * {
    border-left: 0;

    padding-left: 0;

    padding-top: 30px;

    border-top:
      1px solid
      rgba(120,160,200,.14);
  }


  .footer-brand-block {
    padding-right: 0;
  }


  .footer-brand-art {
    display: none;
  }


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


  .footer-contact-grid > * {
    min-height: auto;

    padding:
      28px 26px;
  }


  .footer-contact-grid > * + * {
    border-left: 0;

    border-top:
      1px solid
      rgba(120,160,200,.14);
  }


  .footer-bottom {
    min-height: auto;

    padding:
      26px;

    flex-direction: column;

    align-items: flex-start;
  }

}
.footer-social-links .instagram {
  color: #b7c4d2;
}

.footer-social-links .instagram svg {
  width: 18px;
  height: 18px;
}

.footer-social-links .instagram:hover {
  color: #d76cff;
}
/* ==========================================================
   MOBILE NAV + HERO FIX
========================================================== */

@media (max-width: 768px) {

  /* =========================
     HEADER
  ========================= */

  .header {
    padding: 14px 0 0;
  }

  .nav-shell {
    min-height: 64px;

    padding: 0 16px;

    border-radius: 18px;
  }

  .brand {
    gap: 10px;
  }

  .brand strong {
    font-size: 22px;
  }

  .brand-mark {
    transform: scale(.9);
    transform-origin: left center;
  }

  .desktop-nav,
  .nav-cta {
    display: none !important;
  }


  /* =========================
     MOBILE MENU BUTTON
  ========================= */

  .mobile-toggle {
    width: 44px;
    height: 44px;

    display: flex !important;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: transparent;

    cursor: pointer;
  }

  .mobile-toggle span {
    display: block;

    width: 25px;
    height: 2px;

    border-radius: 4px;

    background: #f4f7fb;

    transition:
      transform .3s ease,
      opacity .3s ease;
  }


  /* optional hamburger -> X */
  body.menu-open .mobile-toggle span:nth-child(1) {
    transform:
      translateY(7px)
      rotate(45deg);
  }

  body.menu-open .mobile-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .mobile-toggle span:nth-child(3) {
    transform:
      translateY(-7px)
      rotate(-45deg);
  }


  /* =========================
     MOBILE MENU PANEL
  ========================= */

  .mobile-menu {
    position: absolute;

    left: 14px;
    right: 14px;
    top: calc(100% + 10px);

    z-index: 100;

    display: grid;

    gap: 4px;

    padding: 12px;

    border-radius: 16px;

    border:
      1px solid rgba(110, 176, 226, .18);

    background:
      rgba(8, 16, 28, .97);

    backdrop-filter: blur(18px);

    box-shadow:
      0 24px 60px rgba(0,0,0,.35);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;
  }

  .mobile-menu.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
  }

  .mobile-menu a {
    padding: 13px 14px;

    border-radius: 10px;

    color: #dbe5ef;

    font-size: 14px;
    font-weight: 600;
  }

  .mobile-menu a:hover {
    background:
      rgba(105,200,250,.06);
  }


  /* =========================
     HERO
  ========================= */

  .hero {
    min-height: auto;

    padding:
      118px 0 62px;

    overflow: hidden;
  }

  .hero-layout {
    display: grid;

    grid-template-columns: 1fr !important;

    gap: 42px;

    align-items: start;
  }

  .hero-copy {
    width: 100%;

    padding-left: 0;
  }

  .hero-eyebrow {
    margin-bottom: 20px;

    font-size: 10px;

    line-height: 1.35;

    letter-spacing: 1.6px;
  }


  /* headline no longer super narrow */
  .hero-copy h1 {
    max-width: 100%;

    font-size:
      clamp(46px, 12vw, 62px);

    line-height: .99;

    letter-spacing: -2.8px;
  }

  .hero-changing-line {
    display: block;

    margin-top: 5px;
  }

  #heroWord {
    display: inline;
  }


  /* description */
  .hero-description {
    max-width: 100%;

    margin-top: 23px;

    font-size: 15px;

    line-height: 1.65;
  }


  /* buttons */
  .hero-actions {
    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 25px;
  }

  .hero-primary,
  .hero-secondary {
    width: 100%;

    min-height: 54px;

    justify-content: center;
  }


  /* proof row */
  .hero-proof {
    gap: 9px 14px;

    margin-top: 20px;
  }

  .hero-proof span {
    font-size: 10px;
  }


  /* =========================
     DASHBOARD UNDER HERO
  ========================= */

  .hero-dashboard-wrap {
    width: 100%;
    max-width: none;

    margin: 0;

    padding: 0;

    perspective: none;
  }

  .hero-dashboard-wrap::after {
    display: none;
  }

  .dashboard-card {
    width: 100%;

    transform: none !important;

    border-radius: 18px;

    padding: 20px;

    overflow: hidden;
  }

  .dashboard-head {
    padding-bottom: 15px;
  }

  .dashboard-head h3 {
    font-size: 20px;
  }

  .dashboard-overview {
    padding: 17px 0;
  }

  .dashboard-overview strong {
    font-size: 36px;
  }

  .activity-row {
    padding: 12px 6px;
  }

  .activity-copy strong {
    font-size: 11px;
  }

  .activity-copy span {
    font-size: 9px;
  }

  .dashboard-metrics {
    grid-template-columns:
      repeat(3, 1fr);

    gap: 7px;

    margin-top: 13px;
  }

  .dashboard-metrics > div {
    min-height: 66px;

    padding: 10px;
  }

  .dashboard-metrics span {
    font-size: 8px;
  }

  .dashboard-metrics strong {
    font-size: 18px;
  }


  /* floating chips shouldn't escape screen */
  .floating-chip {
    position: static !important;

    transform: none !important;

    width: fit-content;

    margin-top: 10px;
  }

  .floating-chip.response {
    margin-left: auto;
  }

  .floating-chip.crm {
    margin-right: auto;
  }

}
/* ==========================================================
   MOBILE NAV — PUT MENU ICON ON RIGHT
========================================================== */

@media (max-width: 768px) {

  .nav-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 0 16px;
  }

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

    margin-right: auto;
  }

  .mobile-toggle {
    margin-left: auto;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: flex !important;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 0px;

    padding: 0;

    border: 0;

    background: transparent;
  }

  .mobile-toggle span {
    width: 24px;
    height: 2px;

    display: block;

    border-radius: 10px;

    background: #ffffff;
  }

}

@media (max-width: 768px) {

  .mobile-toggle {
    position: relative !important;

    width: 46px;
    height: 46px;

    margin-left: auto !important;
    margin-right: 0 !important;

    flex: 0 0 46px;

    display: flex !important;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    z-index: 200;
  }


  /* normal hamburger */
  .mobile-toggle span {
    position: absolute;

    left: 50%;

    width: 25px;
    height: 2px;

    border-radius: 10px;

    background: #f4f7fb;

    transform:
      translateX(-50%);

    transition:
      opacity .2s ease;
  }


  .mobile-toggle span:nth-child(1) {
    top: 14px;
  }

  .mobile-toggle span:nth-child(2) {
    top: 22px;
  }

  .mobile-toggle span:nth-child(3) {
    top: 30px;
  }


  /* hide hamburger when open */
  body.menu-open
  .mobile-toggle span {
    opacity: 0;
  }


  /* perfect X */
  .mobile-toggle::before,
  .mobile-toggle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 27px;
    height: 2px;

    border-radius: 10px;

    background: #ffffff;

    opacity: 0;

    transition:
      opacity .22s ease,
      transform .28s ease;
  }


  body.menu-open
  .mobile-toggle::before {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      rotate(45deg);
  }


  body.menu-open
  .mobile-toggle::after {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      rotate(-45deg);
  }

}
@media (max-width: 768px) {

  .mobile-services {
    width: 100%;
  }


  .mobile-parent-link {
    width: 100%;

    min-height: 54px;

    padding: 0 16px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 0;

    border-radius: 11px;

    background: transparent;

    color: #e7edf5;

    font: inherit;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
      background .22s ease,
      color .22s ease;
  }


  .mobile-parent-link:hover,
  .mobile-parent-link.active {
    background:
      rgba(105, 200, 250, .07);

    color: #ffffff;
  }


  .services-chevron {
    width: 17px;
    height: 17px;

    color: #8fa2b8;

    transition:
      transform .3s ease,
      color .3s ease;
  }


  .mobile-parent-link.active
  .services-chevron {
    transform:
      rotate(180deg);

    color: #6ecdfb;
  }


  /* CLOSED BY DEFAULT */
  .mobile-submenu {
    display: grid;

    grid-template-rows: 0fr;

    margin: 0 10px;

    opacity: 0;

    visibility: hidden;

    transition:
      grid-template-rows .32s ease,
      opacity .25s ease,
      margin .3s ease,
      visibility .25s ease;
  }


  .mobile-submenu::before {
    content: "";

    min-height: 0;
  }


  .mobile-submenu.open {
    grid-template-rows: 1fr;

    margin:
      4px 10px 10px;

    opacity: 1;

    visibility: visible;
  }


  .mobile-submenu {
    overflow: hidden;
  }


  .mobile-submenu a {
    display: block;

    min-height: 47px;

    padding:
      13px 16px 13px 22px;

    border-left:
      1px solid
      rgba(104, 200, 250, .18);

    color: #9dacc0;

    font-size: 13px;
    font-weight: 600;

    background: transparent;

    transition:
      color .2s ease,
      background .2s ease,
      padding-left .2s ease;
  }


  .mobile-submenu a:hover {
    padding-left: 27px;

    color: #ffffff;

    background:
      linear-gradient(
        90deg,
        rgba(105, 200, 250, .055),
        transparent
      );
  }

}
@media (max-width: 768px) {

  .mobile-menu-inner {
    padding: 16px;
  }

  /* =========================
     SERVICES MAIN ROW
  ========================= */

  .mobile-services {
    width: 100%;
  }

  .mobile-parent-link {
    width: 100%;
    min-height: 56px;

    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: #f1f4f8;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
      background .25s ease,
      color .25s ease;
  }

  .mobile-parent-link.active {
    background:
      linear-gradient(
        90deg,
        rgba(73, 151, 218, .13),
        rgba(51, 79, 142, .05)
      );
  }


  /* chevron built with CSS */
  .services-chevron {
    width: 10px;
    height: 10px;

    border-right: 2px solid #a8b6c8;
    border-bottom: 2px solid #a8b6c8;

    transform: rotate(45deg);

    transition:
      transform .28s ease;
  }

  .mobile-parent-link.active
  .services-chevron {
    transform: rotate(225deg);
  }


  /* =========================
     SERVICES SUBMENU
  ========================= */

  .mobile-submenu {
    max-height: 0;
    overflow: hidden;

    opacity: 0;

    padding-left: 12px;

    transition:
      max-height .35s ease,
      opacity .25s ease,
      padding .3s ease;
  }

  .mobile-submenu.open {
    max-height: 260px;

    opacity: 1;

    padding-top: 7px;
    padding-bottom: 9px;
  }

  .mobile-submenu a {
    position: relative;

    min-height: 46px;

    display: flex;
    align-items: center;

    padding:
      0 15px 0 22px;

    border-left:
      1px solid
      rgba(105, 200, 250, .17);

    color: #9eafc2;

    font-size: 13px;
    font-weight: 600;

    transition:
      color .2s ease,
      padding-left .2s ease,
      background .2s ease;
  }

  .mobile-submenu a:hover {
    padding-left: 27px;

    color: #ffffff;

    background:
      linear-gradient(
        90deg,
        rgba(105,200,250,.055),
        transparent
      );
  }


  /* =========================
     NORMAL MENU LINKS
  ========================= */

  .mobile-main-links {
    margin-top: 8px;

    display: grid;
  }

  .mobile-main-links a {
    min-height: 54px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    border-radius: 10px;

    color: #e1e8f0;

    font-size: 15px;
    font-weight: 700;

    transition:
      color .2s ease,
      background .2s ease;
  }

  .mobile-main-links a:hover {
    color: #ffffff;

    background:
      rgba(105,200,250,.05);
  }


  /* =========================
     CTA
  ========================= */

  .mobile-menu-cta {
    width: 100%;

    min-height: 56px;

    margin-top: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 11px;

    color: #071019 !important;

    background:
      linear-gradient(
        135deg,
        #a6e2ff,
        #68c8fa
      ) !important;

    font-size: 15px;
    font-weight: 800;
  }

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

  flex-shrink: 0;

  text-decoration: none;
}

.brand-logo {
  display: block;

  width: auto;
  height: 54px;

  max-width: 190px;

  object-fit: contain;
}


/* Mobile */
@media (max-width: 768px) {

  .brand-logo {
    height: 38px;
    max-width: 160px;
  }

}


/* Small phones */
@media (max-width: 480px) {

  .brand-logo {
    height: 34px;
    max-width: 145px;
  }

}

/* ==========================================================
   HOME — INTEGRATED REVENUE GROWTH
========================================================== */

.home-growth-model {

  padding: 86px 0;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(32,108,167,.09),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 15%,
      rgba(92,72,190,.07),
      transparent 28%
    ),
    #06101a;

}


/* HEADING */

.home-growth-head {

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  gap: 62px;

  align-items: end;

  margin-bottom: 38px;

}


.home-growth-head h2 {

  margin: 14px 0 0;

  color: #f0f4f7;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(36px, 3.7vw, 52px);

  line-height: 1.04;

  letter-spacing: -2.4px;

}


.home-growth-head h2 span {

  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #65c8fa,
      #73b6ff 48%,
      #9185ff
    );

  -webkit-background-clip: text;
  background-clip: text;

}


.home-growth-head > p {

  max-width: 555px;

  margin: 0;

  color: #8fa2b4;

  font-size: 13px;

  line-height: 1.75;

}



/* MASTER SHELL */

.home-growth-shell {

  overflow: hidden;

  border-radius: 20px;

  border:
    1px solid
    rgba(125,170,207,.13);

  background:
    linear-gradient(
      145deg,
      #101c2c,
      #08111a
    );

}



/* SERVICE CARDS */

.home-growth-services {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

}


.home-growth-card {

  min-height: 300px;

  padding: 26px;

  display: flex;

  flex-direction: column;

  border-right:
    1px solid
    rgba(125,170,207,.1);

  transition:
    background .25s ease,
    transform .25s ease;

}


.home-growth-card:last-child {

  border-right: 0;

}


.home-growth-card:hover {

  background:
    rgba(101,200,250,.025);

}


.home-growth-card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

}


.home-growth-code {

  min-height: 26px;

  padding: 0 12px;

  display: inline-flex;

  align-items: center;

  border-radius: 100px;

  color: #dff4ff;

  background:
    linear-gradient(
      135deg,
      #2f7fe1,
      #5266ea
    );

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;

}


.home-growth-marketing
.home-growth-code {

  background:
    linear-gradient(
      135deg,
      #7356da,
      #8e5be7
    );

}


.home-growth-ai
.home-growth-code {

  background:
    linear-gradient(
      135deg,
      #138f9e,
      #0a7c87
    );

}


.home-growth-icon {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  color: #65c8fa;

  border:
    1px solid
    rgba(101,200,250,.13);

  background:
    rgba(101,200,250,.035);

}


.home-growth-marketing
.home-growth-icon {

  color: #998cff;

}


.home-growth-ai
.home-growth-icon {

  color: #5dd9c8;

}


.home-growth-icon svg {

  width: 18px;

}


.home-growth-card > small {

  color: #67c9f8;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.15px;

}


.home-growth-marketing > small {

  color: #998cff;

}


.home-growth-ai > small {

  color: #5dd9c8;

}


.home-growth-card h3 {

  margin: 10px 0 0;

  max-width: 315px;

  color: #edf3f7;

  font-family: "Manrope", sans-serif;

  font-size: 18px;

  line-height: 1.32;

}


.home-growth-card p {

  margin: 9px 0 0;

  color: #7f93a5;

  font-size: 10px;

  line-height: 1.68;

}


.home-growth-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 18px;

}


.home-growth-tags span {

  padding: 5px 8px;

  border-radius: 100px;

  color: #70869a;

  border:
    1px solid
    rgba(125,170,207,.09);

  font-size: 7px;

}


.home-growth-link {

  width: fit-content;

  margin-top: auto;

  padding-top: 20px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: #65c8fa;

  text-decoration: none;

  font-size: 9px;

  font-weight: 700;

}


.home-growth-link svg {

  width: 12px;

  transition:
    transform .2s ease;

}


.home-growth-link:hover svg {

  transform:
    translate(2px,-2px);

}


.home-growth-marketing
.home-growth-link {

  color: #9b8cff;

}


.home-growth-ai
.home-growth-link {

  color: #5dd9c8;

}



/* ENGINE */

.home-growth-engine {

  min-height: 210px;

  display: grid;

  grid-template-columns:
    .8fr .65fr 1.2fr;

  align-items: center;

  gap: 35px;

  padding:
    27px 30px;

  border-top:
    1px solid
    rgba(125,170,207,.1);

  background:
    linear-gradient(
      90deg,
      #0d1927,
      #0b1724
    );

}


.home-growth-engine-title > span {

  color: #65c8fa;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.2px;

}


.home-growth-engine-title h3 {

  margin: 8px 0 0;

  color: #dfe8ee;

  font-family: "Manrope", sans-serif;

  font-size: 24px;

  line-height: 1.17;

}


.home-growth-engine-title h3 strong {

  display: block;

  color: #65c8fa;

  font-weight: 700;

}


.home-growth-engine-center {

  display: grid;

  place-items: center;

}


.home-growth-engine-core {

  width: 135px;

  height: 135px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(101,200,250,.24);

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(101,200,250,.13),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #123a61,
      #081c31
    );

  box-shadow:
    0 0 0 7px
    rgba(101,200,250,.025);

}


.home-growth-engine-core svg {

  width: 25px;

  color: #75d4ff;

}


.home-growth-engine-core span {

  margin-top: 8px;

  color: #7fcff4;

  font-size: 7px;

  letter-spacing: 1px;

}


.home-growth-engine-core strong {

  display: block;

  margin-top: 4px;

  color: #e9f4fa;

  font-size: 11px;

}


.home-growth-foundation {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 8px;

}


.home-growth-foundation div {

  min-height: 62px;

  padding: 13px;

  display: flex;

  align-items: center;

  gap: 9px;

  border-radius: 9px;

  border:
    1px solid
    rgba(125,170,207,.08);

  background:
    rgba(255,255,255,.012);

}


.home-growth-foundation svg {

  width: 17px;

  color: #65c8fa;

}


.home-growth-foundation span {

  color: #93a6b6;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .7px;

}



/* JOURNEY */

.home-growth-journey {

  min-height: 104px;

  padding:
    20px 28px;

  display: grid;

  grid-template-columns:
    .6fr 1.4fr;

  gap: 30px;

  align-items: center;

  border-top:
    1px solid
    rgba(125,170,207,.09);

  background:
    #09131f;

}


.home-growth-journey-copy span {

  display: block;

  color: #65c8fa;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.1px;

}


.home-growth-journey-copy strong {

  display: block;

  margin-top: 5px;

  color: #dce7ee;

  font-size: 14px;

}


.home-growth-steps {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

}


.home-growth-steps > div {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 5px;

}


.home-growth-steps > div svg {

  width: 31px;

  height: 31px;

  padding: 8px;

  border-radius: 50%;

  color: #69c8f5;

  border:
    1px solid
    rgba(101,200,250,.12);

  background:
    rgba(101,200,250,.025);

}


.home-growth-steps > div span {

  color: #8397a8;

  font-size: 7px;

}


.home-growth-steps > svg {

  width: 13px;

  color: #3e6178;

}



/* TABLET */

@media
(max-width: 1100px) {

  .home-growth-head {

    grid-template-columns: 1fr;

    gap: 20px;

  }


  .home-growth-services {

    grid-template-columns: 1fr;

  }


  .home-growth-card {

    min-height: auto;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(125,170,207,.1);

  }


  .home-growth-engine {

    grid-template-columns:
      1fr;

    text-align: center;

  }


  .home-growth-foundation {

    max-width: 520px;

    margin: auto;

  }


  .home-growth-journey {

    grid-template-columns: 1fr;

  }

}



/* MOBILE */

@media
(max-width: 768px) {

  .home-growth-model {

    padding: 72px 0;

  }


  .home-growth-head {

    margin-bottom: 30px;

  }


  .home-growth-head h2 {

    font-size:
      clamp(36px,10vw,48px);

  }


  .home-growth-card {

    padding: 22px;

  }


  .home-growth-engine {

    padding:
      25px 20px;

  }


  .home-growth-foundation {

    grid-template-columns: 1fr 1fr;

  }


  .home-growth-journey {

    padding:
      20px;

  }


  .home-growth-steps {

    display: grid;

    grid-template-columns:
      repeat(5,1fr);

  }


  .home-growth-steps > svg {

    display: none;

  }

}



/* SMALL MOBILE */

@media
(max-width: 480px) {

  .home-growth-foundation {

    grid-template-columns: 1fr;

  }


  .home-growth-steps {

    grid-template-columns:
      repeat(3,1fr);

    row-gap: 16px;

  }

}

/* ==========================================================
   HOMEPAGE HERO SLIDER
   IMPORTANT: KEEP AT VERY END OF style.css
========================================================== */


/* ==========================================================
   HERO BASE
========================================================== */

.hero.hero-slider {

  position: relative;

  min-height: 780px;

  padding: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(24,76,125,.27),
      transparent 35%
    ),
    radial-gradient(
      circle at 88% 14%,
      rgba(74,92,188,.10),
      transparent 32%
    ),
    linear-gradient(
      140deg,
      #07111c 0%,
      #030608 50%,
      #06101a 100%
    );

}


.hero-slider-track {

  position: relative;

  z-index: 2;

  min-height: 780px;

}



/* ==========================================================
   INDIVIDUAL SLIDES
========================================================== */

.hero-slide {

  position: absolute;

  inset: 0;

  width: 100%;

  min-height: 780px;

  padding:
    145px 0 72px;

  display: flex;

  align-items: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(38px);

  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.22,.61,.36,1),
    visibility .75s;

}


.hero-slide.active {

  position: relative;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(0);

}


.hero-slide.leaving-left {

  opacity: 0;

  transform:
    translateX(-36px);

}


.hero-slide.entering-right {

  transform:
    translateX(36px);

}



/* ==========================================================
   STABLE LAYOUT
========================================================== */

.hero-slider
.hero-layout {

  width:
    var(--container);

  display: grid;

  grid-template-columns:
    .95fr 1.05fr;

  gap: 62px;

  align-items: center;

}


.hero-slider
.hero-copy h1 {

  max-width: 760px;

  margin-top: 22px;

  font-size:
    clamp(
      52px,
      5vw,
      74px
    );

  line-height: .99;

  letter-spacing: -4.4px;

}



/* ==========================================================
   SLIDE ENTRY
========================================================== */

.hero-slide-reveal,
.hero-slide-reveal-scale {

  opacity: 0;

  transform:
    translateY(17px);

  transition:
    opacity .6s ease,
    transform .6s ease;

}


.hero-slide-reveal-scale {

  transform:
    translateY(14px)
    scale(.985);

}


.hero-slide.active
.hero-slide-reveal,
.hero-slide.active
.hero-slide-reveal-scale {

  opacity: 1;

  transform:
    translateY(0)
    scale(1);

}


.hero-slide.active
.hero-slide-reveal:nth-child(2) {

  transition-delay:
    .06s;

}


.hero-slide.active
.hero-slide-reveal:nth-child(3) {

  transition-delay:
    .12s;

}


.hero-slide.active
.hero-slide-reveal:nth-child(4) {

  transition-delay:
    .18s;

}



/* ==========================================================
   SLIDE 1 — HEADLINE
========================================================== */

.hero-growth-gradient {

  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #74b7ff 45%,
      var(--violet)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}



/* ==========================================================
   GROWTH SERVICE ROW
========================================================== */

.hero-growth-services {

  max-width: 680px;

  margin-top: 24px;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 8px;

}


.hero-growth-service {

  min-height: 68px;

  padding:
    11px 12px;

  display: grid;

  grid-template-columns:
    31px 1fr auto;

  gap: 9px;

  align-items: center;

  border-radius: 10px;

  border:
    1px solid
    var(--border);

  background:
    rgba(255,255,255,.018);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;

}


.hero-growth-service:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(105,200,250,.28);

  background:
    rgba(105,200,250,.035);

}


.hero-growth-service
> span {

  width: 31px;

  height: 31px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  color:
    var(--blue);

  background:
    rgba(105,200,250,.05);

}


.hero-growth-service
> span svg {

  width: 15px;

  height: 15px;

}


.hero-growth-service small {

  display: block;

  color:
    #668094;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: .7px;

}


.hero-growth-service strong {

  display: block;

  margin-top: 3px;

  color:
    #dce6ed;

  font-size: 9px;

  line-height: 1.3;

}


.hero-growth-service
> svg {

  width: 11px;

  color:
    #647f93;

}



/* ==========================================================
   GROWTH PROOF
========================================================== */

.hero-growth-proof {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 23px;

}


.hero-growth-proof span {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    #8294a6;

  font-size: 10px;

}


.hero-growth-proof span svg {

  width: 13px;

  color:
    #69aac9;

}


.hero-growth-proof > i {

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background:
    #536170;

}



/* ==========================================================
   SLIDE 1 RIGHT VISUAL
========================================================== */

.hero-growth-visual {

  position: relative;

  padding:
    10px 0 10px 10px;

}


.hero-growth-visual::before {

  content: "";

  position: absolute;

  width: 78%;

  height: 80%;

  top: 10%;

  left: 12%;

  border-radius: 50%;

  background:
    rgba(80,117,235,.12);

  filter:
    blur(90px);

  pointer-events: none;

}


.growth-dashboard-card {

  position: relative;

  z-index: 2;

  min-height: 560px;

  padding: 27px;

  overflow: hidden;

  border-radius: 23px;

  border:
    1px solid
    rgba(105,200,250,.17);

  background:
    radial-gradient(
      circle at 75% 12%,
      rgba(87,80,190,.09),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(15,29,47,.98),
      rgba(7,14,23,.98)
    );

  box-shadow:
    0 50px 110px
    rgba(0,0,0,.42);

}


.growth-dashboard-card::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .04;

  background-image:
    linear-gradient(
      rgba(105,200,250,.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(105,200,250,.12) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;

}


.growth-dashboard-shine {

  position: absolute;

  width: 300px;

  height: 650px;

  top: -190px;

  left: -330px;

  transform:
    rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.026),
      transparent
    );

  animation:
    growthDashboardShine
    7s ease-in-out infinite;

}


@keyframes growthDashboardShine {

  0%,
  62% {

    left:
      -330px;

  }

  82% {

    left:
      120%;

  }

  100% {

    left:
      120%;

  }

}



/* ==========================================================
   GROWTH DASHBOARD HEADER
========================================================== */

.growth-dashboard-head {

  position: relative;

  z-index: 3;

  padding-bottom: 18px;

  display: flex;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    var(--border);

}


.growth-dashboard-head small {

  color:
    var(--blue);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.5px;

}


.growth-dashboard-head h3 {

  margin-top: 6px;

  font-size: 20px;

}



/* ==========================================================
   WORLD / NETWORK
========================================================== */

.growth-world {

  position: relative;

  z-index: 3;

  height: 285px;

  margin-top: 18px;

  overflow: hidden;

  border-radius: 15px;

  border:
    1px solid
    rgba(155,187,218,.08);

  background:
    radial-gradient(
      circle at center,
      rgba(33,103,162,.12),
      transparent 45%
    ),
    rgba(4,12,20,.35);

}


.growth-world-grid {

  position: absolute;

  inset: 0;

  opacity: .05;

  background-image:
    linear-gradient(
      rgba(105,200,250,.13) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(105,200,250,.13) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

}


.growth-orbit {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(105,200,250,.12);

}


.orbit-one {

  width: 110px;

  height: 110px;

}


.orbit-two {

  width: 205px;

  height: 205px;

}


.orbit-three {

  width: 310px;

  height: 310px;

  opacity: .7;

}


.growth-globe-core {

  position: absolute;

  z-index: 6;

  left: 50%;

  top: 50%;

  width: 82px;

  height: 82px;

  transform:
    translate(-50%,-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color:
    var(--blue);

  border:
    1px solid
    rgba(105,200,250,.23);

  background:
    linear-gradient(
      145deg,
      #10365a,
      #071a2c
    );

  box-shadow:
    0 0 40px
    rgba(105,200,250,.08);

}


.growth-globe-core svg {

  width: 26px;

}


.growth-globe-core span {

  margin-top: 5px;

  color:
    #9cdcff;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1px;

}


.growth-network-lines {

  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;

  height: 100%;

}


.growth-network-lines path {

  fill: none;

  stroke:
    rgba(105,200,250,.23);

  stroke-width: 1;

  stroke-dasharray:
    5 6;

  animation:
    networkDash
    9s linear infinite;

}


@keyframes networkDash {

  to {

    stroke-dashoffset:
      -70;

  }

}


.growth-node {

  position: absolute;

  z-index: 7;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    #899dae;

  font-size: 7px;

  letter-spacing: .7px;

}


.growth-node i {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    var(--cyan);

  box-shadow:
    0 0 0 5px
    rgba(93,217,200,.06);

  animation:
    growthNodePulse
    1.8s infinite;

}


@keyframes growthNodePulse {

  50% {

    box-shadow:
      0 0 0 9px
      rgba(93,217,200,0);

  }

}


.node-us {

  left: 13%;

  top: 19%;

}


.node-uk {

  right: 15%;

  top: 25%;

}


.node-india {

  right: 11%;

  bottom: 19%;

}


.node-apac {

  left: 17%;

  bottom: 16%;

}



/* ==========================================================
   CAPABILITY STRIP
========================================================== */

.growth-capability-strip {

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 9px;

  margin-top: 14px;

}


.growth-capability-strip > div {

  min-height: 74px;

  padding: 12px;

  display: grid;

  grid-template-columns:
    34px 1fr;

  column-gap: 9px;

  align-items: center;

  border-radius: 10px;

  border:
    1px solid
    rgba(155,187,218,.08);

  background:
    rgba(255,255,255,.015);

}


.growth-capability-strip-icon {

  grid-row:
    1 / span 2;

  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  color:
    var(--blue);

  background:
    rgba(105,200,250,.05);

}


.growth-capability-strip-icon svg {

  width: 15px;

}


.growth-capability-strip small {

  align-self: end;

  color:
    #61788c;

  font-size: 6px;

  letter-spacing: .8px;

}


.growth-capability-strip strong {

  align-self: start;

  color:
    #cbd6de;

  font-size: 8px;

}



/* ==========================================================
   DASHBOARD FOOTER
========================================================== */

.growth-dashboard-footer {

  position: relative;

  z-index: 3;

  margin-top: 15px;

  padding-top: 14px;

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  border-top:
    1px solid
    rgba(155,187,218,.08);

}


.growth-dashboard-footer span {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color:
    #6e8295;

  font-size: 7px;

}


.growth-dashboard-footer svg {

  width: 11px;

  color:
    var(--cyan);

}



/* ==========================================================
   FLOATING CHIPS
========================================================== */

.growth-chip-one {

  left:
    -26px;

  bottom:
    72px;

  color:
    var(--cyan);

}


.growth-chip-two {

  right:
    -10px;

  top:
    80px;

  color:
    var(--blue);

  animation-delay:
    .8s;

}



/* ==========================================================
   SLIDER CONTROLS
========================================================== */

.hero-slider-controls {

  position: absolute;

  z-index: 25;

  left: 50%;

  bottom: 26px;

  transform:
    translateX(-50%);

  padding:
    6px;

  display: flex;

  align-items: center;

  gap: 5px;

  border-radius: 100px;

  border:
    1px solid
    rgba(155,187,218,.10);

  background:
    rgba(4,9,14,.72);

  backdrop-filter:
    blur(12px);

}


.hero-slider-dot {

  min-height: 30px;

  padding:
    0 10px;

  display: flex;

  align-items: center;

  gap: 7px;

  border: 0;

  border-radius: 100px;

  color:
    #627587;

  background:
    transparent;

  cursor: pointer;

  transition:
    .25s ease;

}


.hero-slider-dot > span {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background:
    #465666;

  transition:
    .25s ease;

}


.hero-slider-dot small {

  max-width: 0;

  overflow: hidden;

  white-space: nowrap;

  opacity: 0;

  font-size: 8px;

  transition:
    max-width .3s ease,
    opacity .3s ease;

}


.hero-slider-dot.active {

  color:
    #b6d9ed;

  background:
    rgba(105,200,250,.05);

}


.hero-slider-dot.active
> span {

  background:
    var(--cyan);

  box-shadow:
    0 0 0 5px
    rgba(93,217,200,.06);

}


.hero-slider-dot.active
small {

  max-width:
    110px;

  opacity: 1;

}



/* ==========================================================
   AUTO PROGRESS
========================================================== */

.hero-slider-progress {

  position: absolute;

  z-index: 24;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 2px;

  overflow: hidden;

  background:
    rgba(255,255,255,.025);

}


.hero-slider-progress span {

  display: block;

  width: 0;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--violet)
    );

}


.hero-slider-progress span.running {

  animation:
    heroSliderProgress
    7s linear forwards;

}


@keyframes heroSliderProgress {

  from {

    width: 0;

  }

  to {

    width: 100%;

  }

}



/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px) {

  .hero.hero-slider,
  .hero-slider-track,
  .hero-slide {

    min-height:
      auto;

  }


  .hero-slide {

    padding:
      135px 0 82px;

  }


  .hero-slide:not(.active) {

    position:
      absolute;

  }


  .hero-slider
  .hero-layout {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .hero-slider
  .hero-copy {

    max-width:
      840px;

  }


  .hero-dashboard-wrap,
  .hero-growth-visual {

    width:
      100%;

    max-width:
      850px;

    margin:
      0 auto;

  }

}



/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:700px) {

  .hero.hero-slider {

    min-height:
      auto;

  }


  .hero-slider-track {

    min-height:
      auto;

  }


  .hero-slide {

    min-height:
      auto;

    padding:
      118px 0 88px;

  }


  .hero-slider
  .hero-layout {

    width:
      var(--container);

    display:
      grid;

    grid-template-columns:
      1fr !important;

    gap:
      36px;

  }


  .hero-slider
  .hero-copy {

    width:
      100%;

    min-width:
      0;

  }


  .hero-slider
  .hero-copy h1 {

    max-width:
      100%;

    font-size:
      clamp(
        43px,
        11.5vw,
        59px
      );

    line-height:
      1.02;

    letter-spacing:
      -3px;

  }


  .hero-growth-services {

    grid-template-columns:
      1fr;

    max-width:
      100%;

    gap:
      7px;

  }


  .hero-growth-service {

    min-height:
      61px;

  }


  .hero-growth-proof {

    gap:
      9px;

  }


  .hero-growth-proof
  > i {

    display:
      none;

  }


  .hero-growth-visual {

    padding:
      0;

  }


  .growth-dashboard-card {

    min-height:
      auto;

    padding:
      20px 16px;

    border-radius:
      18px;

  }


  .growth-world {

    height:
      230px;

  }


  .orbit-three {

    width:
      250px;

    height:
      250px;

  }


  .growth-capability-strip {

    grid-template-columns:
      1fr;

  }


  .growth-capability-strip
  > div {

    min-height:
      61px;

  }


  .growth-dashboard-footer {

    gap:
      10px;

  }


  .growth-chip-one,
  .growth-chip-two {

    display:
      none;

  }


  .hero-dashboard-wrap {

    width:
      100%;

    max-width:
      none;

    margin:
      0;

    padding:
      0;

    perspective:
      none;

  }


  .hero-dashboard-wrap::after {

    display:
      none;

  }


  .hero-slider
  .dashboard-card {

    width:
      100%;

    transform:
      none !important;

  }


  .hero-slider-controls {

    bottom:
      24px;

  }


  .hero-slider-dot {

    padding:
      0 8px;

  }


  .hero-slider-dot small {

    display:
      none;

  }


  .hero-actions {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .hero-actions
  .btn {

    width:
      100%;

  }

}



/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:480px) {

  .hero-slider
  .hero-copy h1 {

    font-size:
      clamp(
        40px,
        11.3vw,
        52px
      );

  }


  .growth-dashboard-head h3 {

    font-size:
      17px;

  }


  .growth-world {

    height:
      205px;

  }


  .growth-node {

    font-size:
      6px;

  }


  .growth-globe-core {

    width:
      72px;

    height:
      72px;

  }

}



/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce) {

  .hero-slide,
  .hero-slide-reveal,
  .hero-slide-reveal-scale {

    transition:
      none !important;

  }


  .hero-slider-progress {

    display:
      none;

  }

}
/* ==========================================================
   MOBILE MENU — UPDATED FOR 6 SERVICE ITEMS
========================================================== */

@media (max-width: 768px) {

  /* --------------------------------------------------------
     BODY LOCK
  -------------------------------------------------------- */

  body.menu-open {
    overflow: hidden;
  }


  /* --------------------------------------------------------
     MOBILE MENU WRAPPER
  -------------------------------------------------------- */

  .mobile-menu {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9998;

    width: 100%;

    height: 100dvh;
    min-height: 100dvh;

    padding:
      116px 18px 24px;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    background:
      rgba(4, 10, 17, .98);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
      translateY(-8px);

    transition:
      opacity .25s ease,
      visibility .25s ease,
      transform .25s ease;

  }


  .mobile-menu.open {

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
      translateY(0);

  }


  /* --------------------------------------------------------
     MENU INNER PANEL
  -------------------------------------------------------- */

  .mobile-menu-inner {

    width: 100%;
    max-width: 100%;

    min-height: auto;

    margin: 0 auto;

    padding:
      18px 18px 26px;

    border-radius: 18px;

    border:
      1px solid
      rgba(105, 200, 250, .14);

    background:
      linear-gradient(
        145deg,
        #0d1928,
        #07111c
      );

    overflow: visible;

  }


  /* --------------------------------------------------------
     SERVICES BLOCK
  -------------------------------------------------------- */

  .mobile-services {

    width: 100%;

    margin: 0;

    overflow: visible;

  }


  .mobile-parent-link {

    width: 100%;

    min-height: 68px;

    padding:
      0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border: 0;

    border-radius: 14px;

    color: #f3f6f9;

    background:
      rgba(105, 200, 250, .055);

    font-family:
      "Manrope",
      sans-serif;

    font-size: 17px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;

  }


  /* --------------------------------------------------------
     CHEVRON
  -------------------------------------------------------- */

  .services-chevron {

    position: relative;

    width: 14px;
    height: 14px;

    flex-shrink: 0;

    transform:
      rotate(45deg);

    border-right:
      2px solid #9fb1c1;

    border-bottom:
      2px solid #9fb1c1;

    transition:
      transform .25s ease;

  }


  .mobile-parent-link.active
  .services-chevron {

    transform:
      rotate(225deg);

  }


  /* --------------------------------------------------------
     SUBMENU
  -------------------------------------------------------- */

  .mobile-submenu {

    width: 100%;

    max-height: 0;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transition:
      max-height .35s ease,
      opacity .25s ease,
      padding .35s ease;

  }


  .mobile-submenu.open {

    /*
      Enough room for:
      6 service links + spacing.
      Do not use a small fixed value like 260px.
    */

    max-height: 600px;

    padding:
      12px 0 8px;

    opacity: 1;

    visibility: visible;

  }


  /* --------------------------------------------------------
     SERVICE LINKS
  -------------------------------------------------------- */

  .mobile-submenu a {

    position: relative;

    width: calc(100% - 26px);

    min-height: 56px;

    margin-left: 26px;

    padding:
      0 16px;

    display: flex;

    align-items: center;

    border-radius: 11px;

    color: #aab9c7;

    background: transparent;

    border-left:
      1px solid
      rgba(105, 200, 250, .12);

    text-decoration: none;

    font-family:
      "Manrope",
      sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.35;

    transition:
      color .2s ease,
      background .2s ease,
      border-color .2s ease;

  }


  .mobile-submenu a:hover,
  .mobile-submenu a:focus-visible {

    color: #ffffff;

    background:
      rgba(105, 200, 250, .05);

    border-left-color:
      rgba(105, 200, 250, .4);

  }


  /* --------------------------------------------------------
     OTHER MENU LINKS
  -------------------------------------------------------- */

  .mobile-main-links {

    width: 100%;

    margin-top: 12px;

    display: flex;

    flex-direction: column;

    gap: 0;

  }


  .mobile-main-links a {

    width: 100%;

    min-height: 62px;

    padding:
      0 14px;

    display: flex;

    align-items: center;

    border-radius: 10px;

    color: #d9e2e9;

    text-decoration: none;

    font-family:
      "Manrope",
      sans-serif;

    font-size: 16px;

    font-weight: 700;

    transition:
      background .2s ease,
      color .2s ease;

  }


  .mobile-main-links a:hover,
  .mobile-main-links a:focus-visible {

    color: #ffffff;

    background:
      rgba(105, 200, 250, .045);

  }


  /* --------------------------------------------------------
     CTA
  -------------------------------------------------------- */

  .mobile-menu-cta {

    width: 100%;

    min-height: 60px;

    margin-top: 18px;

    padding:
      0 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 12px;

    color: #06131e;

    background:
      linear-gradient(
        135deg,
        #a9e3ff,
        #65c8fa
      );

    text-decoration: none;

    font-family:
      "Manrope",
      sans-serif;

    font-size: 15px;

    font-weight: 700;

  }


  /* --------------------------------------------------------
     HEADER MUST STAY ABOVE MENU
  -------------------------------------------------------- */

  .header {

    z-index: 9999;

  }


  .nav-shell {

    position: relative;

    z-index: 10000;

  }

}

.footer-social-links .youtube svg {
  width: 18px;
  height: 18px;
  display: block;
}

.footer-social-links .youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}