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

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bfc8e0;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  padding: 18px;
}

/* ── Card ── */
.card {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 2 / 3;
  background: #dde4f4 url("bg-card.png") center / cover no-repeat;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  box-shadow: 18px 18px 45px rgba(72, 91, 130, 0.28), -10px -10px 25px rgba(255, 255, 255, 0.72);
}

/* ── Deco: dots top-left ── */
.dots-tl {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: repeat(5, 7px);
  gap: 5px;
  z-index: 2;
}
.dots-tl span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8898c0;
  opacity: 0.45;
  display: block;
}

.dots-tl,
.geo-tr {
  display: none;
}

/* ── Deco: geometric top-right ── */
.geo-tr {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Inner content ── */
.content {
  padding: 50px 20px 0;
  position: relative;
  z-index: 3;
}

/* ── Logo ── */
.logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.logo-img {
  width: 176px;
  max-width: 58%;
  height: auto;
  display: block;
}

/* ── Heading ── */
.heading {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #0c1a5e;
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: 20px;
}

/* ── Star divider ── */
.divider-star {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 26px;
}
.divider-star .line {
  height: 1px;
  width: 120px;
  background: linear-gradient(to right, transparent, #0c1a5e);
}
.divider-star .line.right {
  background: linear-gradient(to left, transparent, #0c1a5e);
}
.divider-star .star {
  color: #0c1a5e;
  font-size: 21px;
}

/* ── Connect badge ── */
.connect-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}
.connect-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0c1a5e;
  flex-shrink: 0;
}
.connect-line {
  flex: 1;
  height: 1px;
  background: #0c1a5e;
}
.connect-pill {
  background: linear-gradient(180deg, #14246d 0%, #071654 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 5px;
  padding: 12px 28px;
  border-radius: 50px;
  white-space: nowrap;
  margin: 0 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(8, 20, 75, 0.3);
}

/* ── Social grid ── */
.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
  margin-bottom: 34px;
}

.btn {
  display: flex;
  align-items: center;
  border-radius: 50px;
  padding: 10px 17px;
  cursor: pointer;
  text-decoration: none;
  min-height: 72px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid rgba(255, 255, 255, 0.72);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }

.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.vdiv {
  width: 1px;
  height: 40px;
  background: rgba(0,0,0,0.1);
  margin: 0 16px;
  flex-shrink: 0;
}

.btn-label {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
}
.btn-sublabel {
  font-weight: 400;
  font-size: 12px;
  display: block;
  margin-top: 3px;
}

/* Facebook */
.btn-fb {
  background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(222,231,248,0.82));
  box-shadow: 5px 8px 18px rgba(133, 151, 190, 0.35), -3px -3px 9px rgba(255,255,255,0.9);
}
.btn-fb .icon-circle {
  background: linear-gradient(145deg, #f7fbff, #dbe6f8);
  box-shadow: 4px 6px 11px rgba(143, 158, 190, 0.45), -2px -2px 6px #fff;
}
.btn-fb .btn-label { color: #1877f2; }

/* Website */
.btn-web {
  background: linear-gradient(145deg, rgba(245,255,246,0.86), rgba(224,242,224,0.86));
  box-shadow: 5px 8px 18px rgba(147, 177, 147, 0.35), -3px -3px 9px rgba(255,255,255,0.9);
}
.btn-web .icon-circle {
  background: linear-gradient(145deg, #f8fff8, #dcf0dd);
  box-shadow: 4px 6px 11px rgba(136, 166, 136, 0.45), -2px -2px 6px #fff;
}
.btn-web .btn-label { color: #2e8b30; }

/* YouTube */
.btn-yt {
  background: linear-gradient(145deg, rgba(255,248,248,0.86), rgba(251,226,229,0.86));
  box-shadow: 5px 8px 18px rgba(199, 151, 156, 0.32), -3px -3px 9px rgba(255,255,255,0.9);
}
.btn-yt .icon-circle {
  background: linear-gradient(145deg, #fffafa, #f9dfe2);
  box-shadow: 4px 6px 11px rgba(190, 136, 141, 0.43), -2px -2px 6px #fff;
}
.btn-yt .btn-label { color: #dd0000; }

/* TikTok */
.btn-tt {
  background: linear-gradient(145deg, rgba(255,255,255,0.84), rgba(231,236,248,0.84));
  box-shadow: 5px 8px 18px rgba(133, 151, 190, 0.35), -3px -3px 9px rgba(255,255,255,0.9);
}
.btn-tt .icon-circle {
  background: linear-gradient(145deg, #f8fbff, #dce5f5);
  box-shadow: 4px 6px 11px rgba(143, 158, 190, 0.45), -2px -2px 6px #fff;
}
.btn-tt .btn-label { color: #1a1a2e; }

/* Telegram */
.btn-tg {
  background: linear-gradient(145deg, rgba(248,252,255,0.86), rgba(224,238,251,0.86));
  box-shadow: 5px 8px 18px rgba(133, 151, 190, 0.35), -3px -3px 9px rgba(255,255,255,0.9);
}
.btn-tg .icon-circle {
  background: linear-gradient(145deg, #f8fcff, #d9e9f9);
  box-shadow: 4px 6px 11px rgba(143, 158, 190, 0.45), -2px -2px 6px #fff;
}
.btn-tg .btn-label  { color: #1a86d8; }
.btn-tg .btn-sublabel { color: #1a86d8; }

/* ── Values ── */
.values-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0 0;
  border-top: 0;
}
.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 74px;
}
.value-item i { font-size: 28px; color: #0c1a5e; }
.value-item span { font-size: 12px; color: #0c1a5e; font-weight: 700; }
.values-sep {
  width: 1px;
  height: 48px;
  background: rgba(12, 26, 94, 0.25);
}

/* ── Footer ── */
.footer {
  background: transparent;
  padding: 0 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 4;
}
.footer-dots {
  position: absolute;
  bottom: 10px;
  left: 14px;
  display: grid;
  grid-template-columns: repeat(5, 7px);
  gap: 5px;
}
.footer-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: block;
}
.footer-dots {
  display: none;
}
.footer i {
  width: 32px;
  height: 32px;
  border: 2px solid #0c1a5e;
  border-radius: 50%;
  color: #0c1a5e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.footer .site-url { color: #0c1a5e; font-size: 20px; font-weight: 800; letter-spacing: 0.2px; }

@media (max-width: 520px) {
  body {
    padding: 10px;
  }

  .card {
    border-radius: 24px;
  }

  .content {
    padding: 45px 28px 0;
  }

  .logo-img {
    width: 118px;
  }

  .logo-wrap {
    margin-bottom: 16px;
  }

  .heading {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .divider-star {
    gap: 10px;
    margin-bottom: 14px;
  }

  .divider-star .line {
    width: 74px;
  }

  .divider-star .star {
    font-size: 16px;
  }

  .connect-row {
    margin-bottom: 14px;
  }

  .connect-pill {
    font-size: 10px;
    letter-spacing: 2px;
    padding: 8px 14px;
    margin: 0 8px;
  }

  .social-grid {
    gap: 8px;
    margin-bottom: 14px;
  }

  .btn {
    min-height: 50px;
    padding: 7px 9px;
  }

  .icon-circle {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .vdiv {
    height: 27px;
    margin: 0 8px;
  }

  .btn-label {
    font-size: 12px;
  }

  .btn-sublabel,
  .value-item span {
    font-size: 8px;
  }

  .value-item {
    min-width: 48px;
    gap: 5px;
  }

  .value-item i {
    font-size: 18px;
  }

  .values-row {
    padding-top: 4px;
  }

  .values-sep {
    height: 34px;
  }

  .footer {
    padding-bottom: 20px;
  }

  .footer .site-url {
    font-size: 17px;
  }
}