:root {
  --blue: #0868f2;
  --blue-dark: #164dcc;
  --purple: #8d45e8;
  --pink: #d862d2;

  --text: #0b1633;
  --muted: #67728a;

  --background: #ffffff;
  --soft: #f6f9ff;

  --border:
    rgba(
      30,
      82,
      170,
      0.11
    );

  --gradient:
    linear-gradient(
      110deg,
      #0877ed 0%,
      #365bd7 48%,
      #9a4de5 80%,
      #e271cb 100%
    );

  --container: 1200px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);

  background: white;

  overflow-x: hidden;

  -webkit-font-smoothing:
    antialiased;
}


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


button {
  font: inherit;
}


img {
  display: block;
  max-width: 100%;
}


.container {
  width:
    min(
      calc(100% - 48px),
      var(--container)
    );

  margin-inline: auto;
}


.section {
  padding:
    120px 0;
}



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

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}


.header.scrolled {
  background:
    rgba(
      255,
      255,
      255,
      0.86
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(
      20,
      60,
      140,
      0.08
    );

  box-shadow:
    0 10px 40px
    rgba(
      25,
      50,
      110,
      0.05
    );
}


.navbar {
  height: 110px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;
}



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

.logo {
  display: inline-flex;

  align-items: center;

  flex-shrink: 0;
}


.logo img {
  display: block;

  width: 245px;
  height: auto;

  object-fit: contain;

  background: transparent;
}



/* =========================================================
   NAV
========================================================= */

.nav {
  display: flex;

  align-items: center;

  gap: 34px;

  font-size: 0.9rem;

  font-weight: 600;
}


.nav > a {
  transition:
    color 0.2s ease;
}


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


.nav-contact {
  padding:
    12px 20px;

  border:
    1px solid
    rgba(
      45,
      95,
      220,
      0.25
    );

  border-radius: 999px;

  color: var(--blue);
}


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



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

.hero {
  position: relative;

  min-height: 900px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 85% 20%,
      rgba(
        104,
        164,
        255,
        0.22
      ),
      transparent 28%
    ),

    radial-gradient(
      circle at 5% 80%,
      rgba(
        105,
        199,
        255,
        0.12
      ),
      transparent 28%
    ),

    linear-gradient(
      120deg,
      #ffffff 8%,
      #f7faff 58%,
      #edf4ff 100%
    );
}


.hero-container {
  position: relative;

  z-index: 3;

  min-height: 900px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(430px, 0.95fr);

  align-items: center;

  gap: 70px;

  padding-top: 130px;
}


.hero-content {
  position: relative;

  z-index: 5;
}


.hero-badge {
  width: fit-content;

  margin-bottom: 28px;

  padding:
    9px 15px;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  border:
    1px solid
    rgba(
      48,
      100,
      230,
      0.15
    );

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.7
    );

  box-shadow:
    0 10px 30px
    rgba(
      30,
      80,
      160,
      0.06
    );

  color: #45607f;

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.badge-dot {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--blue);

  box-shadow:
    0 0 0
    5px
    rgba(
      30,
      112,
      245,
      0.1
    );
}


.hero h1 {
  margin: 0;

  max-width: 780px;

  font-size:
    clamp(
      3.6rem,
      6vw,
      6.1rem
    );

  line-height: 0.98;

  letter-spacing:
    -0.068em;

  font-weight: 800;
}


.hero h1 span {
  background:
    var(--gradient);

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color: transparent;
}


.hero-lead {
  max-width: 610px;

  margin:
    30px 0 0;

  color:
    var(--muted);

  font-size: 1.08rem;

  line-height: 1.8;
}


.hero-actions {
  margin-top: 35px;

  display: flex;

  gap: 13px;

  flex-wrap: wrap;
}


.button {
  min-height: 54px;

  padding:
    0 23px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  border-radius: 14px;

  font-size: 0.91rem;

  font-weight: 700;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}


.button:hover {
  transform:
    translateY(-3px);
}


.button-primary {
  color: white;

  background:
    var(--gradient);

  box-shadow:
    0 14px 35px
    rgba(
      85,
      72,
      220,
      0.2
    );
}


.button-secondary {
  border:
    1px solid
    rgba(
      26,
      71,
      150,
      0.12
    );

  background:
    rgba(
      255,
      255,
      255,
      0.8
    );

  color:
    #34435f;
}


.hero-mini-info {
  margin-top: 52px;

  display: flex;

  align-items:
    flex-start;

  gap: 34px;
}


.hero-mini-info > div {
  padding-right: 34px;

  border-right:
    1px solid
    rgba(
      33,
      72,
      130,
      0.12
    );

  display: flex;

  flex-direction:
    column;

  gap: 4px;
}


.hero-mini-info > div:last-child {
  border-right: 0;
}


.hero-mini-info strong {
  font-size: 0.9rem;
}


.hero-mini-info span {
  color: #8490a5;

  font-size: 0.76rem;
}



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

.grid-background {
  position: absolute;

  inset: 0;

  opacity: 0.22;

  background-image:

    linear-gradient(
      rgba(
        45,
        98,
        190,
        0.08
      ) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(
        45,
        98,
        190,
        0.08
      ) 1px,
      transparent 1px
    );

  background-size:
    60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 80%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 80%
    );
}


.hero-orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(4px);

  pointer-events: none;
}


.hero-orb-one {
  width: 430px;
  height: 430px;

  right: -180px;
  top: 40px;

  background:
    radial-gradient(
      circle,
      rgba(
        113,
        74,
        234,
        0.12
      ),
      transparent 67%
    );

  animation:
    floatingOrb
    9s
    ease-in-out
    infinite;
}


.hero-orb-two {
  width: 350px;
  height: 350px;

  left: -160px;
  bottom: 20px;

  background:
    radial-gradient(
      circle,
      rgba(
        43,
        156,
        255,
        0.13
      ),
      transparent 67%
    );

  animation:
    floatingOrb
    12s
    ease-in-out
    infinite
    reverse;
}


@keyframes floatingOrb {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  50% {
    transform:
      translate3d(
        30px,
        -25px,
        0
      );
  }

}



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

.hero-visual {
  position: relative;

  min-height: 600px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding-bottom: 55px;

  transition:
    transform 0.2s
    ease-out;
}


.visual-glow {
  position: absolute;

  width: 390px;

  height: 390px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(
        87,
        144,
        255,
        0.22
      ),
      transparent 67%
    );

  filter: blur(12px);
}


.main-tech-card {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      490px
    );

  padding: 28px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.8
    );

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.94
      ),
      rgba(
        239,
        245,
        255,
        0.78
      )
    );

  backdrop-filter:
    blur(24px);

  box-shadow:
    0 45px 90px
    rgba(
      37,
      77,
      155,
      0.17
    );

  transform:
    perspective(1000px)
    rotateY(-7deg)
    rotateX(3deg);

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


@keyframes dashboardFloat {

  0%,
  100% {
    transform:
      perspective(1000px)
      rotateY(-7deg)
      rotateX(3deg)
      translateY(0);
  }

  50% {
    transform:
      perspective(1000px)
      rotateY(-5deg)
      rotateX(2deg)
      translateY(-12px);
  }

}


.tech-card-header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 20px;
}


.small-label {
  color: #8291ac;

  font-size: 0.62rem;

  letter-spacing: 0.16em;

  font-weight: 700;
}


.tech-card-header h3 {
  margin:
    7px 0 0;

  font-size: 1.25rem;

  letter-spacing:
    -0.04em;
}



/* =========================================================
   SYSTEM MAP
========================================================= */

.system-map {
  margin-top: 34px;

  display: grid;
}


.system-node {
  position: relative;

  display: grid;

  grid-template-columns:
    46px 1fr;

  align-items: center;

  gap: 14px;

  min-height: 72px;

  padding:
    11px 14px;

  border:
    1px solid
    rgba(
      37,
      86,
      170,
      0.08
    );

  border-radius: 15px;

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}


.system-node:hover {
  transform:
    translateX(5px);

  background:
    rgba(
      255,
      255,
      255,
      0.8
    );

  border-color:
    rgba(
      72,
      91,
      220,
      0.18
    );
}


.node-icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  color: white;

  background:
    var(--gradient);

  font-size: 0.62rem;

  font-weight: 800;

  box-shadow:
    0 8px 20px
    rgba(
      76,
      79,
      213,
      0.18
    );
}


.system-node strong,
.system-node small {
  display: block;
}


.system-node strong {
  margin-bottom: 4px;

  color: #192743;

  font-size: 0.79rem;
}


.system-node small {
  color: #8692a7;

  font-size: 0.63rem;

  line-height: 1.45;
}


.system-connector {
  width: 1px;

  height: 15px;

  margin:
    4px
    0
    4px
    34px;

  display: block;

  background:
    linear-gradient(
      to bottom,
      rgba(
        49,
        114,
        239,
        0.65
      ),
      rgba(
        142,
        67,
        228,
        0.25
      )
    );
}



/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {
  position: absolute;

  z-index: 4;

  padding:
    15px 19px;

  display: flex;

  align-items: center;

  gap: 12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.9
    );

  border-radius: 17px;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  box-shadow:
    0 20px 45px
    rgba(
      31,
      66,
      135,
      0.13
    );

  backdrop-filter:
    blur(16px);
}


.floating-card strong,
.floating-card span {
  display: block;
}


.floating-card strong {
  margin-bottom: 3px;

  font-size: 0.76rem;
}


.floating-card span {
  color: #8a94a8;

  font-size: 0.65rem;
}


.floating-ai {
  top: 50px;

  right: -5px;

  animation:
    floatCard
    5s
    ease-in-out
    infinite;
}


.floating-data {
  bottom: 0;

  left: -30px;

  animation:
    floatCard
    6s
    ease-in-out
    infinite
    reverse;
}


@keyframes floatCard {

  0%,
  100% {
    transform:
      translateY(0);
  }

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

}


.floating-icon {
  width: 35px;
  height: 35px;

  border-radius: 10px;

  display: grid;

  place-items: center;

  color: white;

  background:
    var(--gradient);
}


.pulse {
  width: 13px;
  height: 13px;

  border-radius: 50%;

  background:
    #1974ef;

  box-shadow:
    0 0 0
    7px
    rgba(
      25,
      116,
      239,
      0.1
    );

  animation:
    pulse
    2s
    infinite;
}


@keyframes pulse {

  0% {
    box-shadow:
      0 0 0
      0
      rgba(
        25,
        116,
        239,
        0.2
      );
  }

  70% {
    box-shadow:
      0 0 0
      12px
      rgba(
        25,
        116,
        239,
        0
      );
  }

  100% {
    box-shadow:
      0 0 0
      0
      rgba(
        25,
        116,
        239,
        0
      );
  }

}



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

.wave {
  position: absolute;

  left: 0;
  bottom: -25px;

  width: 100%;
  height: 180px;

  opacity: 0.34;
}


.wave svg {
  width: 100%;
  height: 100%;
}


.wave path {
  fill: none;

  stroke:
    rgba(
      76,
      101,
      239,
      0.36
    );

  stroke-width: 1.2;
}



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

.section-title {
  max-width: 840px;

  margin-bottom: 70px;
}


.section-label {
  display: inline-block;

  margin-bottom: 17px;

  color: var(--blue);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.section-title h2,
.services-heading h2,
.solutions-copy h2,
.principle-title h2 {
  margin: 0;

  font-size:
    clamp(
      2.5rem,
      4vw,
      4.4rem
    );

  line-height: 1.04;

  letter-spacing:
    -0.06em;
}


.section-title h2 span,
.services-heading h2 span,
.solutions-copy h2 span,
.principle-title h2 span {
  background:
    var(--gradient);

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color: transparent;
}


.section-title > p {
  max-width: 660px;

  margin-top: 25px;

  color: var(--muted);

  font-size: 1rem;

  line-height: 1.75;
}



/* =========================================================
   ABOUT
========================================================= */

.about {
  background: white;
}


.features-grid {
  display: grid;

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

  gap: 18px;
}


.feature-card {
  position: relative;

  min-height: 335px;

  padding:
    31px 28px;

  overflow: hidden;

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

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfdff
    );

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


.feature-card:hover {
  transform:
    translateY(-9px);

  border-color:
    rgba(
      67,
      104,
      221,
      0.22
    );

  box-shadow:
    0 30px 60px
    rgba(
      26,
      64,
      130,
      0.1
    );
}


.feature-number {
  position: absolute;

  top: 25px;
  right: 24px;

  color: #dfe6f4;

  font-size: 0.72rem;

  font-weight: 700;
}


.feature-icon {
  width: 60px;
  height: 60px;

  margin-bottom: 42px;

  display: grid;

  place-items: center;

  border-radius: 17px;

  color: var(--blue);

  background:
    linear-gradient(
      145deg,
      #edf4ff,
      #f7efff
    );

  font-size: 1.4rem;

  font-weight: 800;
}


.feature-card h3 {
  margin:
    0 0 14px;

  font-size: 1.12rem;

  line-height: 1.35;

  letter-spacing:
    -0.035em;
}


.feature-card p {
  margin: 0;

  color: var(--muted);

  font-size: 0.87rem;

  line-height: 1.7;
}



/* =========================================================
   SOLUTIONS
========================================================= */

.solutions {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f5f8ff,
      #fbf8ff
    );
}


.solutions-container {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 100px;

  align-items: center;
}


.solutions-copy h2 span {
  display: block;
}


.solutions-copy > p {
  max-width: 560px;

  margin:
    25px
    0
    36px;

  color: var(--muted);

  line-height: 1.8;
}


.solution-list {
  display: grid;

  gap: 17px;
}


.solution-list div {
  display: flex;

  align-items: center;

  gap: 13px;
}


.solution-list div > span {
  width: 27px;
  height: 27px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background:
    var(--gradient);

  font-size: 0.7rem;
}


.solution-list p {
  margin: 0;

  font-size: 0.9rem;

  font-weight: 600;
}



/* =========================================================
   PROCESS PANEL
========================================================= */

.solutions-panel {
  position: relative;

  min-height: 540px;

  padding: 32px;

  border-radius: 32px;

  overflow: hidden;

  color: white;

  background:

    radial-gradient(
      circle at 80% 0%,
      rgba(
        111,
        57,
        255,
        0.75
      ),
      transparent 45%
    ),

    linear-gradient(
      135deg,
      #07132f 0%,
      #12164d 50%,
      #3516a9 100%
    );

  box-shadow:
    0 40px 80px
    rgba(
      25,
      35,
      100,
      0.22
    );
}


.panel-glow {
  position: absolute;

  width: 300px;
  height: 300px;

  right: -100px;
  bottom: -120px;

  border-radius: 50%;

  background:
    rgba(
      173,
      87,
      255,
      0.22
    );

  filter: blur(20px);
}


.panel-top {
  position: relative;

  z-index: 2;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-size: 0.62rem;

  letter-spacing: 0.11em;
}


.panel-dots {
  display: flex;

  gap: 5px;
}


.panel-dots i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.4
    );
}


.process-visual {
  position: relative;

  z-index: 2;

  margin-top: 55px;
}


.process-heading {
  margin-bottom: 37px;
}


.process-heading > span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(
      255,
      255,
      255,
      0.5
    );

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.18em;
}


.process-heading strong {
  display: block;

  font-size:
    clamp(
      2.3rem,
      5vw,
      4rem
    );

  line-height: 1;

  letter-spacing:
    -0.06em;
}


.process-steps {
  display: grid;
}


.process-step {
  display: grid;

  grid-template-columns:
    45px 1fr;

  align-items: center;

  gap: 15px;
}


.step-number {
  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.2
    );

  border-radius: 12px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color: #bfa7ff;

  font-size: 0.66rem;

  font-weight: 800;
}


.process-step strong,
.process-step small {
  display: block;
}


.process-step strong {
  margin-bottom: 4px;

  font-size: 0.87rem;
}


.process-step small {
  color:
    rgba(
      255,
      255,
      255,
      0.48
    );

  font-size: 0.69rem;

  line-height: 1.5;
}


.step-line {
  width: 1px;
  height: 22px;

  margin:
    6px
    0
    6px
    19px;

  display: block;

  background:
    linear-gradient(
      to bottom,
      rgba(
        110,
        128,
        255,
        0.7
      ),
      rgba(
        192,
        87,
        244,
        0.25
      )
    );
}



/* =========================================================
   SERVICES
========================================================= */

.services {
  background: #ffffff;
}


.services-heading {
  max-width: 750px;

  margin-bottom: 65px;
}


.services-grid {
  display: grid;

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

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

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


.service {
  min-height: 280px;

  padding: 34px;

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

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

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.service:hover {
  position: relative;

  z-index: 2;

  background:
    linear-gradient(
      145deg,
      #f7fbff,
      #fbf8ff
    );

  transform:
    translateY(-4px);
}


.service-icon {
  width: 45px;
  height: 45px;

  margin-bottom: 35px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  color: var(--blue);

  background: #edf4ff;

  font-weight: 800;
}


.service h3 {
  margin:
    0 0 12px;

  max-width: 270px;

  font-size: 1rem;

  line-height: 1.4;
}


.service p {
  margin: 0;

  max-width: 290px;

  color: var(--muted);

  font-size: 0.82rem;

  line-height: 1.7;
}



/* =========================================================
   APPROACH
========================================================= */

.principle-section {
  padding:
    120px 0;

  background:
    linear-gradient(
      180deg,
      #f8faff,
      #ffffff
    );
}


.principle-container {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 90px;

  align-items:
    start;
}


.principle-title {
  position: sticky;

  top: 140px;
}


.principle-title h2 span {
  display: block;
}


.principle-grid {
  display: grid;
}


.principle-item {
  display: grid;

  grid-template-columns:
    70px 1fr;

  gap: 25px;

  padding:
    32px 0;

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


.principle-item:first-child {
  border-top:
    1px solid
    var(--border);
}


.principle-item > span {
  color: #a8b3c7;

  font-size: 0.74rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.principle-item strong {
  display: block;

  margin-bottom: 8px;

  font-size: 1.3rem;

  letter-spacing:
    -0.03em;
}


.principle-item p {
  margin: 0;

  color: var(--muted);

  line-height: 1.7;

  font-size: 0.9rem;
}



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

.cta-section {
  position: relative;

  padding:
    105px 0;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 85% 50%,
      rgba(
        209,
        108,
        234,
        0.55
      ),
      transparent 35%
    ),

    linear-gradient(
      110deg,
      #076fea,
      #414ccf 50%,
      #8140d4
    );

  color: white;
}


.cta-orb {
  position: absolute;

  width: 450px;
  height: 450px;

  top: -190px;
  right: 0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 50%;
}


.cta-container {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 60px;
}


.cta-label {
  display: inline-block;

  margin-bottom: 17px;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.15em;
}


.cta-container h2 {
  margin: 0;

  max-width: 720px;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4rem
    );

  line-height: 1.06;

  letter-spacing:
    -0.055em;
}


.cta-container h2 span {
  display: block;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}


.cta-button {
  min-width: 240px;

  padding:
    17px 21px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 25px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.35
    );

  border-radius: 15px;

  background:
    rgba(
      255,
      255,
      255,
      0.1
    );

  backdrop-filter:
    blur(10px);

  font-size: 0.83rem;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.cta-button:hover {
  transform:
    translateY(-3px);

  background:
    rgba(
      255,
      255,
      255,
      0.16
    );
}



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

.footer {
  position: relative;

  padding: 0;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9ff 100%
    );

  color:
    var(--text);

  border-top:
    1px solid
    rgba(
      30,
      82,
      170,
      0.08
    );
}


.footer-main {
  display: grid;

  grid-template-columns:
    1.65fr
    1fr
    1fr
    0.9fr
    1.35fr;

  gap: 50px;

  padding-top: 72px;

  padding-bottom: 65px;
}



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

.footer-brand {
  max-width: 320px;
}


.footer-logo {
  display:
    inline-block;

  margin-bottom: 23px;
}


.footer-logo img {
  width: 225px;

  height: auto;

  object-fit: contain;

  background: transparent;
}


.footer-brand > p {
  margin: 0;

  max-width: 310px;

  color: #6f7d96;

  font-size: 0.8rem;

  line-height: 1.8;
}


.footer-mail {
  display:
    inline-block;

  margin-top: 20px;

  color:
    var(--blue);

  font-size: 0.8rem;

  font-weight: 700;
}



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

.footer-column {
  display: flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap: 13px;
}


.footer-column h4 {
  margin:
    5px 0
    8px;

  color: #101d38;

  font-size: 0.82rem;

  font-weight: 800;
}


.footer-column a {
  color: #596983;

  font-size: 0.76rem;

  line-height: 1.5;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.footer-column a:hover {
  color:
    var(--blue);

  transform:
    translateX(3px);
}


.footer-contact p {
  margin: 0;

  color: #6f7d96;

  font-size: 0.76rem;

  line-height: 1.7;
}



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

.footer-bottom {
  border-top:
    1px solid
    rgba(
      30,
      82,
      170,
      0.09
    );
}


.footer-bottom-inner {
  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 30px;

  color: #8490a4;

  font-size: 0.7rem;
}


.footer-bottom-inner > div {
  display: flex;

  align-items: center;

  gap: 30px;
}


.footer-bottom-inner a {
  color: #66738a;

  transition:
    color 0.2s ease;
}


.footer-bottom-inner a:hover {
  color:
    var(--blue);
}



/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(35px);

  transition:
    opacity 0.8s ease,
    transform 0.8s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}



/* =========================================================
   TABLET
========================================================= */

@media (
  max-width: 1050px
) {

  .logo img {
    width: 220px;
  }


  .hero-container {
    grid-template-columns:
      1fr;

    gap: 25px;

    padding:
      160px
      0
      100px;
  }


  .hero,
  .hero-container {
    min-height: auto;
  }


  .hero-content {
    max-width: 760px;
  }


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


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


  .solutions-container {
    grid-template-columns:
      1fr;

    gap: 70px;
  }


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


  .principle-container {
    grid-template-columns:
      1fr;

    gap: 55px;
  }


  .principle-title {
    position: static;
  }


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

    gap:
      50px
      35px;
  }


  .footer-contact {
    grid-column:
      auto;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 720px
) {

  .container {
    width:
      min(
        calc(100% - 32px),
        var(--container)
      );
  }


  .section,
  .principle-section {
    padding:
      82px 0;
  }



  /* HEADER */

  .navbar {
    height: 82px;
  }


  .logo img {
    width: 190px;

    height: auto;
  }


  .nav {
    display: none;
  }


  .mobile-menu-button {
    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 12px;

    display: flex;

    flex-direction:
      column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    background:
      rgba(
        255,
        255,
        255,
        0.82
      );

    cursor: pointer;
  }


  .mobile-menu-button span {
    width: 19px;
    height: 2px;

    border-radius: 10px;

    background:
      #12213e;
  }


  .mobile-menu {
    position: absolute;

    top: 82px;

    left: 16px;
    right: 16px;

    padding: 20px;

    border:
      1px solid
      rgba(
        20,
        70,
        150,
        0.1
      );

    border-radius: 18px;

    display: none;

    flex-direction:
      column;

    gap: 18px;

    background:
      rgba(
        255,
        255,
        255,
        0.96
      );

    backdrop-filter:
      blur(18px);

    box-shadow:
      0 20px 50px
      rgba(
        20,
        50,
        100,
        0.12
      );

    font-size: 0.88rem;

    font-weight: 600;
  }


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



  /* HERO */

  .hero-container {
    display: block;

    padding:
      135px
      0
      82px;
  }


  .hero-badge {
    margin-bottom: 23px;

    font-size: 0.59rem;
  }


  .hero h1 {
    font-size:
      clamp(
        3rem,
        14.5vw,
        4.6rem
      );

    line-height: 0.98;
  }


  .hero-lead {
    margin-top: 24px;

    font-size: 0.95rem;

    line-height: 1.7;
  }


  .hero-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .button {
    width: 100%;
  }


  .hero-mini-info {
    margin-top: 38px;

    display: grid;

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

    gap: 10px;
  }


  .hero-mini-info > div {
    padding:
      0
      10px
      0
      0;

    border-right:
      1px solid
      rgba(
        33,
        72,
        130,
        0.1
      );
  }


  .hero-mini-info strong {
    font-size: 0.7rem;
  }


  .hero-mini-info span {
    font-size: 0.61rem;
  }


  .hero-visual {
    min-height: 590px;

    margin-top: 35px;

    padding-bottom: 80px;
  }


  .main-tech-card {
    width: 94%;

    padding: 21px;

    border-radius: 22px;

    transform: none;

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


  @keyframes mobileDashboardFloat {

    0%,
    100% {
      transform:
        translateY(0);
    }

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

  }


  .tech-card-header h3 {
    font-size: 1.05rem;
  }


  .system-node {
    grid-template-columns:
      42px
      1fr;
  }


  .floating-ai {
    top: 7px;

    right: -4px;
  }


  .floating-data {
    bottom: 2px;

    left: 8px;
  }


  .floating-card {
    padding:
      11px
      13px;
  }



  /* TITLES */

  .section-title {
    margin-bottom: 43px;
  }


  .section-title h2,
  .services-heading h2,
  .solutions-copy h2,
  .principle-title h2 {
    font-size:
      clamp(
        2.2rem,
        10vw,
        3.4rem
      );
  }


  .section-title > p {
    font-size: 0.91rem;
  }



  /* FEATURES */

  .features-grid {
    grid-template-columns:
      1fr;
  }


  .feature-card {
    min-height: auto;
  }



  /* SOLUTIONS */

  .solutions-container {
    gap: 50px;
  }


  .solutions-panel {
    min-height: auto;

    padding: 25px;

    border-radius: 24px;
  }


  .process-heading strong {
    font-size: 2.7rem;
  }



  /* SERVICES */

  .services-heading {
    margin-bottom: 45px;
  }


  .services-grid {
    grid-template-columns:
      1fr;
  }


  .service {
    min-height: auto;

    padding: 30px;
  }



  /* APPROACH */

  .principle-item {
    grid-template-columns:
      45px
      1fr;

    gap: 15px;
  }



  /* CTA */

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


  .cta-container {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap: 35px;
  }


  .cta-button {
    width: 100%;
  }



  /* FOOTER */

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

    gap:
      45px
      25px;

    padding-top: 55px;

    padding-bottom: 45px;
  }


  .footer-brand {
    grid-column:
      1 / -1;

    max-width: 100%;
  }


  .footer-logo img {
    width: 210px;
  }


  .footer-brand > p {
    max-width: 430px;
  }


  .footer-contact {
    grid-column:
      1 / -1;
  }


  .footer-bottom-inner {
    padding:
      22px 0;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap: 13px;
  }


  .footer-bottom-inner > div {
    flex-wrap: wrap;

    gap: 18px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
  max-width: 430px
) {

  .logo img {
    width: 165px;
  }


  .hero h1 {
    font-size:
      clamp(
        2.75rem,
        13vw,
        3.7rem
      );
  }


  .hero-mini-info {
    grid-template-columns:
      1fr;
  }


  .hero-mini-info > div {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(
        33,
        72,
        130,
        0.1
      );

    padding-bottom: 10px;
  }


  .hero-mini-info > div:last-child {
    border-bottom: 0;
  }


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


  .floating-card {
    max-width: 165px;
  }


  .floating-card strong {
    font-size: 0.67rem;
  }


  .floating-card span {
    font-size: 0.57rem;
  }


  .panel-top {
    font-size: 0.5rem;
  }


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

    gap: 35px;
  }


  .footer-brand,
  .footer-contact {
    grid-column: auto;
  }


  .footer-logo img {
    width: 195px;
  }

}



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

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

  * {
    animation:
      none !important;

    scroll-behavior:
      auto !important;

    transition:
      none !important;
  }

}