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

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

/* ========================= */
/* ROOT */
/* ========================= */

:root {

  --primary: #2b7fff;

  --primary-light: #8cb9ff;

  --dark: #07111f;

  --text: #5e6c83;

  --white: #ffffff;

}

/* ========================= */
/* BODY */
/* ========================= */

html {
  scroll-behavior: smooth;
}

body {

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

  overflow-x: hidden;

  min-height: 100vh;

  color: #111827;

  position: relative;

  background:
    radial-gradient(circle at top left,
      rgba(43, 127, 255, .12),
      transparent 28%),

    radial-gradient(circle at bottom right,
      rgba(43, 127, 255, .08),
      transparent 28%),

    linear-gradient(135deg,
      #ffffff 0%,
      #f8fbff 40%,
      #edf3fb 100%);

}

/* ========================= */
/* GRID */
/* ========================= */

.grid {

  position: fixed;

  inset: 0;

  background-image:

    linear-gradient(rgba(15, 23, 42, .04) 1px,
      transparent 1px),

    linear-gradient(90deg,
      rgba(15, 23, 42, .04) 1px,
      transparent 1px);

  background-size: 70px 70px;

  z-index: 0;

}

/* ========================= */
/* GLOW */
/* ========================= */

.glow {

  position: fixed;

  border-radius: 50%;

  filter: blur(90px);

  z-index: 0;

}

.glow-one {

  width: 450px;
  height: 450px;

  background:
    rgba(43, 127, 255, .12);

  top: -150px;
  left: -120px;

}

.glow-two {

  width: 400px;
  height: 400px;

  background:
    rgba(43, 127, 255, .10);

  bottom: -140px;
  right: -120px;

}

/* ========================= */
/* WRAPPER */
/* ========================= */

.wrapper {

  position: relative;

  z-index: 2;

  width: 100%;

  min-height: 100vh;

  padding: 24px;

}

/* ========================= */
/* CONTAINER */
/* ========================= */

.container {

  width: 100%;

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

  display: flex;

  overflow: hidden;

  border-radius: 38px;

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

  backdrop-filter: blur(24px);

  border:
    1px solid rgba(255, 255, 255, .95);

  box-shadow:

    0 25px 70px rgba(15, 23, 42, .08),

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

}

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

.left {

  width: 64%;

  padding: 60px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

/* ========================= */
/* TOP */
/* ========================= */

.top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

}

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

.logo {

  width: 360px;

  max-width: 100%;

  object-fit: contain;

  display: block;

  filter:
    drop-shadow(0 18px 40px rgba(43, 127, 255, .15));

}

/* ========================= */
/* BADGE */
/* ========================= */

.private-badge {

  padding: 14px 24px;

  border-radius: 100px;

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

  border:
    1px solid rgba(15, 23, 42, .05);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 4px;

  color: var(--primary);

  white-space: nowrap;

  box-shadow:
    0 10px 25px rgba(15, 23, 42, .05);

}

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

.hero {

  margin-top: 40px;

}

.hero-line {

  width: 120px;

  height: 5px;

  border-radius: 20px;

  background:
    linear-gradient(90deg,
      var(--primary),
      transparent);

  margin-bottom: 30px;

}

.hero h1 {

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    clamp(62px, 6vw, 125px);

  line-height: .88;

  letter-spacing: -4px;

  font-weight: 700;

  color: #07111f;

}

.hero h1 span {

  background:
    linear-gradient(90deg,
      var(--primary),
      var(--primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.hero p {

  margin-top: 32px;

  max-width: 850px;

  font-size: 18px;

  line-height: 2;

  color: var(--text);

  font-weight: 500;

}

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

.services {

  display: grid;

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

  gap: 18px;

  margin-top: 55px;

}

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

.card {

  position: relative;

  overflow: hidden;

  padding: 26px;

  border-radius: 26px;

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

  border:
    1px solid rgba(255, 255, 255, .95);

  transition: .35s ease;

  box-shadow:
    0 15px 35px rgba(15, 23, 42, .05);

}

.card:hover {

  transform:
    translateY(-8px);

  box-shadow:
    0 28px 50px rgba(43, 127, 255, .14);

}

.card::before {

  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(90deg,
      var(--primary),
      var(--primary-light));

}

.card-number {

  display: block;

  margin-bottom: 12px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  color: #8d9db5;

}

.card h3 {

  font-size: 17px;

  font-weight: 800;

  color: #07111f;

  margin-bottom: 12px;

}

.card p {

  font-size: 13px;

  line-height: 1.9;

  color: #607089;

}

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

.footer {

  margin-top: 40px;

  display: flex;

  align-items: center;

  gap: 18px;

}

.footer-line {

  flex: 1;

  height: 1px;

  background:
    linear-gradient(to right,
      rgba(43, 127, 255, .45),
      transparent);

}

.footer span {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 4px;

  color: #8b9ab1;

  white-space: nowrap;

}

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

.right {

  width: 36%;

  position: relative;

  background:
    linear-gradient(145deg,
      #07111f 0%,
      #0d1a2d 45%,
      #12223d 100%);

  display: flex;

  align-items: center;

  padding: 55px 45px;

  overflow: hidden;

}

.right::before {

  content: '';

  position: absolute;

  width: 700px;
  height: 700px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(43, 127, 255, .22),
      transparent 65%);

  top: -260px;
  right: -260px;

}

.right-content {

  position: relative;

  z-index: 2;

  width: 100%;

}

/* ========================= */
/* STATUS */
/* ========================= */

.status-badge {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 12px 22px;

  border-radius: 100px;

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

  border:
    1px solid rgba(255, 255, 255, .08);

  color: white;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 35px;

}

.pulse {

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: var(--primary);

  box-shadow:
    0 0 20px var(--primary);

}

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

.right h2 {

  font-size:
    clamp(60px, 5vw, 100px);

  line-height: .9;

  letter-spacing: -4px;

  font-weight: 900;

  color: white;

  margin-bottom: 28px;

}

.right p {

  color: #b8c4d8;

  font-size: 18px;

  line-height: 2;

}

/* ========================= */
/* CONTACT */
/* ========================= */

.contact {

  margin-top: 45px;

  border-radius: 30px;

  padding: 35px;

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

  border:
    1px solid rgba(255, 255, 255, .08);

  backdrop-filter: blur(16px);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, .25);

}

.contact small {

  display: block;

  margin-bottom: 16px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  color: #91a2be;

}

.contact h3 {

  font-size: 40px;

  line-height: 1;

  color: white;

  font-weight: 900;

  margin-bottom: 18px;

}

.contact p {

  color: #b7c3d7;

  font-size: 15px;

  line-height: 1.9;

  margin-bottom: 30px;

}

/* ========================= */
/* BUTTON */
/* ========================= */

.btn {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

  padding: 22px;

  border-radius: 18px;

  background:
    linear-gradient(90deg,
      var(--primary),
      #5d8cff);

  color: white;

  font-size: 15px;

  font-weight: 800;

  letter-spacing: 1px;

  transition: .35s ease;

  box-shadow:
    0 18px 40px rgba(43, 127, 255, .32);

}

.btn:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 28px 55px rgba(43, 127, 255, .42);

}

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

@media(max-width:1450px) {

  .container {

    flex-direction: column;

  }

  .left,
  .right {

    width: 100%;

  }

}

@media(max-width:992px) {

  .left,
  .right {

    padding: 40px;

  }

  .services {

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

  }

  .top {

    flex-direction: column;

    align-items: flex-start;

  }

}

@media(max-width:768px) {

  .wrapper {

    padding: 12px;

  }

  .container {

    border-radius: 24px;

  }

  .left,
  .right {

    padding: 28px 22px;

  }

  .services {

    grid-template-columns: 1fr;

  }

  .hero p,
  .right p {

    font-size: 16px;

  }

  .contact {

    padding: 25px;

  }

  .contact h3 {

    font-size: 32px;

  }

  .footer {

    flex-direction: column;

    align-items: flex-start;

  }

  .footer-line {

    width: 100%;

  }

}