@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #02060c;
  --bg2: #07101c;
  --panel: #081522;
  --panel2: #0b1a2b;

  --white: #ffffff;
  --text: #f3f7fb;
  --muted: #9cadbf;

  --line: rgba(255,255,255,0.09);

  --blue: #0b72ff;
  --blue2: #0058d8;
  --cyan: #27cfff;
  --red: #ff2e3f;
  --silver: #dce8f4;

  --radius: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", Arial, sans-serif;
  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(11,114,255,0.12),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 35%,
      rgba(39,207,255,0.07),
      transparent 28%
    ),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: 0.15;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );

  background-size: 50px 50px;
}

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

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: min(1180px, 92%);
  margin: auto;
}


/* HEADER */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  background: rgba(2,6,12,0.79);
  backdrop-filter: blur(18px);

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

.navbar {
  min-height: 82px;

  display: flex;
  align-items: center;

  gap: 26px;
}

.brand {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: max-content;
}

.brand-mark {
  width: 46px;
  height: 46px;

  border-radius: 13px;

  display: grid;
  place-items: center;

  font-size: 25px;
  font-weight: 900;
  font-style: italic;

  color: white;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.02)
    ),
    linear-gradient(
      135deg,
      var(--blue),
      #001d55
    );

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

  box-shadow:
    0 0 26px rgba(11,114,255,0.32);

  transform: skew(-5deg);
}

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

.brand-text strong {
  font-size: 21px;
  letter-spacing: 1px;
  line-height: 1;
}

.brand-text strong span {
  color: var(--cyan);
}

.brand-text small {
  margin-top: 5px;

  color: #a8b8c9;

  font-size: 8px;
  letter-spacing: 1.6px;

  text-transform: uppercase;
}

.menu {
  display: flex;
  gap: 25px;

  margin-left: auto;
}

.menu a {
  color: #c4cfdd;

  font-size: 13px;
  font-weight: 600;

  transition: 0.25s;
}

.menu a:hover {
  color: white;

  text-shadow:
    0 0 18px rgba(39,207,255,0.7);
}

.nav-cta {
  padding: 12px 18px;

  border-radius: 10px;

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

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

  box-shadow:
    0 12px 30px rgba(11,114,255,0.25);
}

.menu-button {
  display: none;

  margin-left: auto;

  width: 44px;
  height: 44px;

  border-radius: 10px;

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

  color: white;

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


/* HERO */

.hero {
  position: relative;

  min-height: 100vh;

  padding-top: 82px;

  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 49.7%,
      rgba(39,207,255,0.035) 50%,
      transparent 50.3%
    ),
    linear-gradient(
      transparent 49.7%,
      rgba(39,207,255,0.035) 50%,
      transparent 50.3%
    );

  background-size: 84px 84px;

  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 88%
    );
}

.hero-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(80px);
}

.hero-glow-one {
  width: 450px;
  height: 450px;

  right: 7%;
  top: 17%;

  background:
    rgba(11,114,255,0.17);
}

.hero-glow-two {
  width: 260px;
  height: 260px;

  right: 26%;
  top: 37%;

  background:
    rgba(39,207,255,0.09);
}

.hero-layout {
  position: relative;

  z-index: 2;

  min-height:
    calc(100vh - 82px);

  display: grid;

  grid-template-columns:
    0.92fr 1.08fr;

  gap: 55px;

  align-items: center;

  padding:
    72px 0;
}

.hero-copy {
  position: relative;

  z-index: 3;
}

.eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: var(--cyan);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 2px;
}

.eyebrow-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 17px var(--cyan);
}

.hero h1 {
  margin-top: 18px;

  font-size:
    clamp(46px, 5.5vw, 72px);

  line-height: 1.02;

  letter-spacing: -2.5px;
}

.hero h1 span,
.section-heading h2 b,
.about-copy h2 b,
.contact-info h2 b {
  background:
    linear-gradient(
      90deg,
      #f8fbff,
      var(--cyan) 58%,
      #3d79ff
    );

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

  color: transparent;
}

.hero-copy > p {
  margin-top: 24px;

  max-width: 650px;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.8;
}

.hero-actions {
  display: flex;

  gap: 14px;

  margin-top: 34px;
}

.button {
  min-height: 52px;

  padding:
    0 22px;

  border-radius: 12px;

  border: 0;

  display: inline-flex;

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

  gap: 10px;

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

  transition: 0.25s;
}

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

.button-primary {
  color: white;

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

  box-shadow:
    0 16px 40px rgba(11,114,255,0.29);
}

.button-secondary {
  color: white;

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

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

.hero-points {
  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  margin-top: 32px;
}

.hero-points div {
  color: #b1c0d1;

  font-size: 12px;
}

.hero-points i {
  margin-right: 4px;

  color: var(--cyan);
}


/* HERO LOGO */

.hero-visual {
  position: relative;

  min-height: 590px;

  display: grid;

  place-items: center;
}

.logo-frame {
  width:
    min(100%, 680px);

  border-radius: 26px;

  overflow: hidden;

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

  background: #000;

  box-shadow:
    0 35px 100px rgba(0,0,0,0.55),
    0 0 90px rgba(11,114,255,0.17);
}

.logo-frame img {
  display: block;

  width: 100%;
  height: auto;
}

/* STRIP */

.service-strip {
  border-block:
    1px solid var(--line);

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

.service-strip-grid {
  min-height: 84px;

  display: grid;

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

.service-strip-grid div {
  display: flex;

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

  gap: 10px;

  color: #bac7d7;

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

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

.service-strip-grid div:first-child {
  border-left:
    1px solid var(--line);
}

.service-strip-grid i {
  color:
    var(--cyan);
}


/* GENERAL */

.section {
  padding:
    110px 0;
}

.section-heading {
  max-width:
    760px;

  margin:
    0 auto 58px;

  text-align:
    center;
}

.section-heading > span,
.mini-heading {
  color:
    var(--cyan);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    2px;
}

.section-heading h2,
.about-copy h2,
.contact-info h2 {
  margin-top:
    13px;

  font-size:
    clamp(34px, 4vw, 50px);

  line-height:
    1.13;

  letter-spacing:
    -1.6px;
}

.section-heading p {
  margin-top:
    16px;

  color:
    var(--muted);

  line-height:
    1.8;
}


/* SERVICES */

.services {
  background:
    linear-gradient(
      to bottom,
      rgba(7,17,30,0.83),
      rgba(2,6,12,0.97)
    );
}

.service-grid {
  display:
    grid;

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

  gap:
    18px;
}

.service-card {
  --accent:
    var(--blue);

  position:
    relative;

  overflow:
    hidden;

  min-height:
    385px;

  padding:
    30px;

  border-radius:
    var(--radius);

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

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    ),
    var(--panel);

  transition:
    0.28s;
}

.service-card::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    100%;

  height:
    2px;

  background:
    var(--accent);

  box-shadow:
    0 0 24px var(--accent);
}

.service-card::after {
  content:
    "";

  position:
    absolute;

  width:
    150px;

  height:
    150px;

  border-radius:
    50%;

  right:
    -70px;

  top:
    -70px;

  background:
    var(--accent);

  filter:
    blur(70px);

  opacity:
    0.11;
}

.service-card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    0 24px 60px rgba(0,0,0,0.3);
}

.accent-blue {
  --accent:
    #0b72ff;
}

.accent-red {
  --accent:
    #ff2e3f;
}

.accent-cyan {
  --accent:
    #2ed8ff;
}

.accent-silver {
  --accent:
    #dce8f4;
}

.service-icon {
  width:
    62px;

  height:
    62px;

  border-radius:
    16px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--accent);

  font-size:
    24px;

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

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

.service-card h3 {
  margin-top:
    23px;

  font-size:
    21px;
}

.service-card > p {
  margin-top:
    12px;

  color:
    var(--muted);

  line-height:
    1.7;

  font-size:
    14px;
}

.service-card ul {
  list-style:
    none;

  margin-top:
    19px;

  padding-top:
    18px;

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

  display:
    grid;

  gap:
    9px;
}

.service-card li {
  color:
    #bdc8d6;

  font-size:
    12px;
}

.service-card li::before {
  content:
    "›";

  color:
    var(--accent);

  font-weight:
    900;

  margin-right:
    8px;
}


/* ABOUT */

.about {
  background:
    radial-gradient(
      circle at 9% 50%,
      rgba(11,114,255,0.08),
      transparent 30%
    );
}

.about-layout {
  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap:
    90px;

  align-items:
    center;
}

.about-visual {
  position:
    relative;

  min-height:
    520px;

  display:
    grid;

  place-items:
    center;
}

.novatek-core {
  position:
    relative;

  z-index:
    3;

  width:
    190px;

  height:
    190px;

  border-radius:
    38px;

  display:
    grid;

  place-items:
    center;

  transform:
    rotate(45deg);

  font-size:
    108px;

  font-weight:
    900;

  font-style:
    italic;

  color:
    white;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.02)
    ),
    linear-gradient(
      135deg,
      var(--blue),
      #031d56
    );

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

  box-shadow:
    0 0 70px rgba(11,114,255,0.25),
    inset 0 0 45px rgba(255,255,255,0.05);

  text-shadow:
    0 0 24px rgba(39,207,255,0.6);
}

.orbit {
  position:
    absolute;

  border-radius:
    50%;

  transform:
    rotate(-13deg);

  border:
    1px solid rgba(39,207,255,0.24);
}

.orbit-one {
  width:
    390px;

  height:
    165px;
}

.orbit-two {
  width:
    500px;

  height:
    220px;

  border-color:
    rgba(255,255,255,0.08);
}

.about-badge {
  position:
    absolute;

  left:
    10%;

  bottom:
    10%;

  z-index:
    4;

  display:
    flex;

  gap:
    13px;

  align-items:
    center;

  padding:
    16px 18px;

  border-radius:
    14px;

  background:
    rgba(7,17,30,0.92);

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

  box-shadow:
    0 20px 55px rgba(0,0,0,0.35);
}

.about-badge i {
  color:
    var(--cyan);

  font-size:
    23px;
}

.about-badge div {
  display:
    flex;

  flex-direction:
    column;
}

.about-badge strong {
  font-size:
    14px;
}

.about-badge small {
  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    10px;
}

.about-copy p {
  margin-top:
    17px;

  color:
    var(--muted);

  line-height:
    1.82;
}

.about-checks {
  display:
    grid;

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

  gap:
    12px;

  margin:
    27px 0 30px;
}

.about-checks div {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #c1ccda;

  font-size:
    13px;
}

.about-checks i {
  width:
    25px;

  height:
    25px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  font-size:
    11px;

  color:
    var(--cyan);

  background:
    rgba(39,207,255,0.08);
}


/* PROCESS */

.process {
  background:
    linear-gradient(
      to bottom,
      rgba(8,20,35,0.8),
      rgba(2,6,12,0.98)
    );

  border-block:
    1px solid var(--line);
}

.process-grid {
  display:
    grid;

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

  gap:
    16px;
}

.process-card {
  position:
    relative;

  min-height:
    260px;

  padding:
    28px;

  border-radius:
    18px;

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

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

.process-card em {
  position:
    absolute;

  right:
    20px;

  top:
    14px;

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

  font-size:
    42px;

  font-weight:
    900;

  font-style:
    normal;
}

.process-card > i {
  color:
    var(--cyan);

  font-size:
    28px;
}

.process-card h3 {
  margin-top:
    24px;

  font-size:
    17px;
}

.process-card p {
  margin-top:
    11px;

  color:
    var(--muted);

  line-height:
    1.7;

  font-size:
    13px;
}


/* CTA */

.cta {
  padding:
    72px 0;

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(39,207,255,0.25),
      transparent 22%
    ),
    linear-gradient(
      135deg,
      #09295a,
      #0b72ff
    );
}

.cta-layout {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;
}

.cta span {
  color:
    #a8ddff;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    2px;
}

.cta h2 {
  max-width:
    780px;

  margin-top:
    10px;

  font-size:
    34px;

  line-height:
    1.25;
}

.button-light {
  color:
    #07111e;

  background:
    white;
}


/* CONTACT */

.contact {
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(11,114,255,0.08),
      transparent 30%
    );
}

.contact-layout {
  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap:
    80px;

  align-items:
    start;
}

.contact-info > p {
  margin-top:
    17px;

  color:
    var(--muted);

  line-height:
    1.8;
}

.contact-list {
  display:
    grid;

  gap:
    12px;

  margin-top:
    30px;
}

.contact-item {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    14px 16px;

  border-radius:
    14px;

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

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

.contact-icon {
  width:
    44px;

  height:
    44px;

  border-radius:
    12px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--cyan);

  background:
    rgba(39,207,255,0.08);
}

.contact-item > div:last-child {
  display:
    flex;

  flex-direction:
    column;
}

.contact-item small {
  color:
    var(--muted);

  font-size:
    10px;
}

.contact-item strong {
  margin-top:
    3px;

  font-size:
    13px;
}

.form-card {
  padding:
    34px;

  border-radius:
    22px;

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

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.02)
    ),
    var(--panel);

  box-shadow:
    0 28px 75px rgba(0,0,0,0.28);
}

.form-heading span {
  color:
    var(--cyan);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    2px;
}

.form-heading h3 {
  margin-top:
    6px;

  font-size:
    26px;
}

form {
  margin-top:
    24px;
}

.form-row {
  display:
    grid;

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

  gap:
    12px;
}

label {
  display:
    block;

  margin-bottom:
    13px;
}

label > span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #acb9c9;

  font-size:
    11px;

  font-weight:
    700;
}

input,
select,
textarea {
  width:
    100%;

  padding:
    14px 15px;

  border-radius:
    10px;

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

  outline:
    0;

  color:
    white;

  background:
    #07111e;
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    rgba(39,207,255,0.6);

  box-shadow:
    0 0 0 3px rgba(39,207,255,0.06);
}

textarea {
  resize:
    vertical;
}

.form-button {
  width:
    100%;
}

.form-status {
  min-height:
    18px;

  margin-top:
    12px;

  text-align:
    center;

  color:
    #9fb0c2;

  font-size:
    11px;
}


/* FOOTER */

.footer {
  padding-top:
    70px;

  background:
    #010409;

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

.footer-grid {
  display:
    grid;

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

  gap:
    55px;

  padding-bottom:
    55px;
}

.footer-brand {
  margin-bottom:
    15px;
}

.footer-description {
  max-width:
    330px;

  color:
    #8799ad;

  line-height:
    1.7;

  font-size:
    12px;
}

.footer h4 {
  margin-bottom:
    17px;

  font-size:
    14px;
}

.footer-grid > div > a:not(.brand),
.footer-grid > div > p {
  display:
    block;

  margin-bottom:
    10px;

  color:
    #8ea0b4;

  font-size:
    12px;
}

.footer-grid > div > a:not(.brand):hover {
  color:
    white;
}

.footer-bottom {
  padding:
    22px 4%;

  text-align:
    center;

  color:
    #66798e;

  font-size:
    11px;

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


/* WHATSAPP */

.whatsapp-float {
  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    999;

  width:
    58px;

  height:
    58px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  color:
    white;

  background:
    #25d366;

  font-size:
    28px;

  box-shadow:
    0 16px 38px rgba(0,0,0,0.35);

  transition:
    0.25s;
}

.whatsapp-float:hover {
  transform:
    scale(1.07);
}


/* SCROLL REVEAL */

.reveal {
  opacity:
    0;

  transform:
    translateY(22px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.show {
  opacity:
    1;

  transform:
    none;
}


/* TABLET */

@media (max-width: 1000px) {

  .menu {
    gap:
      16px;
  }

  .nav-cta {
    display:
      none;
  }

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

    gap:
      20px;
  }

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

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

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

  .about-layout,
  .contact-layout {
    grid-template-columns:
      1fr;
  }

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

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

}


/* MOBILE */

@media (max-width: 760px) {

  .navbar {
    min-height:
      70px;
  }

  .brand-text small {
    display:
      none;
  }

  .menu-button {
    display:
      grid;

    place-items:
      center;
  }

  .menu {
    position:
      absolute;

    top:
      70px;

    left:
      0;

    right:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      0;

    max-height:
      0;

    overflow:
      hidden;

    margin:
      0;

    background:
      rgba(2,6,12,0.98);

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

    transition:
      max-height 0.3s ease;
  }

  .menu.open {
    max-height:
      420px;
  }

  .menu a {
    padding:
      16px 5%;

    border-bottom:
      1px solid rgba(255,255,255,0.06);
  }

  .hero {
    padding-top:
      70px;
  }

  .hero-layout {
    padding:
      78px 0 54px;
  }

  .hero h1 {
    font-size:
      46px;
  }

  .hero-copy > p {
    font-size:
      15px;
  }

  .hero-actions {
    flex-direction:
      column;
  }

  .button {
    width:
      100%;
  }

  .hero-points {
    display:
      grid;

    gap:
      10px;
  }

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

  .logo-frame {
    border-radius:
      18px;
  }

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

  .service-strip-grid div {
    min-height:
      62px;

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

  .section {
    padding:
      78px 0;
  }

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

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

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

  .novatek-core {
    width:
      145px;

    height:
      145px;

    font-size:
      80px;
  }

  .orbit-one {
    width:
      300px;

    height:
      130px;
  }

  .orbit-two {
    width:
      370px;

    height:
      170px;
  }

  .about-badge {
    left:
      0;

    bottom:
      8%;
  }

  .about-checks {
    grid-template-columns:
      1fr;
  }

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

  .cta-layout {
    flex-direction:
      column;

    text-align:
      center;
  }

  .cta h2 {
    font-size:
      27px;
  }

  .form-row {
    grid-template-columns:
      1fr;
  }

  .form-card {
    padding:
      24px 19px;
  }

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

    gap:
      32px;
  }

  .whatsapp-float {
    width:
      52px;

    height:
      52px;

    right:
      16px;

    bottom:
      16px;

    font-size:
      24px;
  }

}


@media (max-width: 430px) {

  .hero h1 {
    font-size:
      39px;

    letter-spacing:
      -1.7px;
  }

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

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

  .service-strip-grid div {
    border-left:
      1px solid var(--line);
  }

}


/* SERVICE AREA */

.service-area {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(11,114,255,0.11),
      transparent 34%
    ),
    linear-gradient(
      to bottom,
      rgba(5,14,25,0.96),
      rgba(2,6,12,0.98)
    );

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

.city-grid {
  display:
    grid;

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

  gap:
    14px;

  max-width:
    980px;

  margin:
    0 auto;
}

.city-card {
  min-height:
    74px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    16px;

  border-radius:
    15px;

  color:
    #dce7f3;

  font-size:
    13px;

  font-weight:
    800;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    );

  transition:
    0.25s;
}

.city-card i {
  color:
    var(--cyan);

  filter:
    drop-shadow(0 0 10px rgba(39,207,255,0.35));
}

.city-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(39,207,255,0.32);

  box-shadow:
    0 15px 35px rgba(0,0,0,0.22);
}

.footer-region {
  line-height:
    1.7;
}


@media (max-width: 760px) {

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

}


@media (max-width: 430px) {

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

}