.about-v2-page {
    --about-cyan: #52e5ff;
    --about-green: #7dff9b;
    --about-yellow: #ffd75a;
    --about-panel: rgba(11, 30, 54, 0.92);
    --about-panel-deep: rgba(4, 15, 31, 0.97);
    color: #f7fbff;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 12% 18%, rgba(30, 196, 255, 0.2), transparent 32%),
        radial-gradient(circle at 88% 42%, rgba(111, 77, 255, 0.16), transparent 34%),
        linear-gradient(180deg, #082748 0%, #06182d 42%, #071421 100%);
}

.about-v2-page .about-shell {
    width: min(1180px, calc(100% - 24px));
    margin: 0 auto;
    padding: 142px 0 46px;
}

.about-v2-page .creator-promo + .about-shell { padding-top: 24px; }

/* Keep the desktop navigation on one predictable row so the creator banner
   always begins beneath it instead of being covered by a wrapped second row. */
.about-v2-page .navbar {
    width: min(1180px, calc(100vw - 24px));
    max-width: none;
    flex-wrap: nowrap;
}

.about-hero,
.about-panel,
.about-game-card,
.about-step,
.about-value,
.about-faq details {
    border: 2px solid #040b16;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.11), 0 6px 0 rgba(0, 0, 0, 0.66), 0 22px 42px rgba(0, 0, 0, 0.28);
}

.about-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
    align-items: center;
    gap: 32px;
    min-height: 410px;
    padding: 44px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(35, 102, 171, 0.93), rgba(8, 27, 52, 0.98) 58%), var(--about-panel);
}

.about-hero::before,
.about-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.about-hero::before { right: -70px; bottom: -130px; width: 390px; height: 390px; border: 66px solid rgba(82, 229, 255, 0.08); }
.about-hero::after { top: -120px; left: 40%; width: 260px; height: 260px; background: rgba(125, 255, 155, 0.06); filter: blur(8px); }
.about-hero-copy,
.about-hero-visual { position: relative; z-index: 1; }

.about-kicker,
.about-section-kicker { color: #79ecff; font-size: 12px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }
.about-hero h1 { max-width: 720px; margin: 10px 0 14px; font-family: "Lilita One", Arial, sans-serif; font-size: clamp(43px, 5.5vw, 74px); font-weight: 400; line-height: 0.96; letter-spacing: -1px; }
.about-hero h1 span { color: var(--about-yellow); }
.about-hero-lead { max-width: 670px; margin: 0; color: #e1edf7; font-size: 17px; font-weight: 600; line-height: 1.65; }

.about-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.about-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 2px solid #04101c; border-radius: 13px; color: #04111e; background: linear-gradient(180deg, #84efff, #35cde9); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 4px 0 #087d99; font-family: "Lilita One", Arial, sans-serif; font-size: 15px; text-decoration: none; transition: transform 150ms ease, filter 150ms ease; }
.about-cta.secondary { color: #fff; background: linear-gradient(180deg, #435579, #273550); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 4px 0 #0a1221; }
.about-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }

.about-trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.about-trust-row span { padding: 7px 10px; border: 1px solid rgba(125, 255, 155, 0.42); border-radius: 999px; color: #dcffe5; background: rgba(5, 61, 37, 0.72); font-size: 12px; font-weight: 750; }

.about-hero-visual { display: grid; place-items: center; min-height: 310px; }
.about-logo-stack { position: relative; width: 300px; height: 270px; }
.about-logo-card { position: absolute; display: grid; place-items: center; width: 130px; height: 130px; border: 3px solid #06101e; border-radius: 28px; background: linear-gradient(145deg, #243f68, #101d35); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), 0 10px 0 rgba(0, 0, 0, 0.55), 0 24px 42px rgba(0, 0, 0, 0.38); }
.about-logo-card img { width: 94px; height: 94px; object-fit: contain; }
.about-logo-card.brawl { top: 0; left: 84px; z-index: 3; transform: rotate(-2deg); }
.about-logo-card.royale { left: 0; bottom: 4px; z-index: 2; transform: rotate(-7deg); }
.about-logo-card.clash { right: 0; bottom: 4px; z-index: 1; transform: rotate(7deg); }
.about-live-chip { position: absolute; z-index: 4; right: 76px; bottom: 0; padding: 8px 12px; border: 2px solid #06101e; border-radius: 999px; color: #06210e; background: linear-gradient(180deg, #a2ffad, #4ce16c); box-shadow: 0 3px 0 #197d34; font: 400 12px/1 "Lilita One", Arial, sans-serif; }

.about-section-block { margin-top: 52px; }
.about-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.about-section-heading h2 { margin: 5px 0 0; font-family: "Lilita One", Arial, sans-serif; font-size: clamp(30px, 4vw, 45px); font-weight: 400; line-height: 1; }
.about-section-heading p { max-width: 520px; margin: 0; color: #d2e2ef; font-size: 15px; font-weight: 600; line-height: 1.6; text-align: right; }

.about-game-grid,
.about-steps,
.about-values { display: grid; gap: 14px; }
.about-game-grid,
.about-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about-game-card,
.about-step,
.about-value,
.about-panel { border-radius: 20px; background: linear-gradient(150deg, var(--about-panel), var(--about-panel-deep)); }

.about-game-card { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 126px; padding: 18px; overflow: hidden; color: #fff; text-decoration: none; transition: transform 160ms ease, filter 160ms ease; }
.about-game-card:hover { transform: translateY(-3px); filter: brightness(1.08); }
.about-game-card::after { content: "→"; position: absolute; right: 16px; bottom: 14px; color: var(--about-cyan); font-size: 22px; font-weight: 950; }
.about-game-card > img { width: 74px; height: 74px; object-fit: contain; }
.about-game-card small,
.about-game-card strong,
.about-game-card span { display: block; }
.about-game-card small { color: var(--about-cyan); font-size: 9px; font-weight: 950; letter-spacing: 0.8px; text-transform: uppercase; }
.about-game-card strong { margin-top: 4px; font-family: "Lilita One", Arial, sans-serif; font-size: 23px; font-weight: 400; }
.about-game-card span { max-width: 230px; margin-top: 4px; color: #d2e2ef; font-size: 13px; font-weight: 600; line-height: 1.45; }

.about-step,
.about-value { padding: 21px; }
.about-step-head,
.about-value-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 15px; border: 2px solid #06101e; border-radius: 14px; background: linear-gradient(145deg, #2a5b8f, #102743); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 3px 0 rgba(0, 0, 0, 0.55); }
.about-step-head img,
.about-value-icon img { width: 34px; height: 34px; object-fit: contain; }
.about-step h3,
.about-value h3 { margin: 0 0 7px; font-family: "Lilita One", Arial, sans-serif; font-size: 22px; font-weight: 400; }
.about-step p,
.about-value p { margin: 0; color: #d5e3ef; font-size: 14px; font-weight: 600; line-height: 1.6; }

.about-creator-panel { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: center; gap: 26px; padding: 28px; }
.about-creator-copy h2 { margin: 5px 0 10px; font-family: "Lilita One", Arial, sans-serif; font-size: 38px; font-weight: 400; }
.about-creator-copy p { max-width: 700px; margin: 0; color: #d9e6f0; font-size: 15px; font-weight: 600; line-height: 1.65; }
.about-contact-card { display: grid; gap: 9px; padding: 15px; border: 1px solid rgba(82, 229, 255, 0.25); border-radius: 15px; background: rgba(3, 16, 32, 0.55); }
.about-contact-card a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #f3fbff; background: rgba(255, 255, 255, 0.1); font-size: 14px; font-weight: 700; text-decoration: none; }
.about-contact-card img { width: 25px; height: 25px; object-fit: contain; }

.about-faq { display: grid; gap: 10px; }
.about-faq details { padding: 0 18px; border-radius: 15px; background: linear-gradient(150deg, var(--about-panel), var(--about-panel-deep)); }
.about-faq summary { cursor: pointer; padding: 17px 28px 17px 0; font-family: "Lilita One", Arial, sans-serif; font-size: 18px; list-style: none; }
.about-faq summary::-webkit-details-marker { display: none; }
.about-faq details p { margin: -2px 0 17px; color: #d5e3ef; font-size: 14px; font-weight: 600; line-height: 1.65; }

.about-disclaimer { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 22px; }
.about-disclaimer > img { width: 52px; height: 52px; object-fit: contain; }
.about-disclaimer h2 { margin: 0 0 7px; font-family: "Lilita One", Arial, sans-serif; font-size: 25px; font-weight: 400; }
.about-disclaimer p { margin: 0; color: #d5e3ef; font-size: 13px; font-weight: 600; line-height: 1.65; }
.about-disclaimer a { color: var(--about-cyan); }

@media (max-width: 900px) {
    .about-hero { grid-template-columns: minmax(0, 1fr); padding: 32px; }
    .about-hero-copy { min-width: 0; }
    .about-hero-visual { min-height: 275px; }
    .about-game-grid,
    .about-steps { grid-template-columns: 1fr; }
    .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-creator-panel { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    body.about-v2-page {
        background:
            radial-gradient(circle at 18% 10%, rgba(30, 196, 255, 0.16), transparent 30%),
            linear-gradient(180deg, #082748 0%, #06182d 48%, #071421 100%) !important;
    }
    .about-v2-page .about-shell { width: min(100% - 18px, 1180px); padding-top: 118px; }
    .about-v2-page .navbar {
        left: 50%;
        width: calc(100vw - 16px);
        max-width: none;
        box-sizing: border-box;
        justify-content: flex-start;
        overflow: visible;
        transform: translateX(-50%) translateZ(0);
    }
    .about-v2-page .navbar::-webkit-scrollbar { display: none; }
    .about-v2-page .creator-promo + .about-shell { padding-top: 15px; }
    .about-hero { min-height: 0; padding: 25px 20px; border-radius: 21px; }
    .about-hero h1 { font-size: 44px; }
    .about-hero-lead { font-size: 16px; }
    .about-actions { display: grid; }
    .about-cta { width: 100%; box-sizing: border-box; }
    .about-logo-stack { transform: scale(0.88); }
    .about-section-block { margin-top: 40px; }
    .about-section-heading { display: block; }
    .about-section-heading p { margin-top: 9px; text-align: left; }
    .about-values { grid-template-columns: 1fr; }
    .about-game-card { grid-template-columns: 64px minmax(0, 1fr); }
    .about-game-card > img { width: 64px; height: 64px; }
    .about-disclaimer { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
    .about-hero-visual { min-height: 235px; }
    .about-logo-stack { transform: scale(0.74); }
}

@media (prefers-reduced-motion: reduce) {
    .about-cta,
    .about-game-card { transition: none; }
}