/* ═══════════════════════════════════════════════════════════════
   Mecs Client — dedicated client page
   Navy + crystal-blue identity taken from the launcher (Theme.xaml).
   Everything is scoped to body.mecs-page so the rest of the site
   keeps its parchment/gold theme.
   ═══════════════════════════════════════════════════════════════ */

html:has(body.mecs-page) { background: #0a0e14; }

body.mecs-page {
    /* Launcher palette */
    --bg:           #0a0e14;
    --bg-alt:       #0c1118;
    --bg-card:      #111a24;
    --bg-card-alt:  #16222e;
    --surface:      #17232f;
    --border:       #212b38;
    --border-glow:  rgba(108, 196, 242, .14);

    --text:         #e8edf4;
    --text-dim:     #a3aebd;
    --text-bright:  #f4f8fc;

    --accent:       #6cc4f2;
    --accent-glow:  rgba(108, 196, 242, .22);
    --accent-light: #9ad6f7;
    --gold:         #6cc4f2;   /* .accent / .logo-accent turn crystal-blue */
    --gold-dim:     rgba(108, 196, 242, .2);

    --success:      #7fd3a6;
    --danger:       #e97070;
    --info:         #6cc4f2;

    /* The shared "retro" layer blends section/card gradients into --stone;
       keep that warm-parchment token navy here too. */
    --stone:        #0e1620;
    --stone-light:  #101a24;

    --gump-border:    #212b38;
    --gump-highlight: #3c90c4;

    background: var(--bg);
    color: var(--text);
}

/* ── Navbar ───────────────────────────────────────────────────── */
body.mecs-page .navbar {
    background: rgba(9, 13, 19, .82);
    border-bottom-color: transparent;
}

body.mecs-page .navbar.scrolled {
    background: rgba(9, 13, 19, .94);
    border-bottom-color: var(--border);
    box-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

body.mecs-page .logo-icon {
    filter: drop-shadow(0 2px 10px rgba(108, 196, 242, .32));
}

/* Keep the EvoRealm wordmark gold — only the Mecs content is blue. */
body.mecs-page .logo-text .logo-accent { color: #c9a24a; }

body.mecs-page .nav-logo:hover .logo-icon {
    filter: drop-shadow(0 4px 14px rgba(108, 196, 242, .55));
}

body.mecs-page .nav-cta {
    background: linear-gradient(135deg, #6cc4f2, #2f7fb8);
    color: #06202e !important;
    box-shadow: 0 4px 18px rgba(108, 196, 242, .22);
}

body.mecs-page .nav-cta:hover {
    color: #06202e !important;
    box-shadow: 0 6px 24px rgba(108, 196, 242, .34);
}

body.mecs-page .nav-cta.nav-discord {
    background: linear-gradient(135deg, #5865F2, #404EED);
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(88, 101, 242, .3);
}

/* ── Buttons ──────────────────────────────────────────────────── */
body.mecs-page .btn-primary {
    background: linear-gradient(135deg, #9ad6f7, #58b3e6 55%, #2f7fb8);
    color: #06202e;
    box-shadow: 0 6px 26px rgba(108, 196, 242, .26);
}

body.mecs-page .btn-primary:hover {
    color: #06202e;
    box-shadow: 0 10px 34px rgba(108, 196, 242, .38);
}

body.mecs-page .btn-outline {
    border-color: #2a3a4b;
    color: var(--text);
}

body.mecs-page .btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent-light);
    box-shadow: 0 0 0 1px rgba(108, 196, 242, .18) inset;
}

/* ── Hero ─────────────────────────────────────────────────────── */
body.mecs-page .client-hero {
    min-height: 92vh;
    background:
        radial-gradient(ellipse 62% 46% at 50% 6%, rgba(108, 196, 242, .17) 0%, rgba(108, 196, 242, 0) 62%),
        radial-gradient(ellipse 90% 60% at 50% 112%, rgba(30, 62, 92, .5) 0%, rgba(10, 14, 20, 0) 70%),
        linear-gradient(180deg, #0b141d 0%, #0a0e14 60%);
}

/* Keep the readability scrim from style.css, swapped to navy, plus a faint
   crystal-blue dot field on top. */
body.mecs-page .client-hero::before {
    background:
        url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='64' height='64' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='32' cy='32' r='.7' fill='%236cc4f2' opacity='.14'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='64' height='64' fill='url(%23g)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at center, rgba(10, 14, 20, .45) 0%, rgba(10, 14, 20, .7) 55%, rgba(10, 14, 20, .92) 100%),
        linear-gradient(to bottom, rgba(10, 14, 20, .2) 0%, transparent 30%, transparent 70%, rgba(10, 14, 20, .6) 100%);
    opacity: 1;
}

body.mecs-page .client-hero .hero-bg-layer {
    background-size: cover;
    background-position: center top;
    opacity: .1;
    filter: grayscale(.55) contrast(1.05);
}

.client-hero .hero-content {
    max-width: 880px;
}

/* Logo tile */
.mecs-mark {
    width: clamp(88px, 13vw, 118px);
    margin: 0 auto 1.6rem;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(108, 196, 242, .26);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(108, 196, 242, .18), transparent 70%),
        linear-gradient(180deg, #101c28, #0a121a);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, .6),
        0 0 44px rgba(108, 196, 242, .18),
        0 0 0 1px rgba(255, 255, 255, .02) inset;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.mecs-mark:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .65),
        0 0 62px rgba(108, 196, 242, .28),
        0 0 0 1px rgba(255, 255, 255, .03) inset;
}

.mecs-mark img {
    width: 100%;
    height: auto;
    display: block;
}

.mecs-mark.mecs-mark-sm {
    width: 72px;
    border-radius: 18px;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 34px rgba(108, 196, 242, .2);
}

body.mecs-page .hero-name {
    background: linear-gradient(135deg, #bfe6fb, #6cc4f2 45%, #2f7fb8 75%, #bfe6fb);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 60px rgba(108, 196, 242, .18);
}

body.mecs-page .hero-pre {
    color: #7f93a7;
}

body.mecs-page .hero-tagline {
    color: var(--text-dim);
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

body.mecs-page .small-note {
    color: #7f8a99;
}

/* Spec pills */
.spec-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 2rem 0 .75rem;
}

.spec-strip li {
    background: rgba(17, 26, 36, .8);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: .4rem 1rem;
    font-size: .82rem;
    color: var(--text-dim);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.spec-strip li:last-child {
    color: var(--accent-light);
    border-color: rgba(108, 196, 242, .3);
}

/* ── Steps ────────────────────────────────────────────────────── */
.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.step-card {
    position: relative;
    background: linear-gradient(180deg, var(--bg-card), #0e1620);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem 1.5rem 1.5rem;
    transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.step-card:hover {
    border-color: rgba(108, 196, 242, .55);
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .45), 0 0 0 1px rgba(108, 196, 242, .12) inset;
}

.step-num {
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: #06202e;
    background: linear-gradient(135deg, #9ad6f7, #3f8fca);
    box-shadow: 0 4px 16px rgba(108, 196, 242, .35);
}

.step-card h3 { margin: .75rem 0 .5rem; font-size: 1.1rem; }
.step-card p  { color: var(--text-dim); font-size: .92rem; }

/* ── Feature cards ────────────────────────────────────────────── */
body.mecs-page .feature-card {
    background: linear-gradient(180deg, var(--bg-card), #0e1620);
}

body.mecs-page .feature-card:hover {
    border-color: rgba(108, 196, 242, .55);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .45), 0 0 30px rgba(108, 196, 242, .1);
}

body.mecs-page .feature-card:hover .feature-icon {
    filter: drop-shadow(0 0 14px rgba(108, 196, 242, .35));
}

/* Line icons drawn with the page, not UO art. */
body.mecs-page .feature-icon.mecs-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 12px;
    color: var(--accent);
    background: linear-gradient(180deg, rgba(108, 196, 242, .14), rgba(108, 196, 242, .05));
    border: 1px solid rgba(108, 196, 242, .3);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .35) inset,
        0 8px 20px rgba(0, 0, 0, .35);
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

body.mecs-page .feature-icon.mecs-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

body.mecs-page .feature-card:hover .feature-icon.mecs-icon,
body.mecs-page .step-card:hover .feature-icon.mecs-icon {
    color: var(--accent-light);
    border-color: rgba(108, 196, 242, .55);
    background: linear-gradient(180deg, rgba(108, 196, 242, .2), rgba(108, 196, 242, .07));
}

/* ── Callout (SmartScreen / first run) ────────────────────────── */
.callout {
    max-width: 760px;
    margin: 0 auto;
    background:
        linear-gradient(180deg, rgba(108, 196, 242, .05), transparent 55%),
        var(--bg-card);
    border: 1px solid rgba(108, 196, 242, .28);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 44px rgba(108, 196, 242, .08);
}

.callout h3 {
    font-size: 1.2rem;
    margin-bottom: .75rem;
    color: var(--accent-light);
}

.callout p {
    color: var(--text-dim);
    font-size: .95rem;
    margin-bottom: .75rem;
}

.callout p:last-child { margin-bottom: 0; }

.callout ol {
    margin: 0 0 .75rem 1.25rem;
    color: var(--text);
    font-size: .95rem;
}

.callout ol li { margin: .35rem 0; }
.callout strong { color: var(--text-bright); }

/* ── Numbers box ──────────────────────────────────────────────── */
body.mecs-page .info-box {
    background: linear-gradient(180deg, var(--bg-card), #0e1620);
    border-color: var(--border);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

body.mecs-page .info-box-title {
    color: var(--accent-light);
    letter-spacing: .5px;
}

/* ── Download CTA ─────────────────────────────────────────────── */
body.mecs-page .cta-box {
    background:
        radial-gradient(ellipse 70% 90% at 50% 0%, rgba(108, 196, 242, .14), transparent 65%),
        linear-gradient(180deg, var(--bg-card), var(--bg-alt));
    border: 1px solid rgba(108, 196, 242, .38);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(108, 196, 242, .12);
}

/* ── Footer ───────────────────────────────────────────────────── */
body.mecs-page .footer {
    background: #070b10;
}

/* ── Small-screen polish ──────────────────────────────────────── */
@media (max-width: 768px) {
    body.mecs-page .client-hero { min-height: 82vh; padding-top: 6rem; }
    .spec-strip li { font-size: .78rem; padding: .35rem .8rem; }
    .step-card { padding: 2rem 1.25rem 1.25rem; }
    .callout { padding: 1.35rem; }
    .mecs-mark { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .mecs-mark,
    .step-card,
    body.mecs-page .feature-card { transition: none; }
}