/* ================================
   CONTENT PAGE LAYOUT
================================ */
.content-page {
  padding: 3rem 0;
  min-height: calc(100vh - 400px);
}

/* ================================
   SECTION CARD
================================ */
.about-section {
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 20px;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  animation: fadeInUp 0.3s ease-out;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.about-section:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
}

/* Heading */
.about-section h2 {
  color: #000;
  font-size: 32px;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

/* Text */

.about-section p {
  font-size: 16px;
  text-align: justify;
}

.about-section li {
  font-size: 16px;
  text-align: justify;
}

.about-section ul {
  margin: 0 0 0 1rem;
  padding-left: 1rem;
}

.sejarah-singkat h2 {
  margin-top: 1rem;
}

.cara-kerja {
  margin-top: -2rem;
  grid-column: 1 / -1;
}

.komunitas-roblox-roblox-di h2 {
  margin-top: 1rem;
}

.kesimpulan {
  margin-top: -2rem;
  grid-column: -1 / 1;
}

/* ================================
   HERO GRID
================================ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  margin-bottom: 60px;
}

/* ================================
   FOUNDER VISUAL CARD
================================ */
.founder-visual {
  background:
    radial-gradient(circle 520px at top right, #335ffe, transparent 70%),
    radial-gradient(circle 520px at bottom left, #335ffe, transparent 70%),
    #ffffff;
  border-radius: 28px;
  padding: 48px 40px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  height: 778px;

  /* tiap founder jadi kanvas kecil */
  .founder-big {
    position: relative;
  }

  /* Lingkaran biru */
  .blue-circle {
    position: absolute;
    width: 248px;
    height: 248px;
    background: #335ffe;
    border-radius: 50%;
    z-index: 2;
  }

  /* posisi lingkaran */
  .d1 {
    top: 27px;
    left: 19px;
  }

  .d2 {
    top: 432px;
    right: 38px;
  }

  /* 🧍 Foto founder */
  .founder-img {
    position: absolute;
    width: 275px;
    height: 275px;
    object-fit: cover;
    border-radius: 140%;
    z-index: 2;
  }

  /* posisi foto */
  .p1 {
    top: -5px;
    left: 5px;
  }

  .p2 {
    top: 400px;
    right: 21px;
  }

  .p3 {
    bottom: 333px;
    left: 70px;
  }

  .p4 {
    bottom: 333px;
    right: 222px;
  }

  .p5 {
    bottom: 333px;
    right: 70px;
  }

  .small-img {
    width: 90px;
    height: 90px;
  }

  .no-radius {
    border-radius: 0;
  }

  /* ✍️ Nama founder */
  .founder-name {
    position: absolute;
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    color: #000000;
    z-index: 1;
  }

  /* posisi nama */
  .n1 {
    top: 85px;
    left: 215px;
  }

  .n2 {
    top: 500px;
    left: 45px;
  }

  .n3 {
    top: 85px;
    left: 215px;

    color: transparent;
    -webkit-text-stroke: 2px #000000;

    z-index: 2;
  }

  .n4 {
    top: 500px;
    left: 45px;

    color: transparent;
    -webkit-text-stroke: 2px #000000;

    z-index: 2;
  }
}

.founder-visual:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
}

/* ================================
   GRID & IMAGES
================================ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  margin-bottom: 60px;
}

/* ===============================
   RDC VISUAL CARD
================================ */
.rdc-visual {
  background:
    radial-gradient(circle 1040px at top, #335ffe, transparent 20%),
    radial-gradient(circle 1040px at right 45%, #335ffe, transparent 20%),
    radial-gradient(circle 1040px at left 45%, #335ffe, transparent 20%),
    #000000;

  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  position: relative;
  height: 888px;

  .rdc-img {
    position: absolute;
    width: 100%;
    object-fit: contain;
    border-radius: 28px;
  }

  .x1 {
    top: 588px;
  }

  .x2 {
    top: 70px;
    left: 70px;
  }

  .x3 {
    top: 70px;
    right: 70px;
  }

  .x4 {
    top: 280px;
    right: 120px;
  }

  .bloxbux-img {
    width: 135px;
    height: 135px;
  }

  .awards-img {
    width: 270px;
    height: 270px;
  }
}

.rdc-visual:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
}

/* ================================
   ANIMATION
================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}