:root {
  --blue: #3284ef;
  --blue-strong: #1f73df;
  --blue-deep: #205b9e;
  --sky: #9dd3f9;
  --sky-2: #c9e8ff;
  --sky-soft: #eaf6ff;
  --cloud: #f6fbff;
  --white: #ffffff;
  --ink: #183e68;
  --text: #56718d;
  --muted: #7f97ad;
  --line: #dcecf8;
  --yellow: #ffc538;
  --shadow: 0 20px 70px rgba(50, 132, 239, .13);
  --shadow-card: 0 14px 45px rgba(37, 111, 188, .10);
  --radius: 26px;
  --max: 1180px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

body.menu-open {
  overflow: hidden
}

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

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

button,
input,
select,
textarea {
  font: inherit
}

button {
  cursor: pointer
}

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

.section {
  padding: 118px 0
}

.section-soft {
  padding: 118px 0;
  background: var(--cloud)
}

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  padding: 14px 0;
  transition: .25s ease
}

.site-header.scrolled {
  padding: 8px 0;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 35px rgba(40, 109, 174, .07)
}

.nav-shell {
  height: 68px;
  padding: 0 18px 0 22px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(203, 229, 249, .88);
  border-radius: 22px;
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center;
  gap: 28px;
  box-shadow: 0 14px 50px rgba(55, 131, 200, .08)
}

.brand {
  width: 170px;
  display: block
}

.brand img {
  width: 100%;
  height: auto
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 28px
}

.main-nav a {
  font-size: 15px;
  font-weight: 600;
  color: #416889;
  position: relative;
  transition: .2s
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--blue)
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: .2s;
  transform: translateX(-50%)
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 18px
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  color: #fff;
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(50, 132, 239, .24);
  transition: .2s
}

.header-cta:hover {
  transform: translateY(-2px);
  background: var(--blue-strong)
}

.header-cta span {
  font-size: 17px
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 13px;
  background: var(--sky-soft);
  padding: 12px
}

.menu-button span {
  display: block;
  height: 2px;
  background: var(--blue-deep);
  border-radius: 2px;
  margin: 4px 0;
  transition: .2s
}

.mobile-menu {
  display: none
}

/* Hero */
.hero {
  position: relative;
  min-height: 815px;
  padding: 142px 0 48px;
  background: linear-gradient(135deg, #fbfdff 0%, #f4faff 48%, #e8f6ff 100%);
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(to top, #fff, transparent);
  pointer-events: none
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(.2px);
  pointer-events: none
}

.hero-shape-a {
  width: 520px;
  height: 520px;
  right: -150px;
  top: 38px;
  background: radial-gradient(circle at 30% 30%, rgba(157, 211, 249, .85), rgba(157, 211, 249, .1) 64%, transparent 66%)
}

.hero-shape-b {
  width: 300px;
  height: 300px;
  left: -130px;
  bottom: 110px;
  background: radial-gradient(circle, rgba(50, 132, 239, .12), transparent 68%)
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 50px;
  min-height: 590px
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #d7ecfb;
  box-shadow: 0 8px 30px rgba(77, 153, 214, .08);
  border-radius: 999px;
  padding: 8px 13px 8px 10px;
  color: #5a7d9d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  margin-bottom: 24px
}

.eyebrow span {
  color: var(--blue);
  font-size: 14px
}

.hero h1 {
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(58px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -.047em;
  margin: 0 0 24px;
  max-width: 700px;
  color: var(--ink);
  font-weight: 800
}

.hero h1 span {
  color: var(--blue)
}

.hero-lead {
  max-width: 605px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
  margin: 0
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 21px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  transition: .2s
}

.btn span {
  font-size: 18px
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 30px rgba(50, 132, 239, .22)
}

.btn-primary:hover {
  background: var(--blue-strong);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(50, 132, 239, .28)
}

.btn-soft {
  background: #fff;
  color: var(--blue-deep);
  border: 1px solid #d8ebf8
}

.btn-soft:hover {
  background: var(--sky-soft);
  transform: translateY(-2px)
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 42px;
  margin-bottom: 40px
}

.mini-avatars {
  display: flex
}

.mini-avatars span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #f5fbff;
  overflow: hidden;
  margin-left: -9px;
  background: #fff
}

.mini-avatars span:first-child {
  margin-left: 0
}

.mini-avatars img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-trust p {
  margin: 0;
  color: #7890a6;
  font-size: 14px;
  line-height: 1.45
}

.hero-trust strong {
  color: var(--blue-deep);
  font-size: 18px
}

.hero-showcase {
  position: relative;
  min-height: 545px
}

.showcase-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 181, 240, .35), rgba(157, 211, 249, .1) 60%, transparent 72%);
  right: -20px;
  top: 40px
}

.browser-card {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(183, 220, 247, .85);
  box-shadow: 0 26px 70px rgba(55, 128, 193, .17);
  overflow: hidden
}

.browser-main {
  right: 0;
  top: 32px;
  width: 89%;
  border-radius: 24px;
  transform: rotate(1.2deg)
}

.browser-small {
  left: -8px;
  bottom: 22px;
  width: 43%;
  border-radius: 18px;
  transform: rotate(-3deg);
  box-shadow: 0 20px 50px rgba(50, 132, 239, .18)
}

.browser-top {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  background: #f6fbff;
  border-bottom: 1px solid #e6f2fb
}

.browser-top i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8d9f3
}

.browser-top i:first-child {
  background: #74b6ee
}

.browser-top span {
  margin-left: auto;
  font-size: 12px;
  color: #8ba4b9
}

.browser-main>img {
  width: 100%;
  height: 390px;
  object-fit: cover;
  object-position: top
}

.browser-small>img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: bottom
}

.floating-card {
  position: absolute;
  z-index: 3;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #d7ecfa;
  border-radius: 17px;
  box-shadow: 0 18px 45px rgba(50, 132, 239, .17);
  display: flex;
  align-items: center;
  gap: 11px
}

.floating-service {
  left: -8px;
  top: 38px;
  padding: 12px 14px
}

.floating-service .floating-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px
}

.floating-card small {
  display: block;
  color: #8aa4ba;
  font-size: 7px;
  letter-spacing: .09em;
  font-weight: 800
}

.floating-card strong {
  display: block;
  color: var(--blue-deep);
  font-size: 14px;
  margin-top: 3px
}

.floating-rating {
  right: -17px;
  bottom: 73px;
  padding: 12px 15px
}

.floating-check {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8f6ff;
  color: var(--blue);
  font-weight: 900
}

.floating-rating small {
  margin-top: 2px;
  letter-spacing: 0
}

.quick-strip {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px 28px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #dceefa;
  box-shadow: 0 14px 45px rgba(50, 132, 239, .08);
  color: #5a7c99;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em
}

.quick-strip i {
  font-style: normal;
  color: var(--sky)
}

/* Shared headings */
.section-head.centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 58px
}

.section-head.split {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: end;
  margin-bottom: 55px
}

.pill-label {
  display: inline-flex;
  background: var(--sky-soft);
  border: 1px solid #d4ebfb;
  color: var(--blue);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 15px
}

.section-head h2,
.all-copy h2,
.why-copy h2,
.faq-intro h2 {
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(42px, 4.3vw, 58px);
  line-height: 1.08;
  letter-spacing: -.04em;
  margin: 0;
  color: var(--ink);
  font-weight: 700
}

.section-head h2 span,
.all-copy h2 span,
.why-copy h2 span,
.faq-intro h2 span {
  color: var(--blue)
}

.section-head>p,
.section-head.split>p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  margin: 16px auto 0;
  max-width: 650px
}

.section-head.split>p {
  margin: 0
}

/* Service discovery */
.service-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 34px
}

.service-tab {
  border: 1px solid #d7eafa;
  background: #fff;
  color: #62829f;
  border-radius: 999px;
  padding: 10px 17px;
  font-size: 14px;
  font-weight: 700;
  transition: .2s
}

.service-tab:hover,
.service-tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(50, 132, 239, .16)
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.service-card {
  position: relative;
  min-height: 430px;
  background: #fff;
  border: 1px solid #dcecf8;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 35px rgba(65, 135, 194, .06);
  transition: .28s ease;
  overflow: hidden
}

.service-card:hover {
  transform: translateY(-7px);
  border-color: #acd6f6;
  box-shadow: var(--shadow-card)
}

.service-card.hidden {
  display: none
}

.service-card.featured {
  border-color: #b3daf7;
  background: linear-gradient(180deg, #fff 0%, #f5fbff 100%)
}

.popular-badge {
  position: absolute;
  top: 0;
  right: 22px;
  background: var(--blue);
  color: #fff;
  border-radius: 0 0 10px 10px;
  padding: 7px 10px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  margin-bottom: 27px
}

.service-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.icon-blue {
  background: #e8f4ff;
  color: var(--blue)
}

.icon-sky {
  background: #eff9ff;
  color: #4d9ee1
}

.icon-cloud {
  background: #f1f8ff;
  color: #6c9bc3
}

.service-chip {
  font-size: 12px;
  font-weight: 800;
  color: #82a0b9;
  letter-spacing: .1em
}

.service-card h3 {
  font-family: Poppins, sans-serif;
  font-size: 23px;
  line-height: 1.18;
  margin: 8px 0 12px;
  color: var(--ink);
  letter-spacing: -.02em
}

.service-card>p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0
}

.service-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 8px
}

.service-card li {
  font-size: 14px;
  color: #66849e;
  display: flex;
  gap: 8px;
  align-items: center
}

.service-card li::before {
  content: "✓";
  color: var(--blue);
  font-weight: 900
}

.service-card>a {
  margin-top: auto;
  padding-top: 24px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.service-card>a span {
  font-size: 15px
}

.infrastructure-card {
  background: #fbfdff
}

/* all-in-one */
.all-in-one-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: center
}

.all-copy>p {
  color: var(--text);
  line-height: 1.8;
  font-size: 15px;
  max-width: 540px;
  margin: 20px 0 30px
}

.all-list {
  display: grid;
  gap: 12px
}

.all-list>div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  align-items: center;
  border: 1px solid #ddeefa;
  border-radius: 16px;
  padding: 14px 16px
}

.all-list b {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--sky-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 14px
}

.all-list span {
  display: grid
}

.all-list strong {
  font-size: 18px;
  color: var(--ink)
}

.all-list small {
  font-size: 14px;
  color: #7b94aa;
  margin-top: 3px
}

.ecosystem-visual {
  position: relative;
  min-height: 520px
}

.ecosystem-visual::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #cbe9ff 0, #eaf6ff 55%, transparent 56%)
}

.ecosystem-visual::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed #9ed3f8
}

.eco-card {
  position: absolute;
  background: #fff;
  border: 1px solid #d7ebfa;
  box-shadow: 0 18px 50px rgba(57, 129, 191, .12);
  border-radius: 18px;
  z-index: 2
}

.eco-main {
  width: 210px;
  height: 220px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 30px
}

.eco-main img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 12px 0 5px
}

.eco-main .eco-kicker {
  font-size: 12px;
  color: #8ba2b6;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase
}

.eco-main strong {
  font-family: Poppins, sans-serif;
  color: var(--blue);
  font-size: 26px
}

.eco-main small {
  color: #849caf;
  font-size: 9px
}

.eco-web,
.eco-shop,
.eco-cloud,
.eco-mail {
  width: 145px;
  padding: 16px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px
}

.eco-card>span:first-child {
  grid-row: 1/3;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--sky-soft);
  display: grid;
  place-items: center;
  color: var(--blue)
}

.eco-card b {
  font-size: 14px;
  color: var(--ink)
}

.eco-card small {
  font-size: 12px;
  color: #86a0b5;
  margin-top: 2px
}

.eco-web {
  left: 3%;
  top: 15%
}

.eco-shop {
  right: 2%;
  top: 20%
}

.eco-cloud {
  left: 5%;
  bottom: 15%
}

.eco-mail {
  right: 5%;
  bottom: 12%
}

/* Solutions */
.solution-grid {
  display: grid;
  gap: 22px
}

.solution-card {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  min-height: 470px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #f4faff, #e7f5ff);
  border: 1px solid #d5eafb
}

.solution-card:nth-child(even) {
  grid-template-columns: 1fr .82fr
}

.solution-card:nth-child(even) .solution-copy {
  order: 2
}

.solution-card:nth-child(even) .certificate-demo {
  order: 1
}

.solution-copy {
  padding: 46px 42px;
  display: flex;
  flex-direction: column
}

.solution-number {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  color: #8ba6bd;
  font-weight: 700
}

.solution-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 28px;
  color: var(--blue);
  border: 1px solid #d9ecfa;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em
}

.solution-copy h3 {
  font-family: Poppins, sans-serif;
  font-size: 37px;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: 14px 0;
  color: var(--ink)
}

.solution-copy p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0
}

.solution-features {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 23px
}

.solution-features span {
  background: rgba(255, 255, 255, .8);
  border: 1px solid #d9ecfa;
  border-radius: 999px;
  padding: 7px 9px;
  color: #6685a1;
  font-size: 12px;
  font-weight: 700
}

.solution-copy>a {
  margin-top: auto;
  padding-top: 32px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800
}

.solution-media {
  margin: 30px 30px 30px 0;
  background: #fff;
  border-radius: 21px;
  border: 1px solid #dcecf7;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(50, 132, 239, .13);
  align-self: stretch
}

.solution-media.cov {
  width: 100%;
  height: 462px;
  overflow: hidden;
}
.solution-media.cov img {
  width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.solution-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top
}

.solution-card:nth-child(3) {
  background: linear-gradient(135deg, #eef8ff, #f8fcff)
}

.certificate-demo {
  position: relative;
  margin: 30px 0 30px 30px;
  background: #fff;
  border: 1px solid #dcecf7;
  border-radius: 21px;
  box-shadow: 0 20px 50px rgba(50, 132, 239, .13);
  padding: 38px;
  overflow: hidden
}

.certificate-demo::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -60px;
  bottom: -70px;
  background: #e4f4ff
}

.cert-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e3eff7;
  padding-bottom: 22px
}

.cert-top img {
  width: 40px;
  height: 40px;
  object-fit: contain
}

.cert-top span {
  font-size: 12px;
  color: #7292aa;
  font-weight: 800;
  letter-spacing: .12em
}

.cert-line {
  height: 8px;
  background: #eaf3f9;
  border-radius: 6px;
  width: 78%;
  margin-top: 18px
}

.cert-line.short {
  width: 45%;
  height: 14px;
  background: #9dd3f9;
  margin-top: 42px
}

.cert-line.mid {
  width: 62%
}

.fake-qr {
  position: absolute;
  right: 38px;
  bottom: 56px;
  width: 84px;
  height: 84px;
  background: #edf6fc;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 9px;
  border-radius: 10px;
  z-index: 2
}

.fake-qr i {
  background: #3284ef;
  border-radius: 2px
}

.fake-qr i:nth-child(2),
.fake-qr i:nth-child(4),
.fake-qr i:nth-child(6),
.fake-qr i:nth-child(8) {
  background: #b8ddf8
}

.certificate-demo>small {
  position: absolute;
  right: 37px;
  bottom: 34px;
  color: #79a0bd;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .08em;
  z-index: 2
}

/* Portfolio */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 20px
}

.project-card {
  display: block
}

.project-thumb {
  height: 260px;
  position: relative;
  overflow: hidden;
  border-radius: 21px;
  border: 1px solid #d6eaf8;
  background: #fff;
  box-shadow: 0 10px 32px rgba(46, 115, 178, .08)
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: .5s ease
}

.project-open {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 17px;
  box-shadow: 0 8px 20px rgba(33, 103, 161, .13);
  transition: .2s
}

.project-card:hover .project-thumb img {
  transform: scale(1.035)
}

.project-card:hover .project-open {
  background: var(--blue);
  color: #fff;
  transform: translate(2px, -2px)
}

.project-meta {
  padding: 17px 4px 0
}

.project-meta>span {
  color: #7b99b2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em
}

.project-meta h3 {
  font-family: Poppins, sans-serif;
  font-size: 21px;
  margin: 6px 0;
  color: var(--ink);
  letter-spacing: -.02em
}

.project-meta p {
  font-size: 14px;
  line-height: 1.55;
  color: #7891a7;
  margin: 0
}

.portfolio-cta {
  margin-top: 55px;
  background: #fff;
  border: 1px solid #d9ebf8;
  border-radius: 22px;
  padding: 24px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px
}

.portfolio-cta>div {
  display: grid;
  gap: 3px
}

.portfolio-cta strong {
  font-family: Poppins, sans-serif;
  font-size: 18px
}

.portfolio-cta span {
  font-size: 14px;
  color: #7892a8
}

/* Why */
.why-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 80px;
  align-items: start
}

.why-copy {
  position: sticky;
  top: 120px
}

.why-copy p {
  color: var(--text);
  font-size: 14px;
  line-height: 1.8;
  margin: 20px 0 26px
}

.why-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.why-card {
  min-height: 305px;
  border: 1px solid #dcecf8;
  border-radius: 24px;
  padding: 28px;
  background: #fff;
  position: relative
}

.why-card>span {
  font-size: 18px;
  color: #98afc1;
  font-weight: 700
}

.why-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--sky-soft);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 20px;
  margin: 36px 0 22px
}

.why-card h3 {
  font-family: Poppins, sans-serif;
  font-size: 20px;
  letter-spacing: -.02em;
  margin: 0 0 10px
}

.why-card p {
  font-size: 14px;
  color: #738ea6;
  line-height: 1.65;
  margin: 0
}

/* Process */
.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 70px
}

.process-grid::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 20px;
  height: 1px;
  background: #c8e4f7
}

.process-card {
  position: relative;
  padding-top: 52px
}

.process-card b {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: #86a1b7
}

.process-dot {
  position: absolute;
  top: 14px;
  left: 30px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--blue);
  z-index: 2;
  box-shadow: 0 0 0 6px #f6fbff
}

.process-card h3 {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  margin: 0 0 9px
}

.process-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #7892a8;
  margin: 0
}

/* FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 85px
}

.faq-intro p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
  margin: 20px 0
}

.faq-list {
  border-top: 1px solid #d9eaf7
}

.faq-list details {
  border-bottom: 1px solid #d9eaf7
}

.faq-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sky-soft);
  color: var(--blue);
  font-family: Inter;
  font-size: 15px;
  transition: .2s
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
  background: var(--blue);
  color: #fff
}

.faq-list details p {
  font-size: 18px;
  line-height: 1.7;
  color: #718ca4;
  margin: -7px 45px 22px 0
}

/* Contact */
.contact-shell {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  background: linear-gradient(135deg, #58a5f3 0%, #3284ef 58%, #78bcf5 100%);
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(50, 132, 239, .20)
}

.contact-copy {
  padding: 62px 52px;
  color: #fff;
  position: relative;
  overflow: hidden
}

.contact-copy::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  left: -170px;
  bottom: -150px
}

.white-pill {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .25);
  color: #fff
}

.contact-copy h2 {
  font-family: Poppins, sans-serif;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 2px 0 18px
}

.contact-copy h2 span {
  color: #d8efff
}

.contact-copy>p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  max-width: 420px
}

.contact-points {
  margin-top: 45px;
  display: grid;
  gap: 10px
}

.contact-points a {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08)
}

.contact-points i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800
}

.contact-points span {
  display: grid
}

.contact-points small {
  font-size: 7px;
  opacity: .7;
  letter-spacing: .09em
}

.contact-points strong {
  font-size: 14px;
  margin-top: 2px
}

.contact-points b {
  font-size: 16px
}

.contact-form {
  margin: 20px;
  background: #fff;
  border-radius: 24px;
  padding: 34px;
  display: grid;
  gap: 16px
}

.form-title {
  display: grid;
  margin-bottom: 4px
}

.form-title strong {
  font-family: Poppins, sans-serif;
  font-size: 20px
}

.form-title span {
  font-size: 14px;
  color: #829aaf;
  margin-top: 4px
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.contact-form label {
  display: grid;
  gap: 7px;
  color: #597993;
  font-size: 9px;
  font-weight: 700
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #d9eaf6;
  background: #fbfdff;
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 13px;
  outline: 0;
  font-size: 14px;
  transition: .2s
}

.contact-form textarea {
  resize: vertical;
  min-height: 110px
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #8fc9f4;
  box-shadow: 0 0 0 4px #edf7ff
}

.form-submit {
  border: 0;
  background: var(--blue);
  color: #fff;
  border-radius: 13px;
  min-height: 50px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(50, 132, 239, .18)
}

.form-submit:hover {
  background: var(--blue-strong)
}

.form-submit span {
  font-size: 17px
}

.form-note {
  text-align: center;
  color: #9aafc0;
  font-size: 12px
}

/* Footer */
.site-footer {
  background: #fff;
  padding: 62px 0 28px
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, .7fr);
  gap: 60px;
  padding-bottom: 42px;
  border-bottom: 1px solid #e0edf6
}

.footer-brand img {
  width: 180px
}

.footer-brand p {
  color: #7590a6;
  font-size: 14px;
  line-height: 1.6;
  max-width: 300px;
  margin: 16px 0 0
}

.footer-links {
  display: grid;
  align-content: start;
  gap: 9px
}

.footer-links strong {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  margin-bottom: 5px
}

.footer-links a {
  color: #718ba2;
  font-size: 14px
}

.footer-links a:hover {
  color: var(--blue)
}

.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  color: #8ca3b6;
  font-size: 9px
}

/* WhatsApp */
.whatsapp-float {
  position: fixed;
  z-index: 95;
  right: 24px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 15px 35px rgba(37, 211, 102, .28);
  transition: .2s
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.03)
}

.whatsapp-float svg {
  width: 29px;
  height: 29px
}

.wa-bubble {
  position: fixed;
  z-index: 94;
  right: 24px;
  bottom: 91px;
  background: #fff;
  border: 1px solid #d9eaf7;
  border-radius: 15px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 15px 40px rgba(41, 108, 168, .15);
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  transition: .25s
}

.wa-bubble.show {
  opacity: 1;
  transform: none
}

.wa-bubble>span {
  font-size: 18px
}

.wa-bubble p {
  margin: 0;
  display: grid
}

.wa-bubble b {
  color: var(--blue-deep);
  font-size: 7px;
  letter-spacing: .08em
}

.wa-bubble small {
  color: #7892a8;
  font-size: 12px;
  margin-top: 2px
}

/* Animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1)
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.reveal-delay {
  transition-delay: .12s
}

@media (max-width:1100px) {
  .nav-shell {
    grid-template-columns: 165px 1fr auto;
    gap: 18px
  }

  .brand {
    width: 155px
  }

  .main-nav {
    gap: 18px
  }

  .main-nav a {
    font-size: 14px
  }

  .hero-grid {
    gap: 28px
  }

  .hero h1 {
    font-size: clamp(54px, 5.4vw, 70px)
  }

  .browser-main {
    width: 94%
  }

  .service-grid {
    grid-template-columns: 1fr 1fr
  }

  .all-in-one-grid {
    gap: 45px
  }

  .solution-card {
    grid-template-columns: .9fr 1.1fr
  }

  .why-grid {
    gap: 45px
  }

  .footer-top {
    gap: 35px
  }
}

@media (max-width:860px) {
  .container {
    width: min(calc(100% - 30px), var(--max))
  }

  .section,
  .section-soft {
    padding: 92px 0
  }

  .site-header {
    padding: 8px 0
  }

  .nav-shell {
    height: 64px;
    grid-template-columns: 1fr auto;
    padding: 0 12px 0 17px
  }

  .brand {
    width: 150px
  }

  .main-nav,
  .header-cta {
    display: none
  }

  .menu-button {
    display: block
  }

  .mobile-menu {
    display: grid;
    position: absolute;
    left: 15px;
    right: 15px;
    top: 80px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #d9eaf7;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(40, 109, 174, .14);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: .22s
  }

  .mobile-menu.open {
    opacity: 1;
    transform: none;
    pointer-events: auto
  }

  .mobile-menu a {
    padding: 13px 12px;
    border-bottom: 1px solid #e9f2f8;
    color: #55758f;
    font-size: 18px;
    font-weight: 700
  }

  .mobile-menu a:nth-last-child(2) {
    border-bottom: 0
  }

  .mobile-menu-cta {
    margin-top: 8px !important;
    background: var(--blue);
    color: #fff !important;
    border-radius: 12px;
    text-align: center;
    border: 0 !important
  }

  .menu-button.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg)
  }

  .menu-button.open span:nth-child(2) {
    opacity: 0
  }

  .menu-button.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg)
  }

  .hero {
    padding-top: 115px;
    min-height: auto
  }

  .hero-grid {
    grid-template-columns: 1fr
  }

  .hero-copy {
    padding-top: 35px
  }

  .hero h1 {
    max-width: 750px;
    font-size: clamp(55px, 10.5vw, 78px)
  }

  .hero-lead {
    max-width: 700px
  }

  .hero-showcase {
    min-height: 540px;
    margin-top: 15px
  }

  .browser-main {
    width: 85%;
    right: 3%
  }

  .browser-main>img {
    height: 380px
  }

  .browser-small {
    left: 2%;
    width: 38%
  }

  .floating-service {
    left: 3%
  }

  .floating-rating {
    right: 0
  }

  .quick-strip {
    margin-top: 40px;
    justify-content: flex-start;
    overflow: auto;
    white-space: nowrap
  }

  .section-head.split {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .service-grid {
    grid-template-columns: 1fr 1fr
  }

  .all-in-one-grid {
    grid-template-columns: 1fr
  }

  .ecosystem-visual {
    min-height: 490px
  }

  .solution-card,
  .solution-card:nth-child(even) {
    grid-template-columns: 1fr
  }

  .solution-card:nth-child(even) .solution-copy {
    order: 1
  }

  .solution-card:nth-child(even) .certificate-demo {
    order: 2
  }

  .solution-media,
  .certificate-demo {
    margin: 0 20px 20px;
    height: 390px
  }

  .solution-copy {
    padding: 38px 30px
  }

  .portfolio-grid {
    grid-template-columns: 1fr 1fr
  }

  .project-thumb {
    height: 290px
  }

  .why-grid {
    grid-template-columns: 1fr
  }

  .why-copy {
    position: static
  }

  .process-grid {
    grid-template-columns: 1fr 1fr
  }

  .process-grid::before {
    display: none
  }

  .process-card {
    border-top: 1px solid #d6e8f5;
    padding-top: 28px
  }

  .process-card b {
    top: 8px
  }

  .process-dot {
    display: none
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .contact-shell {
    grid-template-columns: 1fr
  }

  .footer-top {
    grid-template-columns: 1.2fr 1fr 1fr
  }

  .footer-links:last-child {
    grid-column: 2/4
  }
}

@media (max-width:580px) {
  .container {
    width: min(calc(100% - 22px), var(--max))
  }

  .section,
  .section-soft {
    padding: 75px 0
  }

  .site-header {
    padding: 6px 0
  }

  .nav-shell {
    border-radius: 17px
  }

  .brand {
    width: 140px
  }

  .hero {
    padding-top: 100px
  }

  .hero-copy {
    padding-top: 23px
  }

  .eyebrow {
    font-size: 7px;
    padding: 7px 10px;
    margin-bottom: 18px
  }

  .hero h1 {
    font-size: clamp(45px, 13.6vw, 62px);
    line-height: 1.01
  }

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

  .hero-actions {
    display: grid
  }

  .btn {
    width: 100%
  }

  .hero-trust {
    margin-top: 30px
  }

  .hero-showcase {
    min-height: 410px
  }

  .browser-main {
    top: 35px;
    width: 91%;
    right: 0;
    border-radius: 18px
  }

  .browser-main>img {
    height: 275px
  }

  .browser-top {
    height: 30px
  }

  .browser-small {
    width: 45%;
    bottom: 12px
  }

  .browser-small>img {
    height: 100px
  }

  .floating-service {
    left: 0;
    top: 15px;
    transform: scale(.9);
    transform-origin: left top
  }

  .floating-rating {
    right: -7px;
    bottom: 37px;
    transform: scale(.88);
    transform-origin: right bottom
  }

  .quick-strip {
    margin-top: 25px;
    padding: 17px;
    gap: 20px;
    border-radius: 15px;
    font-size: 12px
  }

  .section-head.centered {
    margin-bottom: 42px
  }

  .section-head h2,
  .all-copy h2,
  .why-copy h2,
  .faq-intro h2 {
    font-size: clamp(37px, 11vw, 48px)
  }

  .section-head>p,
  .section-head.split>p {
    font-size: 15px
  }

  .service-tabs {
    justify-content: flex-start;
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px
  }

  .service-tab {
    white-space: nowrap
  }

  .service-grid {
    grid-template-columns: 1fr
  }

  .service-card {
    min-height: 395px;
    padding: 24px
  }

  .service-icon {
    margin-bottom: 22px
  }

  .ecosystem-visual {
    min-height: 390px
  }

  .ecosystem-visual::before {
    width: 300px;
    height: 300px
  }

  .ecosystem-visual::after {
    width: 255px;
    height: 255px
  }

  .eco-main {
    width: 160px;
    height: 165px;
    border-radius: 22px
  }

  .eco-main img {
    width: 50px;
    height: 50px;
    margin: 7px 0
  }

  .eco-main strong {
    font-size: 21px
  }

  .eco-web,
  .eco-shop,
  .eco-cloud,
  .eco-mail {
    width: 120px;
    padding: 11px
  }

  .eco-web {
    left: 0;
    top: 12%
  }

  .eco-shop {
    right: 0;
    top: 15%
  }

  .eco-cloud {
    left: 0;
    bottom: 11%
  }

  .eco-mail {
    right: 0;
    bottom: 9%
  }

  .eco-card>span:first-child {
    width: 29px;
    height: 29px
  }

  .solution-card {
    border-radius: 21px
  }

  .solution-copy {
    padding: 30px 22px
  }

  .solution-copy h3 {
    font-size: 31px
  }

  .solution-media,
  .certificate-demo {
    height: 280px;
    margin: 0 10px 10px
  }

  .certificate-demo {
    padding: 23px
  }

  .fake-qr {
    right: 23px;
    bottom: 50px;
    width: 67px;
    height: 67px
  }

  .certificate-demo>small {
    right: 22px;
    bottom: 29px
  }

  .portfolio-grid {
    grid-template-columns: 1fr
  }

  .project-thumb {
    height: 285px
  }

  .portfolio-cta {
    display: grid;
    padding: 20px
  }

  .why-cards {
    grid-template-columns: 1fr
  }

  .why-card {
    min-height: 270px
  }

  .process-grid {
    grid-template-columns: 1fr
  }

  .contact-copy {
    padding: 43px 24px
  }

  .contact-copy h2 {
    font-size: 42px
  }

  .contact-form {
    margin: 10px;
    padding: 22px 18px
  }

  .field-row {
    grid-template-columns: 1fr
  }

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

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

  .footer-links:last-child {
    grid-column: auto
  }

  .footer-bottom {
    display: grid;
    gap: 6px
  }

  .whatsapp-float {
    right: 13px;
    bottom: 13px;
    width: 54px;
    height: 54px;
    border-radius: 16px
  }

  .wa-bubble {
    right: 13px;
    bottom: 76px
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none
  }

  * {
    animation: none !important;
    transition: none !important
  }
}

/* ======================================================================
   NODICAM V5 — DARK BLUE EXPERIENCE
   Inspiración: estética SaaS/EdTech azul de Netzun, adaptada a Nodicam.
   No se usa negro puro: toda la interfaz vive en azules nocturnos.
   ====================================================================== */
:root {
  --blue: #3284ef;
  --blue-strong: #4b96f5;
  --blue-deep: #9dd3f9;
  --sky: #9dd3f9;
  --sky-2: #bfe5ff;
  --sky-soft: rgba(157, 211, 249, .10);
  --cloud: #091d31;
  --white: #ffffff;
  --ink: #f5f9ff;
  --text: #b7c9dc;
  --muted: #7f9bb6;
  --line: rgba(157, 211, 249, .14);
  --night: #071827;
  --night-2: #091d31;
  --night-3: #0d2741;
  --night-4: #12324f;
  --glass: rgba(12, 37, 60, .72);
  --yellow: #ffc538;
  --shadow: 0 28px 90px rgba(1, 9, 18, .28);
  --shadow-card: 0 24px 70px rgba(1, 10, 20, .25);
}

html {
  background: var(--night)
}

body.netzun-dark {
  background: var(--night);
  color: var(--ink);
  color-scheme: dark
}

body.netzun-dark::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 9% 12%, rgba(50, 132, 239, .15), transparent 26%),
    radial-gradient(circle at 88% 30%, rgba(157, 211, 249, .08), transparent 28%),
    linear-gradient(180deg, #071827 0%, #081a2c 46%, #071827 100%)
}

body.netzun-dark::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image: linear-gradient(rgba(157, 211, 249, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 211, 249, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 72%)
}

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

::-webkit-scrollbar {
  width: 10px
}

::-webkit-scrollbar-track {
  background: #071827
}

::-webkit-scrollbar-thumb {
  background: #1c4b76;
  border-radius: 999px;
  border: 2px solid #071827
}

::-webkit-scrollbar-thumb:hover {
  background: var(--blue)
}

.section {
  background: transparent
}

.section-soft {
  background: linear-gradient(180deg, #0a1f34 0%, #0b2238 52%, #091d31 100%);
  position: relative;
  overflow: hidden
}

.section-soft::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 132, 239, .10), transparent 68%);
  top: -300px;
  right: -190px;
  pointer-events: none
}

/* Header */
.site-header.scrolled {
  background: rgba(7, 24, 39, .72);
  backdrop-filter: blur(20px);
  box-shadow: 0 15px 45px rgba(0, 7, 16, .26);
  border-bottom: 1px solid rgba(157, 211, 249, .05)
}

.nav-shell {
  background: rgba(10, 31, 51, .82);
  border-color: rgba(157, 211, 249, .14);
  box-shadow: 0 18px 60px rgba(0, 8, 18, .22), inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(22px)
}

.main-nav a {
  color: #9db4ca
}

.main-nav a:hover,
.main-nav a.active {
  color: #dff2ff
}

.main-nav a::after {
  background: var(--sky)
}

.header-cta {
  background: linear-gradient(135deg, #3284ef, #4a9af8);
  box-shadow: 0 12px 30px rgba(50, 132, 239, .30)
}

.header-cta:hover {
  background: linear-gradient(135deg, #4796f5, #65adfb);
  box-shadow: 0 16px 40px rgba(50, 132, 239, .38)
}

.menu-button {
  background: rgba(157, 211, 249, .10);
  border: 1px solid rgba(157, 211, 249, .12)
}

.menu-button span {
  background: #dceeff
}

.mobile-menu {
  background: rgba(9, 29, 49, .98) !important;
  border-color: rgba(157, 211, 249, .14) !important;
  box-shadow: 0 30px 70px rgba(0, 7, 16, .38) !important
}

.mobile-menu a {
  color: #b8cce0 !important;
  border-color: rgba(157, 211, 249, .09) !important
}

.mobile-menu-cta {
  background: var(--blue) !important;
  color: #fff !important
}

/* Hero */
.hero {
  background:
    radial-gradient(circle at 75% 28%, rgba(50, 132, 239, .20), transparent 24%),
    radial-gradient(circle at 92% 0%, rgba(157, 211, 249, .11), transparent 25%),
    linear-gradient(135deg, #071827 0%, #0a2036 52%, #0b2741 100%);
  min-height: 840px
}

.hero::before {
  height: 210px;
  background: linear-gradient(to top, #071827 0%, rgba(7, 24, 39, .62) 42%, transparent 100%)
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(rgba(157, 211, 249, .38) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(100deg, transparent 0%, #000 58%, #000 100%)
}

.hero-shape-a {
  background: radial-gradient(circle at 35% 35%, rgba(50, 132, 239, .35), rgba(50, 132, 239, .07) 52%, transparent 69%);
  filter: blur(3px)
}

.hero-shape-b {
  background: radial-gradient(circle, rgba(157, 211, 249, .10), transparent 68%)
}

.eyebrow {
  background: rgba(157, 211, 249, .08);
  border-color: rgba(157, 211, 249, .16);
  box-shadow: none;
  color: #a8c9e5
}

.eyebrow span {
  color: #74b8ff;
  text-shadow: 0 0 14px rgba(50, 132, 239, .7)
}

.hero h1 {
  color: #f7fbff;
  text-shadow: 0 10px 50px rgba(0, 7, 16, .18)
}

.hero h1 span {
  background: linear-gradient(90deg, #72b7ff 0%, #9dd3f9 55%, #d5efff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero-lead {
  color: #b6c9dd
}

.btn-primary {
  background: linear-gradient(135deg, #3284ef, #4d9bf7);
  box-shadow: 0 16px 40px rgba(50, 132, 239, .30)
}

.btn-primary:hover {
  background: linear-gradient(135deg, #438ff2, #6bb3fb);
  box-shadow: 0 20px 48px rgba(50, 132, 239, .38)
}

.btn-soft {
  background: rgba(157, 211, 249, .07);
  color: #d8ecff;
  border-color: rgba(157, 211, 249, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035)
}

.btn-soft:hover {
  background: rgba(157, 211, 249, .13);
  border-color: rgba(157, 211, 249, .28)
}

.mini-avatars span {
  border-color: #0a2036;
  background: #112e49
}

.hero-trust p {
  color: #839fb8
}

.hero-trust strong {
  color: #d6ebff
}

.showcase-glow {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(50, 132, 239, .32), rgba(50, 132, 239, .08) 46%, transparent 70%);
  filter: blur(8px)
}

.browser-card {
  background: #0d2944;
  border-color: rgba(157, 211, 249, .20);
  box-shadow: 0 35px 90px rgba(0, 8, 18, .44), 0 0 0 1px rgba(50, 132, 239, .04)
}

.browser-main {
  box-shadow: 0 40px 95px rgba(0, 8, 18, .47), 0 0 75px rgba(50, 132, 239, .09)
}

.browser-top {
  background: #0b2238;
  border-color: rgba(157, 211, 249, .10)
}

.browser-top i {
  background: #385d7d
}

.browser-top i:first-child {
  background: #5faaf6
}

.browser-top span {
  color: #6f8faa
}

.floating-card {
  background: rgba(12, 37, 60, .92);
  border-color: rgba(157, 211, 249, .17);
  box-shadow: 0 22px 60px rgba(0, 8, 18, .38);
  backdrop-filter: blur(16px)
}

.floating-card small {
  color: #7697b4
}

.floating-card strong {
  color: #e6f4ff
}

.floating-service .floating-icon {
  background: linear-gradient(135deg, #3284ef, #67b0fa);
  box-shadow: 0 10px 24px rgba(50, 132, 239, .28)
}

.floating-check {
  background: rgba(157, 211, 249, .10);
  color: #8fc9ff
}

.quick-strip {
  background: rgba(10, 31, 51, .84);
  border-color: rgba(157, 211, 249, .14);
  box-shadow: 0 18px 55px rgba(0, 8, 18, .20);
  color: #92afc8;
  backdrop-filter: blur(14px)
}

.quick-strip i {
  color: #4f9ced
}

/* Shared headings */
.pill-label {
  background: rgba(50, 132, 239, .10);
  border-color: rgba(157, 211, 249, .15);
  color: #7ebdff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03)
}

.section-head h2,
.all-copy h2,
.why-copy h2,
.faq-intro h2 {
  color: #f3f8fe
}

.section-head h2 span,
.all-copy h2 span,
.why-copy h2 span,
.faq-intro h2 span {
  color: #83c5ff
}

.section-head>p,
.section-head.split>p,
.all-copy>p,
.why-copy p,
.faq-intro p {
  color: #a9bfd3
}

/* Service discovery */
.service-tab {
  background: rgba(157, 211, 249, .055);
  border-color: rgba(157, 211, 249, .13);
  color: #9bb5cd
}

.service-tab:hover,
.service-tab.active {
  background: linear-gradient(135deg, #3284ef, #4c9bf7);
  border-color: #4c9bf7;
  color: #fff;
  box-shadow: 0 12px 28px rgba(50, 132, 239, .24)
}

.service-card {
  background: linear-gradient(180deg, rgba(15, 43, 69, .96), rgba(10, 32, 53, .96));
  border-color: rgba(157, 211, 249, .11);
  box-shadow: 0 16px 50px rgba(0, 8, 18, .14), inset 0 1px 0 rgba(255, 255, 255, .025)
}

.service-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -100px;
  bottom: -100px;
  background: radial-gradient(circle, rgba(50, 132, 239, .12), transparent 68%);
  transition: .3s
}

.service-card:hover {
  border-color: rgba(105, 177, 244, .35);
  box-shadow: 0 28px 75px rgba(0, 8, 18, .30), 0 0 55px rgba(50, 132, 239, .055)
}

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

.service-card.featured {
  border-color: rgba(83, 161, 239, .40);
  background: linear-gradient(155deg, #123654 0%, #0b2944 58%, #0b2238 100%)
}

.popular-badge {
  background: linear-gradient(90deg, #3284ef, #5aa8f8)
}

.service-icon {
  border: 1px solid rgba(157, 211, 249, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03)
}

.icon-blue,
.icon-sky,
.icon-cloud {
  background: rgba(50, 132, 239, .10);
  color: #81c1ff
}

.service-chip {
  color: #6e92b0
}

.service-card h3 {
  color: #f3f9ff
}

.service-card>p {
  color: #a6bdd1
}

.service-card li {
  color: #8faac1
}

.service-card li::before {
  color: #75b9fa
}

.service-card>a {
  color: #82c4ff
}

/* Ecosystem */
.all-list>div {
  border-color: rgba(157, 211, 249, .11) !important
}

.all-list b {
  background: rgba(50, 132, 239, .14) !important;
  color: #85c5ff !important
}

.all-list strong {
  color: #eaf6ff !important
}

.all-list small {
  color: #829fb8 !important
}

.ecosystem-visual::before {
  background: radial-gradient(circle, rgba(50, 132, 239, .17), rgba(50, 132, 239, .035) 58%, transparent 70%) !important
}

.ecosystem-visual::after {
  border-color: rgba(157, 211, 249, .12) !important
}

.eco-card {
  background: rgba(13, 41, 67, .94);
  border-color: rgba(157, 211, 249, .15);
  box-shadow: 0 24px 65px rgba(0, 8, 18, .28);
  backdrop-filter: blur(14px)
}

.eco-main {
  background: linear-gradient(145deg, #17446a, #0e3150) !important;
  border-color: rgba(157, 211, 249, .22) !important;
  box-shadow: 0 30px 80px rgba(0, 8, 18, .35), 0 0 70px rgba(50, 132, 239, .09) !important
}

.eco-main .eco-kicker {
  color: #88b7df !important
}

.eco-main strong {
  color: #f5fbff !important
}

.eco-main small {
  color: #8fb0ca !important
}

.eco-card>span:first-child {
  background: rgba(50, 132, 239, .13);
  color: #84c6ff
}

.eco-card b {
  color: #eaf6ff
}

.eco-card small {
  color: #7f9db7
}

/* Solutions */
.solution-card,
.solution-card:nth-child(3) {
  background: linear-gradient(135deg, #0d2a45, #0a2138 58%, #0c2943);
  border-color: rgba(157, 211, 249, .13);
  box-shadow: 0 22px 70px rgba(0, 8, 18, .17)
}

.solution-card:hover {
  border-color: rgba(101, 175, 246, .28)
}

.solution-number {
  color: #557b9c !important
}

.solution-tag {
  color: #72b6f8 !important
}

.solution-copy h3 {
  color: #f4f9ff
}

.solution-copy p {
  color: #a8bfd3
}

.solution-features span {
  background: rgba(157, 211, 249, .07) !important;
  border-color: rgba(157, 211, 249, .12) !important;
  color: #a7c1d8 !important
}

.solution-copy>a {
  color: #86c7ff !important
}

.solution-media {
  background: #071827 !important;
  border-color: rgba(157, 211, 249, .12) !important;
  box-shadow: 0 30px 80px rgba(0, 8, 18, .34) !important
}

.certificate-demo {
  background: linear-gradient(145deg, #f8fbff, #e9f5ff) !important;
  box-shadow: 0 30px 80px rgba(0, 8, 18, .30) !important
}

.certificate-demo .cert-top span {
  color: #38698e !important
}

/* Portfolio */
.project-thumb {
  background: #0b243c;
  border: 1px solid rgba(157, 211, 249, .10);
  box-shadow: 0 16px 50px rgba(0, 8, 18, .18)
}

.project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 24, 39, .30), transparent 45%);
  pointer-events: none
}

.project-open {
  z-index: 2;
  background: rgba(8, 28, 47, .88) !important;
  color: #cfe9ff !important;
  border: 1px solid rgba(157, 211, 249, .15);
  backdrop-filter: blur(10px)
}

.project-card:hover .project-open {
  background: #3284ef !important;
  color: #fff !important;
  border-color: #3284ef
}

.project-meta>span {
  color: #6daff1
}

.project-meta h3 {
  color: #eff7ff
}

.project-meta p {
  color: #91abc2
}

.portfolio-cta {
  background: linear-gradient(135deg, rgba(15, 44, 70, .96), rgba(10, 32, 53, .96));
  border-color: rgba(157, 211, 249, .13);
  box-shadow: 0 20px 65px rgba(0, 8, 18, .18)
}

.portfolio-cta strong {
  color: #f2f8ff
}

.portfolio-cta span {
  color: #90aac1
}

/* Why */
.why-card {
  background: linear-gradient(160deg, #0f2d49, #0a2137);
  border-color: rgba(157, 211, 249, .11);
  box-shadow: 0 16px 50px rgba(0, 8, 18, .12);
  overflow: hidden
}

.why-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  right: -105px;
  top: -95px;
  background: radial-gradient(circle, rgba(50, 132, 239, .14), transparent 67%)
}

.why-card>span {
  color: #557b9c
}

.why-icon {
  background: rgba(50, 132, 239, .11);
  color: #7fc0ff;
  border: 1px solid rgba(157, 211, 249, .10)
}

.why-card h3 {
  color: #f1f8ff
}

.why-card p {
  color: #8fa9c0
}

/* Process */
.process-grid::before {
  background: linear-gradient(90deg, rgba(157, 211, 249, .08), rgba(50, 132, 239, .35), rgba(157, 211, 249, .08)) !important
}

.process-card b {
  color: #567c9c
}

.process-dot {
  background: #0a2138 !important;
  border-color: #4f9cec !important;
  box-shadow: 0 0 0 7px rgba(50, 132, 239, .08), 0 0 24px rgba(50, 132, 239, .20)
}

.process-card h3 {
  color: #eef7ff
}

.process-card p {
  color: #89a4bb
}

/* FAQ */
.faq-list {
  border-color: rgba(157, 211, 249, .11)
}

.faq-list details {
  border-color: rgba(157, 211, 249, .11)
}

.faq-list summary {
  color: #e9f4ff
}

.faq-list summary span {
  background: rgba(50, 132, 239, .11);
  color: #8ac9ff;
  border: 1px solid rgba(157, 211, 249, .10)
}

.faq-list details[open] summary span {
  background: #3284ef;
  color: #fff;
  border-color: #3284ef
}

.faq-list details p {
  color: #8faac1
}

/* Contact */
.contact-shell {
  background: linear-gradient(135deg, #123b61 0%, #1269bd 48%, #3284ef 100%);
  border: 1px solid rgba(157, 211, 249, .20);
  box-shadow: 0 36px 95px rgba(0, 8, 18, .33), 0 0 80px rgba(50, 132, 239, .10)
}

.contact-copy::before {
  border-color: rgba(255, 255, 255, .15)
}

.white-pill {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18)
}

.contact-copy h2 {
  color: #fff
}

.contact-copy h2 span {
  color: #bfe5ff
}

.contact-copy>p {
  color: #d5e8f8
}

.contact-points a {
  background: rgba(6, 29, 49, .18);
  border-color: rgba(255, 255, 255, .15)
}

.contact-points i {
  background: #dff2ff;
  color: #1b69b0
}

.contact-points small {
  color: #b8d4eb
}

.contact-points strong {
  color: #fff
}

.contact-form {
  background: rgba(7, 27, 46, .90);
  border: 1px solid rgba(157, 211, 249, .16);
  box-shadow: 0 25px 70px rgba(0, 8, 18, .27);
  backdrop-filter: blur(16px)
}

.form-title strong {
  color: #f3f9ff
}

.form-title span {
  color: #83a3be
}

.contact-form label {
  color: #9db7cc
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: #0b2843;
  border-color: rgba(157, 211, 249, .13);
  color: #edf7ff
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #5f7f9b
}

.contact-form select option {
  background: #0b2843;
  color: #edf7ff
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #4d9cf2;
  box-shadow: 0 0 0 4px rgba(50, 132, 239, .12)
}

.form-submit {
  background: linear-gradient(135deg, #3284ef, #5aa7f7);
  box-shadow: 0 14px 32px rgba(50, 132, 239, .26)
}

.form-submit:hover {
  background: linear-gradient(135deg, #4692f1, #71b8fb)
}

.form-note {
  color: #6687a2
}

/* Footer */
.site-footer {
  background: #061521;
  border-top: 1px solid rgba(157, 211, 249, .08)
}

.footer-top {
  border-color: rgba(157, 211, 249, .10)
}

.footer-brand p {
  color: #7694ad
}

.footer-links strong {
  color: #dbeeff
}

.footer-links a {
  color: #7997b0
}

.footer-links a:hover {
  color: #8fcaff
}

.footer-bottom {
  color: #577791
}

/* WhatsApp */
.wa-bubble {
  background: #0b2944;
  border-color: rgba(157, 211, 249, .15);
  box-shadow: 0 20px 55px rgba(0, 8, 18, .34)
}

.wa-bubble b {
  color: #dcefff
}

.wa-bubble small {
  color: #85a5be
}

.whatsapp-float {
  box-shadow: 0 15px 40px rgba(37, 211, 102, .24), 0 0 0 6px rgba(37, 211, 102, .06)
}

@media (max-width:860px) {
  .process-card {
    border-color: rgba(157, 211, 249, .11)
  }

  .hero::after {
    opacity: .12
  }
}

@media (max-width:580px) {
  .hero {
    background: radial-gradient(circle at 80% 20%, rgba(50, 132, 239, .17), transparent 28%), linear-gradient(150deg, #071827, #0a2036)
  }

  .service-card,
  .why-card {
    box-shadow: 0 14px 45px rgba(0, 8, 18, .16)
  }
}