:root {
    --mgym-demo-bg: #071119;
    --mgym-demo-panel: #0d1c26;
    --mgym-demo-border: #24404d;
    --mgym-demo-text: #f4fbfa;
    --mgym-demo-muted: #9db2b8;
    --mgym-demo-accent: #35d2b5;
    --mgym-demo-blue: #32a9d8;
}

body:has(.mgym-demo-landing) #wp--skip-link--target,
body:has(.mgym-demo-landing) .wp-block-group,
body:has(.mgym-demo-landing) .wp-block-post-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

body.page-template-default:has(.mgym-demo-landing) {
    margin: 0;
    background: var(--mgym-demo-bg);
}

body:has(.mgym-demo-landing) header,
body:has(.mgym-demo-landing) footer,
body:has(.mgym-demo-landing) .wp-block-post-title {
    display: none !important;
}

.mgym-demo-landing {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    min-height: 100vh;
    padding: clamp(40px, 7vw, 96px) clamp(20px, 6vw, 84px);
    color: var(--mgym-demo-text);
    background:
        radial-gradient(circle at 15% 10%, rgba(53, 210, 181, .18), transparent 35%),
        radial-gradient(circle at 88% 18%, rgba(50, 169, 216, .16), transparent 32%),
        var(--mgym-demo-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mgym-demo-hero {
    max-width: 850px;
    margin: 0 auto 48px;
    text-align: center;
}

.mgym-demo-kicker,
.mgym-demo-profile-label {
    color: var(--mgym-demo-accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mgym-demo-hero h1 {
    margin: 14px 0 18px;
    color: var(--mgym-demo-text);
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.mgym-demo-hero p {
    max-width: 690px;
    margin: 0 auto;
    color: var(--mgym-demo-muted);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.65;
}

.mgym-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1260px;
    margin: 0 auto;
}

.mgym-demo-profile {
    position: relative;
    display: flex;
    min-height: 330px;
    padding: 32px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--mgym-demo-border);
    border-radius: 26px;
    background: linear-gradient(150deg, rgba(18, 43, 53, .95), rgba(8, 21, 29, .98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.mgym-demo-profile::before {
    position: absolute;
    top: -80px;
    right: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(53, 210, 181, .1);
    content: "";
}

.mgym-demo-profile--staff::before { background: rgba(50, 169, 216, .12); }
.mgym-demo-profile--member::before { background: rgba(123, 224, 145, .1); }

.mgym-demo-profile h2 {
    margin: 30px 0 14px;
    color: var(--mgym-demo-text);
    font-size: 30px;
    line-height: 1.1;
}

.mgym-demo-profile p {
    margin: 0 0 30px;
    color: var(--mgym-demo-muted);
    font-size: 16px;
    line-height: 1.65;
}

.mgym-demo-profile form { margin-top: auto; }

.mgym-demo-profile button,
.mgym-demo-switcher {
    display: inline-flex;
    min-height: 48px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(74, 230, 203, .55);
    border-radius: 14px;
    color: #061411 !important;
    background: linear-gradient(135deg, var(--mgym-demo-accent), var(--mgym-demo-blue));
    box-shadow: 0 14px 35px rgba(36, 188, 174, .18);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    cursor: pointer;
}

.mgym-demo-profile button { width: 100%; padding: 12px 18px; }
.mgym-demo-profile button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.mgym-demo-footnote {
    margin: 28px auto 0;
    color: #718b92;
    font-size: 13px;
    text-align: center;
}

.mgym-demo-notice {
    margin: 22px auto 0;
    padding: 12px 16px;
    border: 1px solid #9a6a32;
    border-radius: 12px;
    color: #ffd9a6;
    background: #2a2118;
    font-size: 14px;
}

.mgym-demo-switcher {
    position: fixed;
    z-index: 100000;
    right: 20px;
    bottom: 20px;
    padding: 11px 18px;
}

.mgym-demo-readonly-notice {
    position: fixed;
    z-index: 100000;
    right: 20px;
    bottom: 82px;
    max-width: 360px;
    padding: 12px 16px;
    border: 1px solid #2e5f68;
    border-radius: 13px;
    color: #dffaf5;
    background: #10252e;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .26);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .mgym-demo-grid { grid-template-columns: 1fr; max-width: 620px; }
    .mgym-demo-profile { min-height: 260px; }
}

@media (max-width: 520px) {
    .mgym-demo-landing { padding: 42px 16px 90px; }
    .mgym-demo-profile { padding: 24px; border-radius: 20px; }
    .mgym-demo-switcher { right: 12px; bottom: 12px; left: 12px; }
    .mgym-demo-readonly-notice { right: 12px; bottom: 76px; left: 12px; max-width: none; }
}