:root {
      --bg: #0d0a14;
      --bg-soft: #171026;
      --card: rgba(31, 24, 46, 0.68);
      --line: rgba(203, 164, 255, 0.25);
      --text: #f4eeff;
      --muted: #b9a8d6;
      --accent: #9f6bff;
      --accent-2: #6f4ab6;
      --online: #31d47a;
      --offline: #ff6c8f;
    }

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

    body {
      font-family: "Sora", sans-serif;
      background: radial-gradient(circle at 10% 10%, #201437 0%, transparent 45%), radial-gradient(circle at 90% 80%, #2b1750 0%, transparent 40%), var(--bg);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.6;
      overflow-x: hidden;
    }

    .bg-glow,
    .bg-glow::before,
    .bg-glow::after {
      position: fixed;
      content: "";
      width: 45vw;
      height: 45vw;
      border-radius: 50%;
      filter: blur(70px);
      pointer-events: none;
      z-index: -1;
      opacity: 0.45;
    }

    .bg-glow {
      background: #8144ff;
      top: -10vw;
      right: -10vw;
      animation: floatA 12s ease-in-out infinite;
    }

    .bg-glow::before {
      background: #5f2fa8;
      top: 30vh;
      left: -55vw;
      animation: floatB 15s ease-in-out infinite;
    }

    .bg-glow::after {
      background: #ad82ff;
      top: 58vh;
      left: -15vw;
      animation: floatC 18s ease-in-out infinite;
    }

    @keyframes floatA {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-4vw, 3vw); }
    }

    @keyframes floatB {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(6vw, -3vw); }
    }

    @keyframes floatC {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-5vw, -2vw); }
    }

    .container {
      width: min(1100px, 92%);
      margin: 0 auto;
      padding: 60px 0 80px;
      display: grid;
      gap: 28px;
    }

    .card {
      background: var(--card);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25);
    }

    h1,
    h2,
    h3 {
      line-height: 1.2;
      letter-spacing: 0.2px;
    }

    h1 {
      font-size: clamp(2rem, 6vw, 3.5rem);
      margin-bottom: 14px;
    }

    h2 {
      font-size: clamp(1.3rem, 3.5vw, 2rem);
      margin-bottom: 16px;
    }

    p {
      color: var(--muted);
      max-width: 70ch;
    }

.hero-sub {
  font-size: 1.05rem;
  margin-bottom: 18px;
}

.about-layout {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 24px;
  align-items: center;
}

.about-logo-wrap {
  display: flex;
  justify-content: center;
}

.about-logo {
  width: min(100%, 320px);
  max-height: 320px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  padding: 14px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

.buttons {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

    .status-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 18px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.04);
      font-weight: 600;
      font-size: 0.92rem;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--offline);
      box-shadow: 0 0 0 0 rgba(255, 108, 143, 0.5);
      animation: pulse 1.8s infinite;
    }

    .dot.online {
      background: var(--online);
      box-shadow: 0 0 0 0 rgba(49, 212, 122, 0.5);
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 currentColor; }
      70% { box-shadow: 0 0 0 10px transparent; }
      100% { box-shadow: 0 0 0 0 transparent; }
    }

    .embed-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 14px;
    }

    iframe {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #110f18;
    }

    #stream-frame {
      min-height: 420px;
    }

    .chat-shell {
      position: relative;
      min-height: 420px;
      border-radius: 14px;
      border: 1px solid rgba(201, 167, 255, 0.42);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(20, 14, 33, 0.74);
      backdrop-filter: blur(12px) saturate(115%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 18px 36px rgba(72, 37, 130, 0.28);
      overflow: hidden;
      padding: 10px;
    }

    .chat-shell::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 14px;
      pointer-events: none;
      background: radial-gradient(90% 120% at 100% 0%, rgba(170, 119, 255, 0.24), transparent 55%);
      z-index: 0;
    }

    #chat-frame {
      position: relative;
      z-index: 1;
      min-height: calc(420px - 20px);
      height: calc(420px - 20px);
      border: 0;
      border-radius: 10px;
      background: #fff;
    }

    .stats {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .stat {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
    }

    .stat .label {
      color: var(--muted);
      font-size: 0.85rem;
    }

    .stat .value {
      font-size: 1.1rem;
      font-weight: 700;
      margin-top: 4px;
      word-break: break-word;
    }

    .latest-stream-text {
      margin-top: 6px;
      font-size: 0.92rem;
      line-height: 1.35;
      font-weight: 600;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .rp {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      align-items: center;
      gap: 24px;
    }

    .rp-content {
      width: 100%;
    }

    .rp-head h2 {
      margin-bottom: 6px;
    }

    .rp-sub {
      font-size: 0.95rem;
      color: #d9c8f7;
    }

    .rp-meta {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(140px, 1fr));
      gap: 10px;
    }

    .rp-meta-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      display: grid;
      gap: 2px;
      transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
    }

    .rp-meta-item:hover {
      transform: translateY(-2px);
      border-color: rgba(223, 189, 255, 0.62);
      background: rgba(167, 111, 255, 0.13);
      box-shadow: 0 10px 22px rgba(98, 51, 170, 0.26);
    }

    .rp-meta-item .label {
      color: var(--muted);
      font-size: 0.8rem;
    }

    .rp-meta-item .value {
      font-weight: 700;
      font-size: 0.94rem;
      color: #f6efff;
    }

    .rp-block h3 {
      margin-bottom: 8px;
      font-size: 1.02rem;
    }

    .rp-block p {
      max-width: 100%;
    }

    .rp img {
      width: 100%;
      max-width: 330px;
      margin-inline: auto;
      display: block;
      filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.45));
      animation: bob 4s ease-in-out infinite;
    }

    @keyframes bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    .hint {
      font-size: 0.85rem;
      color: #cbb7ea;
      margin-top: 10px;
    }

@media (max-width: 920px) {
  .about-layout,
  .embed-grid,
  .rp {
    grid-template-columns: 1fr;
  }

      .rp-meta {
        grid-template-columns: 1fr;
      }

      #stream-frame,
      .chat-shell {
        min-height: 360px;
      }

      #chat-frame {
        min-height: calc(360px - 20px);
        height: calc(360px - 20px);
      }

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

@media (max-width: 600px) {
  .stats {
    grid-template-columns: 1fr;
  }
}
/* ===== DUO GRID ===== */
.rp-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* ===== FLIP CARD ===== */
.flip-card {
  perspective: 1200px;
  height: 420px;
  cursor: pointer;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
}

/* FLIP */
.flip-card:hover .flip-inner,
.flip-card.flip .flip-inner {
  transform: rotateY(180deg);
}

/* FRONT + BACK */
.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  padding: 25px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #222;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* BACK */
.flip-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* ===== CHAR LAYOUT ===== */
.char-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.char-text {
  max-width: 55%;
}

.char-img {
  max-height: 280px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
}

/* Mason Style */
.flip-card.dark .char-img {
  filter: drop-shadow(0 0 30px rgba(255,0,80,0.5));
}

/* Tagline */
.tagline {
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .rp-duo {
    grid-template-columns: 1fr;
  }
}
/* ===== FAQ CLEAN DESIGN ===== */

.faq-clean {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.faq-block {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.faq-block h3 {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #fff;
}

.faq-block p {
  color: #cbb7ea;
  line-height: 1.6;
  margin-bottom: 8px;
}

.faq-block ul {
  margin: 10px 0;
  padding-left: 18px;
  color: #cbb7ea;
}

.faq-block li {
  margin-bottom: 6px;
}