/* ============================================================
   Microframe Sports — Marketing Site Styles
   Futuristic dark theme — glassmorphism + neon grid
   Preview build — requires login
   ============================================================ */

:root {
    --mk-primary:    #132045;
    --mk-primary-dk: #0c1630;
    --mk-secondary:  #1a3060;
    --mk-accent:     #00d4ff;
    --mk-accent-dk:  #009bbf;
    --mk-blue:       #3d9eff;
    --mk-blue-dk:    #1a6fd4;
    --mk-gold:       #f59e0b;
    --mk-bg:         #0e1a35;
    --mk-surface:    #111f3d;
    --mk-surface-2:  #162444;
    --mk-white:      #ffffff;
    --mk-text:       #d4e4f8;
    --mk-muted:      #7a9ec8;
    --mk-text-muted: rgba(255,255,255,.5);
    --mk-border:     rgba(0,212,255,.15);
    --mk-dark:       #0c1630;
    --mk-glow-cyan:  0 0 20px rgba(0,212,255,.35), 0 0 60px rgba(0,212,255,.12);
    --mk-glow-blue:  0 0 20px rgba(61,158,255,.4),  0 0 60px rgba(61,158,255,.15);
    --mk-glass:      rgba(17,31,61,.72);
    --mk-glass-border: rgba(0,212,255,.2);
    /* Theme-specific gradient tokens */
    --mk-hero-from:    #0c1630;
    --mk-hero-mid:     #0e1e45;
    --mk-hero-to:      #112255;
    --mk-overlay-rgb:  12,22,48;
    --mk-grid-line:    rgba(0,212,255,.028);
    /* Aliases for blog/shared components that use --mfs-* tokens */
    --mfs-primary:    var(--mk-primary);
    --mfs-primary-dk: var(--mk-primary-dk);
    --mfs-secondary:  var(--mk-secondary);
    --mfs-accent:     var(--mk-accent);
    --mfs-accent-dk:  var(--mk-accent-dk);
    --mfs-text:       var(--mk-text);
    --mfs-muted:      var(--mk-muted);
}

/* ── Base ─────────────────────────────────────────────────── */
.mk body {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
    color: var(--mk-text);
    background: var(--mk-bg);
    margin: 0;
    padding: 0;
}

.mk * { box-sizing: border-box; }

.mk a:not(.mk-btn) { color: var(--mk-accent); text-decoration: none; }
.mk a:not(.mk-btn):hover { color: #fff; }
.mk a { text-decoration: none; }

h1, h2, h3, h4, h5 {
    font-family: 'Chakra Petch', 'Plus Jakarta Sans', sans-serif;
}

/* ── Grid background pattern ─────────────────────────────── */
.mk-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* ── Scanline overlay ────────────────────────────────────── */
.mk-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.03) 2px,
        rgba(0,0,0,.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* ── Marketing Navbar ─────────────────────────────────────── */
.mk-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10,18,40,.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0;
}

.mk-navbar.scrolled {
    background: rgba(10,18,40,.95);
    box-shadow: 0 1px 0 var(--mk-glass-border), 0 8px 32px rgba(0,0,0,.5);
}

.mk-navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .85rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mk-navbar-brand img {
    height: 36px;
    width: auto;
    filter: brightness(1.1);
}

.mk-navbar-links {
    display: flex;
    align-items: center;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-navbar-links a {
    display: block;
    color: #fff !important;
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem .75rem;
    border-radius: 6px;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .15s, background .15s;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-navbar-links a:hover {
    color: var(--mk-accent) !important;
    background: rgba(0,212,255,.07);
}

.mk-navbar-cta {
    background: linear-gradient(135deg, var(--mk-accent) 0%, var(--mk-blue) 100%) !important;
    color: #06080f !important;
    border-radius: 8px !important;
    padding: .5rem 1.2rem !important;
    font-weight: 700 !important;
    box-shadow: var(--mk-glow-cyan) !important;
}

.mk-navbar-cta:hover {
    background: linear-gradient(135deg, #fff 0%, var(--mk-accent) 100%) !important;
    color: #06080f !important;
    box-shadow: 0 0 30px rgba(0,212,255,.6), 0 0 80px rgba(0,212,255,.2) !important;
}

.mk-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem;
}

.mk-hamburger span {
    width: 24px;
    height: 2px;
    background: var(--mk-accent);
    border-radius: 2px;
    display: block;
    transition: .3s;
    box-shadow: 0 0 6px rgba(0,212,255,.6);
}

@media (max-width: 900px) {
    .mk-hamburger { display: flex; }
    .mk-navbar-links {
        display: none;
        position: fixed;
        top: 60px;
        left: 0; right: 0;
        background: var(--mk-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: .25rem;
        border-top: 1px solid var(--mk-glass-border);
    }
    .mk-navbar-links.open { display: flex; }
    .mk-navbar-links li { width: 100%; }
    .mk-navbar-links a { width: 100%; font-size: .95rem; padding: .75rem 1rem; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.mk-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--mk-hero-from) 0%, var(--mk-hero-mid) 45%, var(--mk-hero-to) 100%);
    overflow: hidden;
}

/* Radial glow orbs */
.mk-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(0,212,255,.06) 0%, transparent 65%);
    pointer-events: none;
}

.mk-hero::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(47,143,255,.07) 0%, transparent 65%);
    pointer-events: none;
}

.mk-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .06;
    mix-blend-mode: luminosity;
}

.mk-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(var(--mk-overlay-rgb),.92) 0%,
        rgba(var(--mk-overlay-rgb),.55) 60%,
        rgba(var(--mk-overlay-rgb),.15) 100%);
}

/* grid lines in hero */
.mk-hero > .mk-grid-bg { opacity: .7; }

.mk-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 8rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

.mk-hero-text { color: #fff; }

.mk-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.3);
    color: var(--mk-accent);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .3rem .9rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
    font-family: 'Chakra Petch', sans-serif;
    box-shadow: 0 0 12px rgba(0,212,255,.15);
}

.mk-hero h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    letter-spacing: -.01em;
    font-family: 'Chakra Petch', sans-serif;
    text-shadow: 0 0 40px rgba(0,212,255,.12);
}

.mk-hero h1 span { color: var(--mk-accent); text-shadow: var(--mk-glow-cyan); }

.mk-hero-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(200,214,240,.72);
    margin-bottom: 2rem;
    max-width: 520px;
}

.mk-hero-actions {
    display: flex;
    gap: .875rem;
    flex-wrap: wrap;
}

.mk-hero-video {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px var(--mk-glass-border);
    aspect-ratio: 16/9;
}

.mk-hero-video iframe {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 900px) {
    .mk-hero-content {
        grid-template-columns: 1fr;
        padding: 7rem 1.5rem 3rem;
        gap: 2.5rem;
    }
    .mk-hero-sub { max-width: 100%; }
    .mk-hero-video { width: 100%; }
}

/* ── Buttons ──────────────────────────────────────────────── */
.mk-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    text-decoration: none;
    border: none;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: 'Chakra Petch', sans-serif;
    position: relative;
    overflow: hidden;
}

.mk-btn-primary {
    background: linear-gradient(135deg, var(--mk-accent) 0%, var(--mk-blue) 100%);
    color: #06080f;
}
.mk-btn-primary:hover {
    background: linear-gradient(135deg, #fff 0%, var(--mk-accent) 100%);
    color: #06080f;
    transform: translateY(-2px);
    box-shadow: var(--mk-glow-cyan);
}

.mk-btn-outline {
    background: transparent;
    color: var(--mk-accent);
    border: 1px solid rgba(0,212,255,.45);
}
.mk-btn-outline:hover {
    background: rgba(0,212,255,.08);
    color: #fff;
    border-color: var(--mk-accent);
    box-shadow: 0 0 16px rgba(0,212,255,.2);
}

.mk-btn-light {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
}
.mk-btn-light:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-color: rgba(255,255,255,.4);
    transform: translateY(-1px);
}

.mk-btn-dark {
    background: var(--mk-surface);
    color: var(--mk-accent);
    border: 1px solid var(--mk-glass-border);
}
.mk-btn-dark:hover {
    background: var(--mk-surface-2);
    color: #fff;
    border-color: var(--mk-accent);
    box-shadow: 0 0 12px rgba(0,212,255,.15);
}

.mk-btn-lg {
    padding: .95rem 2.25rem;
    font-size: .92rem;
    border-radius: 10px;
}

/* ── Stats Bar ────────────────────────────────────────────── */
.mk-stats {
    background: var(--mk-surface);
    padding: 2rem 0;
    border-top: 1px solid var(--mk-glass-border);
    border-bottom: 1px solid var(--mk-glass-border);
    position: relative;
    overflow: hidden;
}

.mk-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.mk-stats-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.mk-stat {
    text-align: center;
    color: #fff;
    padding: 1rem;
    border-right: 1px solid rgba(0,212,255,.1);
}
.mk-stat:last-child { border-right: none; }

.mk-stat-num {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mk-accent);
    margin-bottom: .25rem;
    font-family: 'Chakra Petch', sans-serif;
    text-shadow: var(--mk-glow-cyan);
}

.mk-stat-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mk-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: 'Chakra Petch', sans-serif;
}

@media (max-width: 700px) {
    .mk-stats-inner { grid-template-columns: repeat(2, 1fr); }
    .mk-stat:nth-child(2) { border-right: none; }
    .mk-stat { border-bottom: 1px solid rgba(0,212,255,.1); }
    .mk-stat:nth-child(3), .mk-stat:nth-child(4) { border-bottom: none; }
}

/* ── Section Shared ───────────────────────────────────────── */
.mk-section {
    padding: 5rem 0;
    position: relative;
}

.mk-section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.mk-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--mk-accent);
    margin-bottom: .65rem;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-bg-white .mk-section-label,
.mk-bg-light .mk-section-label {
    color: #006699;
}

.mk-section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--mk-text, #fff);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: .75rem;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-section-sub {
    font-size: 1rem;
    color: var(--mk-muted);
    line-height: 1.7;
    max-width: 560px;
}

.mk-section-header-center {
    text-align: center;
    margin-bottom: 3rem;
}

.mk-section-header-center .mk-section-sub {
    margin: 0 auto;
}

/* ── Logo Ticker ──────────────────────────────────────────── */
.mk-ticker-section {
    background: var(--mk-surface);
    padding: 3rem 0;
    border-top: 1px solid var(--mk-glass-border);
    border-bottom: 1px solid var(--mk-glass-border);
    overflow: hidden;
}

.mk-ticker-label {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--mk-muted);
    margin-bottom: 1.75rem;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 28s linear infinite;
}

.mk-ticker-track:hover { animation-play-state: paused; }

.mk-ticker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3rem;
    flex-shrink: 0;
}

.mk-ticker-item img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(.5);
    transition: filter .3s;
}

.mk-ticker-item img:hover {
    filter: grayscale(0%) brightness(1);
}

.mk-ticker-text {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(107,138,176,.5);
    white-space: nowrap;
    letter-spacing: .06em;
    font-family: 'Chakra Petch', sans-serif;
    text-transform: uppercase;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Products ─────────────────────────────────────────────── */
.mk-products {
    background: var(--mk-bg);
}

.mk-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mk-product-card {
    background: var(--mk-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mk-glass-border);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    flex-direction: column;
}

.mk-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px var(--mk-accent), var(--mk-glow-cyan);
    border-color: var(--mk-accent);
}

.mk-product-card.featured {
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 1px var(--mk-accent), var(--mk-glow-cyan);
}

.mk-product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--mk-accent);
    color: #06080f;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .25rem .7rem;
    border-radius: 100px;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-product-img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--mk-surface);
}

.mk-product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
    opacity: .9;
}

.mk-product-card:hover .mk-product-img-wrap img {
    transform: scale(1.04);
    opacity: 1;
}

.mk-product-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mk-product-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mk-text, #d4e4f8);
    margin-bottom: .35rem;
    font-family: 'Chakra Petch', sans-serif;
    letter-spacing: .02em;
}

.mk-product-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mk-accent);
    margin-bottom: .75rem;
    line-height: 1;
    font-family: 'Chakra Petch', sans-serif;
    text-shadow: 0 0 16px rgba(0,212,255,.3);
}

.mk-product-price span {
    font-size: .85rem;
    font-weight: 500;
    color: var(--mk-muted);
}

.mk-product-desc {
    font-size: .875rem;
    color: var(--mk-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
}

.mk-product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.mk-product-features li {
    font-size: .8rem;
    color: var(--mk-muted, rgba(200,214,240,.75));
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.mk-product-features li::before {
    content: "✓";
    color: var(--mk-accent);
    font-weight: 800;
    flex-shrink: 0;
    margin-top: .05rem;
    text-shadow: 0 0 8px rgba(0,212,255,.6);
}

@media (max-width: 900px) {
    .mk-product-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ── Video Feature ────────────────────────────────────────── */
.mk-video-section {
    background: var(--mk-surface);
    padding: 6rem 0;
    overflow: hidden;
    position: relative;
}

.mk-video-section > .mk-grid-bg { opacity: .6; }

.mk-video-section::before {
    content: '';
    position: absolute;
    top: -120px; left: -120px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0,212,255,.08) 0%, transparent 70%);
    pointer-events: none;
}

.mk-video-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.mk-video-text { color: var(--mk-text, #fff); }

.mk-video-text .mk-section-label { color: var(--mk-accent); }

.mk-video-text .mk-section-title { color: var(--mk-text, #fff); }

.mk-video-text .mk-section-sub { color: var(--mk-muted); max-width: 100%; margin-bottom: 2rem; }

.mk-video-embed {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px var(--mk-glass-border);
    aspect-ratio: 16/9;
}

.mk-video-embed iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── YouTube click-to-play facade ──────────────────────────── */
.yt-facade {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    background: #000;
}
.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .2s;
}
.yt-facade:hover img,
.yt-facade:focus img {
    filter: brightness(.8);
}
.yt-facade:focus {
    outline: 3px solid var(--mk-accent, #00d4ff);
    outline-offset: 3px;
}
.yt-facade-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.yt-facade-play svg {
    width: 68px;
    height: 48px;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.7));
    transition: transform .15s;
}
.yt-facade:hover .yt-facade-play svg,
.yt-facade:focus .yt-facade-play svg {
    transform: scale(1.1);
}

@media (max-width: 900px) {
    .mk-video-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ── Sports Grid ──────────────────────────────────────────── */
.mk-sports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.mk-sport-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--mk-surface);
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    border: 1px solid var(--mk-glass-border);
}

.mk-sport-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px var(--mk-accent), var(--mk-glow-cyan);
    border-color: var(--mk-accent);
}

.mk-sport-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s;
    opacity: .7;
}

.mk-sport-card:hover .mk-sport-card-bg {
    transform: scale(1.05);
    opacity: .85;
}

.mk-sport-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(var(--mk-overlay-rgb),.9) 0%,
        rgba(var(--mk-overlay-rgb),.12) 60%);
}

.mk-sport-card-label {
    position: relative;
    z-index: 2;
    padding: 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.mk-sport-card-name {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-sport-card-arrow {
    width: 32px;
    height: 32px;
    background: rgba(0,212,255,.15);
    border: 1px solid rgba(0,212,255,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--mk-accent);
    transition: background .2s, box-shadow .2s;
}

.mk-sport-card:hover .mk-sport-card-arrow {
    background: var(--mk-accent);
    color: #06080f;
    box-shadow: 0 0 12px rgba(0,212,255,.5);
}

@media (max-width: 700px) {
    .mk-sports-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Photo Grid ───────────────────────────────────────────── */
.mk-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 220px 220px;
    gap: 8px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--mk-glass-border);
    box-shadow: var(--mk-glow-cyan);
}

.mk-photo-grid-item {
    background-size: cover;
    background-position: center;
    transition: transform .4s;
}

.mk-photo-grid-item:hover { transform: scale(1.02); }
.mk-photo-grid-item:first-child {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}

@media (max-width: 700px) {
    .mk-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 160px);
    }
    .mk-photo-grid-item:first-child {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }
}

/* ── Feature List ─────────────────────────────────────────── */
.mk-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}

.mk-feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.mk-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.2);
    color: var(--mk-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .1rem;
    box-shadow: 0 0 16px rgba(0,212,255,.1);
}

.mk-feature-text h4 {
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .2rem;
    font-family: 'Chakra Petch', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mk-feature-text p {
    font-size: .85rem;
    color: var(--mk-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── About Teaser ─────────────────────────────────────────── */
.mk-about-section {
    background: var(--mk-surface);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.mk-about-section > .mk-grid-bg { opacity: .5; }

.mk-about-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.mk-about-text { color: var(--mk-text, #fff); }
.mk-about-text .mk-section-label { color: var(--mk-accent); }
.mk-about-text .mk-section-title { color: var(--mk-text, #fff); }
.mk-about-text .mk-section-sub { color: var(--mk-muted); max-width: 100%; margin-bottom: 2rem; }

.mk-about-photo {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px var(--mk-glass-border);
    aspect-ratio: 4/3;
}

.mk-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,212,255,.12);
}

.mk-about-stat-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mk-accent);
    line-height: 1;
    font-family: 'Chakra Petch', sans-serif;
    text-shadow: 0 0 16px rgba(0,212,255,.4);
}

.mk-about-stat-label {
    font-size: .75rem;
    color: var(--mk-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .25rem;
    font-family: 'Chakra Petch', sans-serif;
}

@media (max-width: 900px) {
    .mk-about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── CTA Banner ───────────────────────────────────────────── */
.mk-cta {
    background: var(--mk-surface);
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--mk-glass-border);
    border-bottom: 1px solid var(--mk-glass-border);
}

.mk-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(0,212,255,.06) 0%, rgba(47,143,255,.04) 40%, transparent 70%);
    pointer-events: none;
}

.mk-cta > .mk-grid-bg { opacity: .5; }

.mk-cta-inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.mk-cta h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -.01em;
    font-family: 'Chakra Petch', sans-serif;
    text-shadow: 0 0 40px rgba(0,212,255,.15);
}

.mk-cta p {
    font-size: 1.05rem;
    color: var(--mk-muted);
    line-height: 1.65;
    margin-bottom: 2rem;
}

/* ── How It Works ─────────────────────────────────────────── */
.mk-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.mk-step {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--mk-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid var(--mk-glass-border);
    position: relative;
    transition: box-shadow .25s, border-color .25s;
}

.mk-step:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.4), var(--mk-glow-cyan);
    border-color: var(--mk-accent);
}

.mk-step-num {
    width: 52px;
    height: 52px;
    background: rgba(0,212,255,.1);
    border: 1px solid rgba(0,212,255,.3);
    color: var(--mk-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 1.25rem;
    font-family: 'Chakra Petch', sans-serif;
    box-shadow: 0 0 20px rgba(0,212,255,.15);
}

.mk-step h3 {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem;
    font-family: 'Chakra Petch', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mk-step p {
    font-size: .875rem;
    color: var(--mk-muted);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 700px) {
    .mk-steps { grid-template-columns: 1fr; max-width: 400px; margin: 3rem auto 0; }
}

/* ── Sport Page Hero (sub-pages) ─────────────────────────── */
.mk-sport-hero {
    padding: 9rem 0 5rem;
    background: linear-gradient(135deg, var(--mk-hero-from) 0%, var(--mk-hero-to) 100%);
    position: relative;
    overflow: hidden;
}

.mk-sport-hero > .mk-grid-bg { opacity: .7; }

.mk-sport-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to top, var(--mk-bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.mk-sport-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .1;
}

.mk-sport-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(var(--mk-overlay-rgb),.88) 0%,
        rgba(var(--mk-overlay-rgb),.45) 100%);
}

.mk-sport-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    color: #fff;
    max-width: 720px;
}

.mk-sport-hero-content h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
    font-family: 'Chakra Petch', sans-serif;
    text-shadow: 0 0 40px rgba(0,212,255,.12);
}

.mk-sport-hero-content p {
    font-size: 1.05rem;
    color: var(--mk-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 560px;
}

/* ── Image Gallery (products) ─────────────────────────────── */
.mk-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.mk-gallery-item {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: var(--mk-surface);
    cursor: pointer;
    border: 1px solid var(--mk-glass-border);
    transition: border-color .25s, box-shadow .25s;
}

.mk-gallery-item:hover {
    border-color: var(--mk-accent);
    box-shadow: var(--mk-glow-cyan);
}

.mk-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
    opacity: .85;
}

.mk-gallery-item:hover img { transform: scale(1.06); opacity: 1; }

@media (max-width: 700px) {
    .mk-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ── Contact Form ─────────────────────────────────────────── */
.mk-form-group { margin-bottom: 1.1rem; }

.mk-form-group label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--mk-muted);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-form-control {
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid var(--mk-glass-border);
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
    color: var(--mk-text);
    background: var(--mk-glass);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.mk-form-control:focus {
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px rgba(0,212,255,.1), var(--mk-glow-cyan);
}

.mk-form-control::placeholder { color: var(--mk-muted); }

.mk-form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .mk-form-2col { grid-template-columns: 1fr; }
}

/* ── Footer ───────────────────────────────────────────────── */
.mk-footer {
    /* Footer is ALWAYS dark — scoped variables pin it to dark-bg-safe values */
    --mk-text:   #d4e4f8;
    --mk-muted:  #7a9ec8;
    --mk-accent: #00d4ff;
    --mk-glass-border: rgba(0,212,255,.1);
    background: #0a1428;
    color: var(--mk-muted);
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(0,212,255,.1);
    position: relative;
    overflow: hidden;
}

.mk-footer > .mk-grid-bg { opacity: .4; }

.mk-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.mk-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(0,212,255,.08);
    margin-bottom: 2rem;
}

.mk-footer-brand img {
    height: 32px;
    margin-bottom: 1rem;
    opacity: .8;
    filter: brightness(1.1);
}

.mk-footer-brand p {
    font-size: .85rem;
    line-height: 1.65;
    max-width: 280px;
    color: var(--mk-muted);
}

.mk-footer-col h3,
.mk-footer-col h4 {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #8aabb8;
    margin-bottom: 1rem;
    font-family: 'Chakra Petch', sans-serif;
}

.mk-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.mk-footer-col ul li a {
    font-size: .875rem;
    color: var(--mk-muted);
    transition: color .15s;
}

.mk-footer-col ul li a:hover { color: var(--mk-accent); }

.mk-footer-contact p {
    font-size: .875rem;
    color: var(--mk-muted);
    margin-bottom: .5rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.mk-footer-contact p i {
    margin-top: .15rem;
    flex-shrink: 0;
    color: var(--mk-accent);
}

.mk-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .78rem;
    color: rgba(180,210,240,.75);
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 900px) {
    .mk-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
    .mk-footer-grid { grid-template-columns: 1fr; }
}

/* ── Two-column content layout ────────────────────────────── */
.mk-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.mk-two-col.reverse { direction: rtl; }
.mk-two-col.reverse > * { direction: ltr; }

@media (max-width: 900px) {
    .mk-two-col { grid-template-columns: 1fr; gap: 2.5rem; }
    .mk-two-col.reverse { direction: ltr; }
}

/* ── Lightbox ─────────────────────────────────────────────── */
.mk-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(6,8,15,.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.mk-lightbox.open { display: flex; }

.mk-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 0 0 1px var(--mk-glass-border), var(--mk-glow-cyan);
}

.mk-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--mk-accent);
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    transition: text-shadow .2s;
}

.mk-lightbox-close:hover {
    text-shadow: var(--mk-glow-cyan);
}

/* ── Preview Bar — main definitions in popup panel section below ── */

/* ── Utilities ────────────────────────────────────────────── */
.mk-text-center { text-align: center; }
.mk-mt-1 { margin-top: 1rem; }
.mk-mt-2 { margin-top: 2rem; }
.mk-mt-3 { margin-top: 3rem; }
.mk-mb-1 { margin-bottom: 1rem; }
.mk-bg-light { background: var(--mk-surface); }
.mk-bg-white { background: var(--mk-surface-2); }
.mk-tag {
    display: inline-block;
    background: rgba(0,212,255,.08);
    color: var(--mk-accent);
    border: 1px solid rgba(0,212,255,.2);
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: 'Chakra Petch', sans-serif;
}

/* ── Section grid backgrounds (no extra divs needed) ────────── */
.mk-section, .mk-stats, .mk-ticker-section,
.mk-video-section, .mk-about-section, .mk-cta,
.mk-sport-hero, .mk-footer {
    position: relative;
}

.mk-section::before, .mk-video-section::before,
.mk-about-section::before, .mk-footer::before {
    /* Subtle grid overlay via background-image */
    background-image:
        linear-gradient(rgba(0,212,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,.035) 1px, transparent 1px) !important;
    background-size: 60px 60px !important;
}

/* Override mk-section::before since video-section already has its own */
.mk-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--mk-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mk-grid-line) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* ensure section inner content sits above the grid */
.mk-section > .mk-section-inner { position: relative; z-index: 1; }

/* hero grid */
.mk-hero::before {
    /* already defined as radial orb — add grid via a separate layer */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,212,255,.06) 0%, transparent 50%),
        linear-gradient(rgba(0,212,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,.025) 1px, transparent 1px);
    background-size: auto, 60px 60px, 60px 60px;
}

/* ── Dark-theme overrides for inline light styles in views ── */

/* Product image wrap backgrounds */
.mk-product-img-wrap {
    background: var(--mk-surface) !important;
}

/* Inline white/light background cards across all sport pages */
.mk-section [style*="background:#fff"],
.mk-section [style*="background: #fff"],
.mk-section [style*="background:#f4f5f7"],
.mk-section [style*="background: #f4f5f7"] {
    background: var(--mk-surface-2) !important;
    border-color: var(--mk-glass-border) !important;
    color: var(--mk-text) !important;
}

/* Contact / Products inline white panels */
[style*="background:#fff"][style*="border:1px solid #e5e7eb"],
[style*="background: #fff"][style*="border:1px solid #e5e7eb"] {
    background: var(--mk-surface-2) !important;
    border-color: var(--mk-glass-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}

/* Override hardcoded dark text colors — var(--mk-text/muted) adapts in both light and dark mode */
[style*="color:#1e3065"],
[style*="color: #1e3065"],
[style*="color:#0d1d47"],
[style*="color:#151414"],
[style*="color:#0f2ccf"] {
    color: var(--mk-text) !important;
}
[style*="color:#374151"],
[style*="color: #374151"],
[style*="color:#6b7280"],
[style*="color: #6b7280"] {
    color: var(--mk-muted) !important;
}

/* Old blue accent → new cyan accent */
[style*="color:#2f5dff"],
[style*="color: #2f5dff"] {
    color: var(--mk-accent) !important;
}

/* Old light-bg eyebrow tags in hero sections */
[style*="background:rgba(47,93,255"] {
    background: rgba(0,212,255,.1) !important;
    border-color: rgba(0,212,255,.3) !important;
    color: var(--mk-accent) !important;
}

/* Old span accent colors #7b9dff → cyan */
[style*="color:#7b9dff"] {
    color: var(--mk-accent) !important;
    text-shadow: var(--mk-glow-cyan);
}

/* Old muted text #6b7280 already similar to --mk-muted, keep readable */
[style*="color:#6b7280"] {
    color: var(--mk-muted) !important;
}

/* Very dark near-black text that's invisible on dark bg */
[style*="color:#151414"],
[style*="color: #151414"],
[style*="color:#3a3a3a"],
[style*="color: #3a3a3a"],
[style*="color:#333"],
[style*="color: #333"],
[style*="color:#444"] {
    color: var(--mk-text) !important;
}

/* Old blue gradient icon backgrounds → cyan */
[style*="background:linear-gradient(135deg,#2f5dff"] {
    background: linear-gradient(135deg, var(--mk-accent) 0%, var(--mk-blue) 100%) !important;
}

/* ── Glow pulse animation ─────────────────────────────────── */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,212,255,.3), 0 0 30px rgba(0,212,255,.1); }
    50%       { box-shadow: 0 0 24px rgba(0,212,255,.5), 0 0 60px rgba(0,212,255,.2); }
}

/* ── Sport hero grid ──────────────────────────────────────── */
.mk-sport-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--mk-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mk-grid-line) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Ensure sport-hero content stacks above grid pseudo */
.mk-sport-hero-bg, .mk-sport-hero-overlay, .mk-sport-hero-content {
    z-index: 1;
}
.mk-sport-hero-content { z-index: 2; }

/* ============================================================
   THEME PRESETS  (Level 1 = structural, Level 2 = accent color)
   Level 1 applied via data-mk-theme on <body>.
   Level 2 applied via inline CSS vars from JS.
   All presets set data-mk-theme explicitly. Light/dark via data-mk-mode.
   ============================================================ */

/* ── Shared: suppress hardcoded cyan glows for non-neon themes ─ */
:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-hero h1,
:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-cta h2,
:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-sport-hero-content h1 { text-shadow: none !important; }

:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-product-price,
:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-about-stat-num { text-shadow: none !important; }

:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-hero-eyebrow,
:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-step-num,
:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-feature-icon { box-shadow: none !important; }

:is(body[data-mk-theme="classic"],
    body[data-mk-theme="stadium"],
    body[data-mk-theme="arctic"]) .mk-hamburger span { box-shadow: none; }

/* ── Theme: Classic ─ pre-futuristic clean navy ───────────────── */
body[data-mk-theme="classic"] {
    --mk-accent:       #2f8fff;
    --mk-accent-dk:    #1a6fd4;
    --mk-blue:         #5ba3ff;
    --mk-glow-cyan:    none;
    --mk-glow-blue:    none;
    --mk-glass:        var(--mk-surface);
    --mk-glass-border: rgba(47,143,255,.2);
    --mk-grid-line:    transparent;
    background: #0e1a35;
}
body[data-mk-theme="classic"] .mk-product-card,
body[data-mk-theme="classic"] .mk-step,
body[data-mk-theme="classic"] .mk-navbar.scrolled,
body[data-mk-theme="classic"] .mk-navbar-links,
body[data-mk-theme="classic"] .mk-lightbox {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body[data-mk-theme="classic"] h1,
body[data-mk-theme="classic"] h2,
body[data-mk-theme="classic"] h3,
body[data-mk-theme="classic"] h4,
body[data-mk-theme="classic"] h5,
body[data-mk-theme="classic"] .mk-section-label,
body[data-mk-theme="classic"] .mk-section-title,
body[data-mk-theme="classic"] .mk-stat-num,
body[data-mk-theme="classic"] .mk-stat-label,
body[data-mk-theme="classic"] .mk-ticker-text,
body[data-mk-theme="classic"] .mk-product-name,
body[data-mk-theme="classic"] .mk-product-price,
body[data-mk-theme="classic"] .mk-product-badge,
body[data-mk-theme="classic"] .mk-sport-card-name,
body[data-mk-theme="classic"] .mk-step h3,
body[data-mk-theme="classic"] .mk-about-stat-num,
body[data-mk-theme="classic"] .mk-about-stat-label,
body[data-mk-theme="classic"] .mk-tag,
body[data-mk-theme="classic"] .mk-btn,
body[data-mk-theme="classic"] .mk-navbar-links a {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}
body[data-mk-theme="classic"] .mk-navbar-links a {
    text-transform: none;
    letter-spacing: .02em;
    font-size: .88rem;
}
body[data-mk-theme="classic"] .mk-section-label {
    text-transform: none;
    letter-spacing: .04em;
    font-size: .82rem;
}
body[data-mk-theme="classic"] .mk-btn {
    text-transform: none;
    letter-spacing: .02em;
}
body[data-mk-theme="classic"] .mk-hero-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-transform: none;
    letter-spacing: .04em;
}

/* ── Theme: Futuristic ─ neon grid, cyberpunk ────────────────── */
body[data-mk-theme="futuristic"] {
    /* Inherits :root vars — declared here so light mode can override */
    --mk-bg:         #0e1a35;
    --mk-surface:    #111f3d;
    --mk-surface-2:  #162444;
    --mk-primary:    #132045;
    --mk-primary-dk: #0c1630;
    --mk-accent:     #00d4ff;
    --mk-accent-dk:  #009bbf;
    --mk-blue:       #3d9eff;
    --mk-glow-cyan:  0 0 20px rgba(0,212,255,.35), 0 0 60px rgba(0,212,255,.12);
    --mk-glow-blue:  0 0 20px rgba(61,158,255,.4),  0 0 60px rgba(61,158,255,.15);
    --mk-glass:      rgba(17,31,61,.72);
    --mk-glass-border: rgba(0,212,255,.2);
    --mk-text:       #d4e4f8;
    --mk-muted:      #7a9ec8;
    --mk-dark:       #0c1630;
    --mk-hero-from:  #0c1630;
    --mk-hero-mid:   #0e1e45;
    --mk-hero-to:    #112255;
    --mk-overlay-rgb: 12,22,48;
    --mk-grid-line:  rgba(0,212,255,.028);
    background: #0e1a35;
}

/* ── Theme: Warm ─ amber warmth, editorial headings ──────────── */
body[data-mk-theme="warm"] {
    --mk-bg:           #16100a;
    --mk-surface:      #1e1508;
    --mk-surface-2:    #261a08;
    --mk-primary:      #1e1508;
    --mk-primary-dk:   #100c06;
    --mk-accent:       #f59e0b;
    --mk-accent-dk:    #b45309;
    --mk-blue:         #fbbf24;
    --mk-gold:         #f59e0b;
    --mk-glow-cyan:    0 0 18px rgba(245,158,11,.32), 0 0 50px rgba(245,158,11,.1);
    --mk-glow-blue:    0 0 18px rgba(251,191,36,.28), 0 0 50px rgba(251,191,36,.08);
    --mk-glass:        rgba(20,14,8,.75);
    --mk-glass-border: rgba(245,158,11,.18);
    --mk-text:         #f0e6d3;
    --mk-muted:        #a08060;
    --mk-dark:         #100c06;
    --mk-hero-from:    #100c06;
    --mk-hero-mid:     #16100a;
    --mk-hero-to:      #1e1508;
    --mk-overlay-rgb:  14,10,6;
    --mk-grid-line:    transparent;
    background: #16100a;
}
body[data-mk-theme="warm"] h1,
body[data-mk-theme="warm"] h2,
body[data-mk-theme="warm"] h3,
body[data-mk-theme="warm"] .mk-section-title,
body[data-mk-theme="warm"] .mk-hero h1,
body[data-mk-theme="warm"] .mk-sport-hero-content h1,
body[data-mk-theme="warm"] .mk-cta h2 {
    font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    letter-spacing: -0.02em;
    text-transform: none;
}
body[data-mk-theme="warm"] .mk-hero h1           { text-shadow: 0 0 40px rgba(245,158,11,.15); }
body[data-mk-theme="warm"] .mk-sport-hero-content h1 { text-shadow: 0 0 40px rgba(245,158,11,.15); }
body[data-mk-theme="warm"] .mk-cta h2            { text-shadow: 0 0 40px rgba(245,158,11,.12); }
body[data-mk-theme="warm"] .mk-product-price     { text-shadow: 0 0 16px rgba(245,158,11,.28); }
body[data-mk-theme="warm"] .mk-about-stat-num    { text-shadow: 0 0 16px rgba(245,158,11,.35); }
body[data-mk-theme="warm"] .mk-hero-eyebrow      { box-shadow:  0 0 12px rgba(245,158,11,.12); }
body[data-mk-theme="warm"] .mk-step-num          { box-shadow:  0 0 20px rgba(245,158,11,.12); }
body[data-mk-theme="warm"] .mk-feature-icon      { box-shadow:  0 0 16px rgba(245,158,11,.08); }
body[data-mk-theme="warm"] .mk-hamburger span    { box-shadow: none; }
body[data-mk-theme="warm"] .mk-product-card,
body[data-mk-theme="warm"] .mk-step,
body[data-mk-theme="warm"] .mk-sport-card        { border-radius: 18px; }

/* ── Theme: Stadium ─ bold sports, red on black ───────────────── */
body[data-mk-theme="stadium"] {
    --mk-bg:           #090909;
    --mk-surface:      #121212;
    --mk-surface-2:    #1a1a1a;
    --mk-primary:      #121212;
    --mk-primary-dk:   #060606;
    --mk-accent:       #ef4444;
    --mk-accent-dk:    #b91c1c;
    --mk-blue:         #f87171;
    --mk-glow-cyan:    none;
    --mk-glow-blue:    none;
    --mk-glass:        #121212;
    --mk-glass-border: rgba(239,68,68,.3);
    --mk-text:         #f5f5f5;
    --mk-muted:        #888;
    --mk-dark:         #060606;
    --mk-hero-from:    #060606;
    --mk-hero-mid:     #090909;
    --mk-hero-to:      #0f0f0f;
    --mk-overlay-rgb:  6,6,6;
    --mk-grid-line:    transparent;
    background: #090909;
}
body[data-mk-theme="stadium"] .mk-product-card,
body[data-mk-theme="stadium"] .mk-step {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #121212;
    border: 2px solid rgba(239,68,68,.25);
    border-radius: 8px;
}
body[data-mk-theme="stadium"] .mk-product-card:hover,
body[data-mk-theme="stadium"] .mk-step:hover {
    border-color: #ef4444;
    box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px #ef4444;
    transform: translateY(-4px);
}
body[data-mk-theme="stadium"] .mk-navbar.scrolled,
body[data-mk-theme="stadium"] .mk-navbar-links {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body[data-mk-theme="stadium"] .mk-hero-eyebrow { border-radius: 4px; }
body[data-mk-theme="stadium"] .mk-btn          { border-radius: 4px; }
body[data-mk-theme="stadium"] .mk-step-num     { border-radius: 4px; }

/* ── Theme: Midnight ─ deep purple, elegant serif ────────────── */
body[data-mk-theme="midnight"] {
    --mk-bg:           #0d0818;
    --mk-surface:      #150f26;
    --mk-surface-2:    #1e1635;
    --mk-primary:      #150f26;
    --mk-primary-dk:   #080514;
    --mk-accent:       #a855f7;
    --mk-accent-dk:    #7c3aed;
    --mk-blue:         #c084fc;
    --mk-glow-cyan:    0 0 20px rgba(168,85,247,.35), 0 0 60px rgba(168,85,247,.12);
    --mk-glow-blue:    0 0 20px rgba(192,132,252,.3),  0 0 60px rgba(192,132,252,.1);
    --mk-glass:        rgba(13,8,24,.78);
    --mk-glass-border: rgba(168,85,247,.22);
    --mk-text:         #e8d8ff;
    --mk-muted:        #9060c8;
    --mk-dark:         #080514;
    --mk-hero-from:    #080514;
    --mk-hero-mid:     #0d0818;
    --mk-hero-to:      #130d22;
    --mk-overlay-rgb:  8,5,20;
    --mk-grid-line:    rgba(168,85,247,.018);
    background: #0d0818;
}
body[data-mk-theme="midnight"] h1,
body[data-mk-theme="midnight"] h2,
body[data-mk-theme="midnight"] h3,
body[data-mk-theme="midnight"] .mk-section-title,
body[data-mk-theme="midnight"] .mk-hero h1,
body[data-mk-theme="midnight"] .mk-sport-hero-content h1,
body[data-mk-theme="midnight"] .mk-cta h2 {
    font-family: 'DM Serif Display', Georgia, serif;
    text-transform: none;
    letter-spacing: -0.02em;
}
body[data-mk-theme="midnight"] .mk-hero h1           { text-shadow: 0 0 40px rgba(168,85,247,.15); }
body[data-mk-theme="midnight"] .mk-sport-hero-content h1 { text-shadow: 0 0 40px rgba(168,85,247,.15); }
body[data-mk-theme="midnight"] .mk-cta h2            { text-shadow: 0 0 40px rgba(168,85,247,.12); }
body[data-mk-theme="midnight"] .mk-product-price     { text-shadow: 0 0 16px rgba(168,85,247,.3); }
body[data-mk-theme="midnight"] .mk-about-stat-num    { text-shadow: 0 0 16px rgba(168,85,247,.4); }
body[data-mk-theme="midnight"] .mk-hero-eyebrow      { box-shadow:  0 0 12px rgba(168,85,247,.18); }
body[data-mk-theme="midnight"] .mk-step-num          { box-shadow:  0 0 20px rgba(168,85,247,.18); }
body[data-mk-theme="midnight"] .mk-feature-icon      { box-shadow:  0 0 16px rgba(168,85,247,.12); }
body[data-mk-theme="midnight"] .mk-hamburger span    { box-shadow: 0 0 6px rgba(168,85,247,.6); }
body[data-mk-theme="midnight"] .mk-product-card,
body[data-mk-theme="midnight"] .mk-step,
body[data-mk-theme="midnight"] .mk-sport-card        { border-radius: 20px; }

/* ── Theme: Arctic ─ sky blue, minimal clean ─────────────────── */
body[data-mk-theme="arctic"] {
    --mk-bg:           #0c1117;
    --mk-surface:      #141c24;
    --mk-surface-2:    #1c2630;
    --mk-primary:      #141c24;
    --mk-primary-dk:   #090d12;
    --mk-accent:       #38bdf8;
    --mk-accent-dk:    #0284c7;
    --mk-blue:         #7dd3fc;
    --mk-glow-cyan:    0 0 14px rgba(56,189,248,.25), 0 0 36px rgba(56,189,248,.08);
    --mk-glow-blue:    0 0 14px rgba(125,211,252,.2),  0 0 36px rgba(125,211,252,.06);
    --mk-glass:        var(--mk-surface);
    --mk-glass-border: rgba(56,189,248,.15);
    --mk-text:         #e0f0ff;
    --mk-muted:        #5a8aaa;
    --mk-dark:         #090d12;
    --mk-hero-from:    #090d12;
    --mk-hero-mid:     #0c1117;
    --mk-hero-to:      #111820;
    --mk-overlay-rgb:  9,13,18;
    --mk-grid-line:    transparent;
    background: #0c1117;
}
body[data-mk-theme="arctic"] .mk-product-card,
body[data-mk-theme="arctic"] .mk-step,
body[data-mk-theme="arctic"] .mk-navbar.scrolled,
body[data-mk-theme="arctic"] .mk-navbar-links {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body[data-mk-theme="arctic"] h1,
body[data-mk-theme="arctic"] h2,
body[data-mk-theme="arctic"] h3,
body[data-mk-theme="arctic"] h4,
body[data-mk-theme="arctic"] h5,
body[data-mk-theme="arctic"] .mk-section-title,
body[data-mk-theme="arctic"] .mk-stat-num,
body[data-mk-theme="arctic"] .mk-product-name,
body[data-mk-theme="arctic"] .mk-hero h1,
body[data-mk-theme="arctic"] .mk-sport-hero-content h1,
body[data-mk-theme="arctic"] .mk-btn,
body[data-mk-theme="arctic"] .mk-navbar-links a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-transform: none;
    letter-spacing: -0.01em;
}
body[data-mk-theme="arctic"] .mk-navbar-links a { letter-spacing: .02em; }
body[data-mk-theme="arctic"] .mk-btn            { letter-spacing: .02em; }
body[data-mk-theme="arctic"] .mk-hero h1        { text-shadow: 0 0 40px rgba(56,189,248,.1); }
body[data-mk-theme="arctic"] .mk-sport-hero-content h1 { text-shadow: 0 0 30px rgba(56,189,248,.1); }
body[data-mk-theme="arctic"] .mk-cta h2         { text-shadow: none; }
body[data-mk-theme="arctic"] .mk-product-price  { text-shadow: none; }
body[data-mk-theme="arctic"] .mk-about-stat-num { text-shadow: 0 0 12px rgba(56,189,248,.25); }
body[data-mk-theme="arctic"] .mk-step-num       { box-shadow: 0 0 14px rgba(56,189,248,.1); }
body[data-mk-theme="arctic"] .mk-feature-icon   { box-shadow: none !important; }
body[data-mk-theme="arctic"] .mk-hamburger span { box-shadow: 0 0 4px rgba(56,189,248,.4); }

/* ============================================================
   PREVIEW BAR — 2-tier theme selector
   ============================================================ */
/* ============================================================
   PREVIEW BAR — popup panel system
   ============================================================ */
.mk-preview-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 2000;
    background: rgba(8,4,20,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(167,139,250,.18);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.mk-preview-bar a {
    color: rgba(200,180,255,.6);
    text-decoration: none;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.mk-preview-bar a:hover { color: #fff; }

.mk-preview-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .3rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    height: 42px;
}

.mk-pbar-info {
    color: rgba(255,255,255,.32);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mk-pbar-sep { color: rgba(255,255,255,.1); user-select: none; margin: 0 .15rem; }

/* ── Trigger buttons ──────────────────────────────────────── */
.mk-pbar-trigger {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    padding: .2rem .55rem .2rem .45rem;
    transition: all .15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1;
}
.mk-pbar-trigger > i:first-child { font-size: .58rem; opacity: .55; flex-shrink: 0; }
.mk-pbar-trigger:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.85);
}
.mk-pbar-trigger.open {
    background: rgba(167,139,250,.14);
    border-color: rgba(167,139,250,.42);
    color: #fff;
}
.mk-pbar-trig-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.mk-pbar-trig-lbl { font-size: .5rem; color: rgba(255,255,255,.28); letter-spacing: .09em; text-transform: uppercase; font-weight: 600; line-height: 1; }
.mk-pbar-trig-val { font-size: .63rem; color: rgba(255,255,255,.75); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.mk-pbar-trigger.open .mk-pbar-trig-val { color: #fff; }
.mk-pbar-chevron { font-size: .42rem; opacity: .3; transition: transform .15s; flex-shrink: 0; }
.mk-pbar-trigger.open .mk-pbar-chevron { opacity: .8; transform: rotate(180deg); }

/* ── Popup panels ─────────────────────────────────────────── */
.mk-pbar-panel {
    position: fixed;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(10,5,24,.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(167,139,250,.2);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.25rem 1.1rem;
    min-width: 360px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    z-index: 1999;
    box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}
.mk-pbar-panel.open {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}
.mk-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.mk-panel-title {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255,255,255,.3);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.mk-panel-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.25);
    cursor: pointer;
    font-size: .65rem;
    padding: 0;
    line-height: 1;
    transition: color .12s;
}
.mk-panel-close:hover { color: rgba(255,255,255,.65); }

/* ── Layout panel ─────────────────────────────────────────── */
.mk-layout-grid {
    display: flex;
    gap: .7rem;
}
.mk-layout-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.mk-layout-card span {
    font-size: .55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color .12s;
    margin-top: .4rem;
}
.mk-layout-card:hover span { color: rgba(255,255,255,.75); }
.mk-layout-card.active span { color: var(--mk-accent); }

/* Layout wireframe thumbnails */
.mk-layout-thumb {
    width: 78px;
    height: 54px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
}
.mk-layout-card:hover .mk-layout-thumb { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }
.mk-layout-card.active .mk-layout-thumb { border-color: var(--mk-accent); background: rgba(0,212,255,.06); }

.lp-nav    { height: 5px; background: rgba(255,255,255,.18); flex-shrink: 0; }
.lp-nav-sm { height: 3px; background: rgba(255,255,255,.18); flex-shrink: 0; }

.lp-hero-2col { flex: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; }
.lp-hero-2col > div { background: rgba(255,255,255,.1); border-radius: 1px; }

.lp-hero-full { flex: 2; background: rgba(255,255,255,.1); margin: 2px; border-radius: 1px; }

.lp-hero-center { height: 18px; background: rgba(255,255,255,.09); margin: 2px 12px; border-radius: 1px; flex-shrink: 0; }

.lp-hero-sm { height: 11px; background: rgba(255,255,255,.09); margin: 2px; border-radius: 1px; flex-shrink: 0; }

.lp-hero-bold { flex: 3; margin: 2px; background: rgba(255,255,255,.09); border-radius: 1px; display: flex; align-items: center; padding: 0 4px; }
.lp-hero-bold::after { content:''; display:block; height:4px; width:58%; background:rgba(255,255,255,.32); border-radius:1px; box-shadow: 0 3px 0 rgba(255,255,255,.1); }

.lp-strips { display:flex; gap:2px; padding:2px; flex-shrink:0; }
.lp-strips > div { flex:1; height:8px; background:rgba(255,255,255,.07); border-radius:1px; }

.lp-strips-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:2px; flex-shrink:0; }
.lp-strips-4 > div { height:8px; background:rgba(255,255,255,.07); border-radius:1px; }

.lp-strips-center { display:flex; flex-direction:column; gap:2px; padding:2px 12px; flex-shrink:0; }
.lp-strips-center > div { height:5px; background:rgba(255,255,255,.07); border-radius:1px; }

.lp-strips-tight { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:2px; flex-shrink:0; }
.lp-strips-tight > div { height:6px; background:rgba(255,255,255,.07); border-radius:1px; }

/* Structural layout thumbnail shapes */
.lp-list-rows { display:flex; flex-direction:column; gap:2px; padding:2px; flex:1; }
.lp-list-rows > div { height:9px; background:rgba(255,255,255,.07); border-radius:1px; border-left:3px solid rgba(255,255,255,.2); }
.lp-mosaic { display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:2px; flex-shrink:0; height:20px; }
.lp-mosaic-big { background:rgba(255,255,255,.1); border-radius:1px; grid-row:span 2; }
.lp-mosaic-sm { display:flex; flex-direction:column; gap:1px; }
.lp-mosaic-sm > div { flex:1; background:rgba(255,255,255,.07); border-radius:1px; }

/* Layout panel: group labels */
.mk-layout-group-label {
    font-size: .5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.2);
    align-self: flex-end;
    padding-bottom: .25rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    white-space: nowrap;
    margin-bottom: .1rem;
}
.mk-layout-grid {
    flex-wrap: wrap;
    row-gap: .75rem;
    align-items: flex-end;
}

/* ── Theme preset buttons (in panel) ─────────────────────── */
.mk-preset-row { display:flex; gap:.35rem; flex-wrap:wrap; }

.mk-preset-btn {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .38rem .9rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all .15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.mk-preset-btn:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.9); }
.mk-preset-btn.active { background:rgba(167,139,250,.2); border-color:rgba(167,139,250,.5); color:#fff; }

/* ── Accent swatches (in panel) ──────────────────────────── */
.mk-accent-swatches { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

.mk-accent-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.1);
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    flex-shrink: 0;
    position: relative;
}
.mk-accent-swatch:hover  { transform:scale(1.2); border-color:rgba(255,255,255,.4); }
.mk-accent-swatch.active { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16); transform:scale(1.1); }

.mk-accent-swatch[data-accent="default"] { background: linear-gradient(135deg,#555,#999); }
.mk-accent-swatch[data-accent="cyan"]    { background: #00d4ff; }
.mk-accent-swatch[data-accent="blue"]    { background: #3d9eff; }
.mk-accent-swatch[data-accent="purple"]  { background: #a855f7; }
.mk-accent-swatch[data-accent="pink"]    { background: #ec4899; }
.mk-accent-swatch[data-accent="red"]     { background: #ef4444; }
.mk-accent-swatch[data-accent="orange"]  { background: #ff9500; }
.mk-accent-swatch[data-accent="gold"]    { background: #f59e0b; }
.mk-accent-swatch[data-accent="green"]   { background: #00ff88; }

.mk-accent-swatch::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.9);
    color: #fff;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .1rem .35rem;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
}
.mk-accent-swatch:hover::after { opacity: 1; }

/* ── Mode options (in panel) ─────────────────────────────── */
.mk-mode-options { display:flex; gap:.5rem; }
.mk-mode-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .55rem 1.4rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    flex: 1;
}
.mk-mode-option:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.9); }
.mk-mode-option.active { background:rgba(167,139,250,.18); border-color:rgba(167,139,250,.45); color:#fff; }
.mk-mode-option[data-mode="light"].active { background:rgba(255,220,60,.12); border-color:rgba(255,220,60,.38); color:#ffd740; }

/* ============================================================
   DRAMATIC THEME ENHANCEMENTS — structural/decorative per theme
   ============================================================ */

/* ── Classic: corporate elevation ─────────────────────────── */
body[data-mk-theme="classic"] .mk-product-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 8px 28px rgba(0,0,0,.14);
    border-radius: 10px;
}
body[data-mk-theme="classic"] .mk-product-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.22), 0 24px 56px rgba(0,0,0,.16);
    border: none;
    transform: translateY(-5px);
}
body[data-mk-theme="classic"] .mk-step {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 20px rgba(0,0,0,.09);
    border-radius: 10px;
}
body[data-mk-theme="classic"] .mk-step:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 18px 42px rgba(0,0,0,.12);
    border: none;
}
body[data-mk-theme="classic"] .mk-section-title::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: var(--mk-accent);
    margin-top: .65rem;
    border-radius: 2px;
}
body[data-mk-theme="classic"] .mk-section-header-center .mk-section-title::after {
    margin-left: auto;
    margin-right: auto;
}
body[data-mk-theme="classic"] .mk-stat-num { text-shadow: none; font-size: 2.5rem; }
body[data-mk-theme="classic"] .mk-stat { border-color: rgba(47,143,255,.12); }
body[data-mk-theme="classic"] .mk-about-section { border-top: 1px solid rgba(47,143,255,.1); }

/* ── Futuristic: sci-fi corner brackets + enhanced grid ────── */
body[data-mk-theme="futuristic"] .mk-step { position: relative; }
body[data-mk-theme="futuristic"] .mk-step::before {
    content: '';
    position: absolute;
    top: 10px; left: 10px;
    width: 18px; height: 18px;
    border-top: 2px solid var(--mk-accent);
    border-left: 2px solid var(--mk-accent);
    pointer-events: none;
    z-index: 2;
    opacity: .5;
    transition: opacity .25s, box-shadow .25s;
}
body[data-mk-theme="futuristic"] .mk-step::after {
    content: '';
    position: absolute;
    bottom: 10px; right: 10px;
    width: 18px; height: 18px;
    border-bottom: 2px solid var(--mk-accent);
    border-right: 2px solid var(--mk-accent);
    pointer-events: none;
    z-index: 2;
    opacity: .5;
    transition: opacity .25s, box-shadow .25s;
}
body[data-mk-theme="futuristic"] .mk-step:hover::before,
body[data-mk-theme="futuristic"] .mk-step:hover::after { opacity: 1; box-shadow: 0 0 8px var(--mk-accent); }

body[data-mk-theme="futuristic"] .mk-section-label {
    position: relative;
    padding-left: 1rem;
}
body[data-mk-theme="futuristic"] .mk-section-label::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 14px;
    background: var(--mk-accent);
    border-radius: 2px;
    box-shadow: 0 0 6px var(--mk-accent);
}
body[data-mk-theme="futuristic"] .mk-stat-num {
    font-size: 2.8rem;
    letter-spacing: .04em;
    text-shadow: var(--mk-glow-cyan), 0 0 80px rgba(0,212,255,.15);
}
body[data-mk-theme="futuristic"] .mk-hero-eyebrow {
    box-shadow: 0 0 12px rgba(0,212,255,.15), inset 0 0 20px rgba(0,212,255,.04);
}

/* ── Warm: editorial richness ─────────────────────────────── */
body[data-mk-theme="warm"] .mk-product-card {
    border-top: 3px solid var(--mk-accent) !important;
    border-left: 1px solid var(--mk-glass-border);
    border-right: 1px solid var(--mk-glass-border);
    border-bottom: 1px solid var(--mk-glass-border);
}
body[data-mk-theme="warm"] .mk-product-body {
    background: linear-gradient(180deg, rgba(245,158,11,.06) 0%, transparent 50%);
}
body[data-mk-theme="warm"] .mk-section-label {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: .92rem;
    text-transform: none;
    letter-spacing: .02em;
    font-weight: 400;
    font-style: italic;
}
body[data-mk-theme="warm"] .mk-section-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
body[data-mk-theme="warm"] .mk-stat-num { font-size: 2.7rem; }
body[data-mk-theme="warm"] .mk-step {
    border-left: 3px solid rgba(245,158,11,.35);
    border-radius: 0 18px 18px 0;
}
body[data-mk-theme="warm"] .mk-step:hover { border-left-color: var(--mk-accent); }
body[data-mk-theme="warm"] .mk-hero-eyebrow {
    border-radius: 4px;
    font-family: 'DM Serif Display', Georgia, serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: .04em;
    font-size: .85rem;
    font-weight: 400;
}
body[data-mk-theme="warm"] .mk-hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
body[data-mk-theme="warm"] .mk-about-section { background: linear-gradient(135deg, var(--mk-surface) 0%, var(--mk-surface-2) 100%); }

/* ── Stadium: bold athletic ───────────────────────────────── */
body[data-mk-theme="stadium"] .mk-product-card {
    border-top: 4px solid var(--mk-accent) !important;
    border-radius: 0 0 6px 6px !important;
}
body[data-mk-theme="stadium"] .mk-step {
    border-top: 4px solid var(--mk-accent) !important;
    border-radius: 0 0 6px 6px !important;
}
body[data-mk-theme="stadium"] .mk-section-label {
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .22em;
    background: var(--mk-accent);
    color: #fff;
    padding: .22rem .7rem;
    border-radius: 2px;
    display: inline-block;
}
body[data-mk-theme="stadium"] .mk-section-title {
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body[data-mk-theme="stadium"] .mk-hero h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
}
body[data-mk-theme="stadium"] .mk-stat-num {
    font-size: 3.2rem;
    font-weight: 900;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.03em;
    text-shadow: none;
}
body[data-mk-theme="stadium"] .mk-step-num {
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    width: 56px; height: 56px;
}
body[data-mk-theme="stadium"] .mk-hero-eyebrow { border-radius: 2px; font-weight: 900; letter-spacing: .18em; }
body[data-mk-theme="stadium"] .mk-btn { font-weight: 900; letter-spacing: .1em; border-radius: 4px; }
body[data-mk-theme="stadium"] .mk-stat { border-color: rgba(239,68,68,.15); }

/* ── Midnight: luxury refined ─────────────────────────────── */
body[data-mk-theme="midnight"] .mk-product-card {
    border: 1px solid rgba(168,85,247,.15);
    box-shadow: 0 4px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.06);
}
body[data-mk-theme="midnight"] .mk-product-card:hover {
    border-color: rgba(168,85,247,.45);
    box-shadow: 0 16px 56px rgba(0,0,0,.65), var(--mk-glow-cyan);
}
body[data-mk-theme="midnight"] .mk-section-label {
    font-family: 'DM Serif Display', Georgia, serif;
    font-style: italic;
    text-transform: none;
    font-size: 1rem;
    letter-spacing: .02em;
    font-weight: 400;
}
body[data-mk-theme="midnight"] .mk-section-title { font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.025em; }
body[data-mk-theme="midnight"] .mk-hero h1 { font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.03em; }
body[data-mk-theme="midnight"] .mk-stat-num {
    font-size: 2.6rem;
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
}
body[data-mk-theme="midnight"] .mk-step-num {
    border-width: 1px;
    width: 56px; height: 56px;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
}
body[data-mk-theme="midnight"] .mk-hero-eyebrow {
    font-family: 'DM Serif Display', Georgia, serif;
    font-style: italic;
    text-transform: none;
    font-size: .9rem;
    letter-spacing: .04em;
    font-weight: 400;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(168,85,247,.45);
    background: transparent;
    padding: .2rem .1rem;
    box-shadow: none;
}
body[data-mk-theme="midnight"] .mk-navbar-cta { border-radius: 6px !important; }
body[data-mk-theme="midnight"] .mk-stat { border-color: rgba(168,85,247,.12); }

/* ── Arctic: minimal precision ─────────────────────────────── */
body[data-mk-theme="arctic"] .mk-product-card {
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 6px 20px rgba(0,0,0,.08);
    border-radius: 12px;
}
body[data-mk-theme="arctic"] .mk-product-card:hover {
    border: none !important;
    box-shadow: 0 4px 16px rgba(56,189,248,.15), 0 16px 42px rgba(0,0,0,.12);
    transform: translateY(-4px);
}
body[data-mk-theme="arctic"] .mk-step {
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06);
    border-radius: 12px;
}
body[data-mk-theme="arctic"] .mk-step:hover {
    border: none !important;
    box-shadow: 0 4px 14px rgba(56,189,248,.12), 0 14px 32px rgba(0,0,0,.09);
}
body[data-mk-theme="arctic"] .mk-section-label {
    text-transform: none;
    letter-spacing: .02em;
    font-size: .82rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
body[data-mk-theme="arctic"] .mk-section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    letter-spacing: -.025em;
}
body[data-mk-theme="arctic"] .mk-stat-num { font-size: 2.6rem; letter-spacing: -.02em; }
body[data-mk-theme="arctic"] .mk-section { padding: 7rem 0; }
body[data-mk-theme="arctic"] .mk-hero-eyebrow { background: transparent; border: 1px solid rgba(56,189,248,.3); }
body[data-mk-theme="arctic"] .mk-stat { border-color: rgba(56,189,248,.1); }

/* ============================================================
   LIGHT MODES — per-theme variable overrides
   Heroes keep their dark overlays; sections below go light.
   ============================================================ */

/* ── Generic Light ─ applies to ALL light mode states regardless of theme ── */
/* Ensures CSS variables resolve to readable values even when no theme is chosen */
body[data-mk-mode="light"] {
    --mk-bg:           #f4f7fb;
    --mk-surface:      #ffffff;
    --mk-surface-2:    #eaeef5;
    --mk-primary:      #ffffff;
    --mk-primary-dk:   #eaeef5;
    --mk-text:         #0e1a35;
    --mk-muted:        #4a6890;
    --mk-dark:         #eaeef5;
    --mk-glass:        rgba(255,255,255,.92);
    --mk-glass-border: rgba(26,111,212,.14);
    --mk-grid-line:    transparent;
    background: #f4f7fb;
}

/* ── Classic Light ─ enterprise clean ─────────────────────── */
body[data-mk-theme="classic"][data-mk-mode="light"] {
    --mk-bg:           #f4f7fb;
    --mk-surface:      #ffffff;
    --mk-surface-2:    #eaeef5;
    --mk-primary:      #ffffff;
    --mk-primary-dk:   #eaeef5;
    --mk-accent:       #1a6fd4;
    --mk-accent-dk:    #0d4fa0;
    --mk-blue:         #3d8fdf;
    --mk-glow-cyan:    none;
    --mk-glow-blue:    none;
    --mk-glass:        rgba(255,255,255,.92);
    --mk-glass-border: rgba(26,111,212,.14);
    --mk-text:         #0e1a35;
    --mk-muted:        #4a6890;
    --mk-dark:         #eaeef5;
    --mk-grid-line:    transparent;
    background: #f4f7fb;
}
body[data-mk-theme="classic"][data-mk-mode="light"] .mk-product-card {
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 6px 20px rgba(0,0,0,.06) !important;
}
body[data-mk-theme="classic"][data-mk-mode="light"] .mk-product-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.1), 0 20px 52px rgba(0,0,0,.09) !important;
}
body[data-mk-theme="classic"][data-mk-mode="light"] .mk-step {
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05) !important;
}
body[data-mk-theme="classic"][data-mk-mode="light"] .mk-step:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 14px 36px rgba(0,0,0,.08) !important;
}

/* ── Futuristic Light ─ cyber-white ────────────────────────── */
body[data-mk-theme="futuristic"][data-mk-mode="light"] {
    --mk-bg:           #f2f8ff;
    --mk-surface:      #ffffff;
    --mk-surface-2:    #e6f1ff;
    --mk-primary:      #ffffff;
    --mk-primary-dk:   #e6f1ff;
    --mk-accent:       #0088cc;
    --mk-accent-dk:    #006699;
    --mk-blue:         #1a77cc;
    --mk-glow-cyan:    0 0 14px rgba(0,136,204,.2), 0 0 36px rgba(0,136,204,.07);
    --mk-glow-blue:    0 0 14px rgba(26,119,204,.18), 0 0 36px rgba(26,119,204,.06);
    --mk-glass:        rgba(255,255,255,.88);
    --mk-glass-border: rgba(0,136,204,.2);
    --mk-text:         #060e1e;
    --mk-muted:        #3a5a80;
    --mk-dark:         #e6f1ff;
    --mk-grid-line:    rgba(0,136,204,.035);
    background: #f2f8ff;
}

/* ── Warm Light ─ parchment editorial ─────────────────────── */
body[data-mk-theme="warm"][data-mk-mode="light"] {
    --mk-bg:           #fdf8f0;
    --mk-surface:      #fffcf7;
    --mk-surface-2:    #f6eddf;
    --mk-primary:      #fffcf7;
    --mk-primary-dk:   #f6eddf;
    --mk-accent:       #b86e00;
    --mk-accent-dk:    #904e00;
    --mk-blue:         #cc8800;
    --mk-glow-cyan:    0 0 14px rgba(184,110,0,.2), 0 0 36px rgba(184,110,0,.07);
    --mk-glow-blue:    0 0 14px rgba(204,136,0,.18), 0 0 36px rgba(204,136,0,.06);
    --mk-glass:        rgba(255,252,247,.92);
    --mk-glass-border: rgba(184,110,0,.18);
    --mk-text:         #3a1f06;
    --mk-muted:        #8a6040;
    --mk-dark:         #f6eddf;
    --mk-grid-line:    transparent;
    background: #fdf8f0;
}
body[data-mk-theme="warm"][data-mk-mode="light"] .mk-product-card {
    border-top-color: var(--mk-accent) !important;
}
body[data-mk-theme="warm"][data-mk-mode="light"] .mk-about-section {
    background: linear-gradient(135deg, #f6eddf 0%, #fffcf7 100%);
}

/* ── Stadium Light ─ sports print ──────────────────────────── */
body[data-mk-theme="stadium"][data-mk-mode="light"] {
    --mk-bg:           #ffffff;
    --mk-surface:      #f8f8f8;
    --mk-surface-2:    #eeeeee;
    --mk-primary:      #f8f8f8;
    --mk-primary-dk:   #e4e4e4;
    --mk-accent:       #cc1111;
    --mk-accent-dk:    #991010;
    --mk-blue:         #e03030;
    --mk-glow-cyan:    none;
    --mk-glow-blue:    none;
    --mk-glass:        rgba(255,255,255,.92);
    --mk-glass-border: rgba(204,17,17,.18);
    --mk-text:         #0a0a0a;
    --mk-muted:        #555555;
    --mk-dark:         #e4e4e4;
    --mk-grid-line:    transparent;
    background: #ffffff;
}
body[data-mk-theme="stadium"][data-mk-mode="light"] .mk-product-card,
body[data-mk-theme="stadium"][data-mk-mode="light"] .mk-step {
    background: #f8f8f8 !important;
}
body[data-mk-theme="stadium"][data-mk-mode="light"] .mk-section-label {
    background: #cc1111;
    color: #fff;
}

/* ── Midnight Light ─ lavender luxury ──────────────────────── */
body[data-mk-theme="midnight"][data-mk-mode="light"] {
    --mk-bg:           #f8f4ff;
    --mk-surface:      #ffffff;
    --mk-surface-2:    #f0e8ff;
    --mk-primary:      #ffffff;
    --mk-primary-dk:   #f0e8ff;
    --mk-accent:       #7c3aed;
    --mk-accent-dk:    #5b21b6;
    --mk-blue:         #9e5cf5;
    --mk-glow-cyan:    0 0 14px rgba(124,58,237,.18), 0 0 36px rgba(124,58,237,.06);
    --mk-glow-blue:    0 0 14px rgba(158,92,245,.15), 0 0 36px rgba(158,92,245,.05);
    --mk-glass:        rgba(255,255,255,.9);
    --mk-glass-border: rgba(124,58,237,.16);
    --mk-text:         #1a0e30;
    --mk-muted:        #6040a0;
    --mk-dark:         #f0e8ff;
    --mk-grid-line:    rgba(124,58,237,.02);
    background: #f8f4ff;
}
body[data-mk-theme="midnight"][data-mk-mode="light"] .mk-product-card {
    border-color: rgba(124,58,237,.12) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 0 0 1px rgba(124,58,237,.05) !important;
}
body[data-mk-theme="midnight"][data-mk-mode="light"] .mk-product-card:hover {
    border-color: rgba(124,58,237,.4) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.1), var(--mk-glow-cyan) !important;
}
body[data-mk-theme="midnight"][data-mk-mode="light"] .mk-hero-eyebrow {
    border-bottom-color: rgba(124,58,237,.4);
    color: var(--mk-accent);
}

/* ── Arctic Light ─ ultra-minimal ──────────────────────────── */
body[data-mk-theme="arctic"][data-mk-mode="light"] {
    --mk-bg:           #f6fbff;
    --mk-surface:      #ffffff;
    --mk-surface-2:    #eaf4fc;
    --mk-primary:      #ffffff;
    --mk-primary-dk:   #eaf4fc;
    --mk-accent:       #0077bb;
    --mk-accent-dk:    #005588;
    --mk-blue:         #2299dd;
    --mk-glow-cyan:    0 0 12px rgba(0,119,187,.15), 0 0 28px rgba(0,119,187,.05);
    --mk-glow-blue:    0 0 12px rgba(34,153,221,.12), 0 0 28px rgba(34,153,221,.04);
    --mk-glass:        rgba(255,255,255,.92);
    --mk-glass-border: rgba(0,119,187,.12);
    --mk-text:         #0c1a26;
    --mk-muted:        #3a6080;
    --mk-dark:         #eaf4fc;
    --mk-grid-line:    transparent;
    background: #f6fbff;
}
body[data-mk-theme="arctic"][data-mk-mode="light"] .mk-product-card,
body[data-mk-theme="arctic"][data-mk-mode="light"] .mk-step {
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04) !important;
}
body[data-mk-theme="arctic"][data-mk-mode="light"] .mk-product-card:hover,
body[data-mk-theme="arctic"][data-mk-mode="light"] .mk-step:hover {
    box-shadow: 0 4px 14px rgba(0,119,187,.1), 0 14px 36px rgba(0,0,0,.07) !important;
}

/* ============================================================
   GLOBAL LIGHT MODE — fix hardcoded white text + surfaces
   ============================================================ */
body[data-mk-mode="light"] .mk-section-title  { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-stat           { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-step h3        { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-feature-text h4 { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-product-name   { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-about-stat-num { color: var(--mk-accent) !important; }
body[data-mk-mode="light"] .mk-about-stat-label { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-cta h2         { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-cta p          { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-section-sub    { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-feature-text p { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-product-desc   { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-step p         { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-product-features li { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-ticker-text    { color: var(--mk-muted) !important; opacity: .7; }
body[data-mk-mode="light"] .mk-ticker-item img { filter: grayscale(100%) brightness(.7); }
body[data-mk-mode="light"] .mk-ticker-item img:hover { filter: grayscale(0%) brightness(.9); }
/* Section labels and switcher labels need sufficient contrast on light backgrounds */
body[data-mk-mode="light"] .mk-section-label { color: #006699; }
body[data-mk-mode="light"] .mk-sw-label      { color: #1255a8; }

/* Navbar always dark — even in light mode */
body[data-mk-mode="light"] .mk-navbar-links a       { color: rgba(255,255,255,.85) !important; }
body[data-mk-mode="light"] .mk-navbar-links a:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }
body[data-mk-mode="light"] .mk-navbar-cta           { color: #fff !important; }
body[data-mk-mode="light"] .mk-navbar.scrolled {
    background: rgba(10,18,40,.95) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 4px 24px rgba(0,0,0,.4) !important;
}
@media (max-width: 900px) {
    body[data-mk-mode="light"] .mk-navbar-links {
        background: rgba(10,18,40,.96) !important;
        border-color: rgba(255,255,255,.1) !important;
    }
}
body[data-mk-mode="light"] .mk-hamburger span { background: #fff; box-shadow: none !important; }

/* Sport cards — keep overlay dark regardless of light mode (photo background) */
body[data-mk-mode="light"] .mk-sport-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.08) 65%) !important;
}
body[data-mk-mode="light"] .mk-sport-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.22), 0 0 0 1px var(--mk-accent) !important;
}
body[data-mk-mode="light"] .mk-sport-card-arrow {
    background: rgba(0,0,0,.22) !important;
    border-color: rgba(255,255,255,.3) !important;
    color: #fff !important;
}
body[data-mk-mode="light"] .mk-sport-card:hover .mk-sport-card-arrow {
    background: var(--mk-accent) !important;
    color: #fff !important;
}

/* Step cards — replace hardcoded cyan num badge with themed styling */
body[data-mk-mode="light"] .mk-step-num {
    background: rgba(0,0,0,.05) !important;
    border-color: var(--mk-glass-border) !important;
    box-shadow: none !important;
    color: var(--mk-accent) !important;
}
body[data-mk-mode="light"] .mk-step:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 0 0 1px var(--mk-accent) !important;
    border-color: var(--mk-accent) !important;
}

/* Light sections */
body[data-mk-mode="light"] .mk-stats,
body[data-mk-mode="light"] .mk-ticker-section  { background: var(--mk-surface-2); border-color: var(--mk-glass-border); }
body[data-mk-mode="light"] .mk-about-section,
body[data-mk-mode="light"] .mk-video-section   { background: var(--mk-surface-2); }
/* About & video text — switch from hardcoded #fff once section bg goes light */
body[data-mk-mode="light"] .mk-about-text                    { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-about-text .mk-section-title  { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-about-text .mk-section-sub    { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-video-text                    { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-video-text .mk-section-title  { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-video-text .mk-section-sub    { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-about-stats > div > div:last-child { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-cta             { background: var(--mk-surface); border-color: var(--mk-glass-border); }
body[data-mk-mode="light"] .mk-cta-inner       { color: var(--mk-text) !important; }
body[data-mk-mode="light"] .mk-products        { background: var(--mk-bg); }

/* Footer stays dark in all modes — no light-mode override */
/* Footer always dark — .mk-footer has scoped vars, no light mode overrides needed */

/* Lightbox always dark */
body[data-mk-mode="light"] .mk-lightbox        { background: rgba(0,0,0,.92) !important; }
body[data-mk-mode="light"] .mk-lightbox-close  { color: #fff !important; }

/* ============================================================
   LIGHT MODE — HERO & SPORT HERO FIXES
   Heroes use --mk-hero-from/mid/to vars; we give them light
   values per-theme, then override all hardcoded white text.
   ============================================================ */

/* ── Light hero gradient vars (one line per theme) ──────────── */
body[data-mk-theme="classic"][data-mk-mode="light"]    { --mk-hero-from:#c4d8f0; --mk-hero-mid:#d8e8f8; --mk-hero-to:#edf4fd; --mk-overlay-rgb:236,244,252; }
body[data-mk-theme="futuristic"][data-mk-mode="light"] { --mk-hero-from:#b0cef0; --mk-hero-mid:#c8e0f8; --mk-hero-to:#e4f2fd; --mk-overlay-rgb:215,236,252; }
body[data-mk-theme="warm"][data-mk-mode="light"]       { --mk-hero-from:#dcc8a0; --mk-hero-mid:#ecd8b4; --mk-hero-to:#fdf8f0; --mk-overlay-rgb:242,232,210; }
body[data-mk-theme="stadium"][data-mk-mode="light"]    { --mk-hero-from:#d4d4d4; --mk-hero-mid:#e4e4e4; --mk-hero-to:#f8f8f8; --mk-overlay-rgb:234,234,234; }
body[data-mk-theme="midnight"][data-mk-mode="light"]   { --mk-hero-from:#c8aaf8; --mk-hero-mid:#dcc8ff; --mk-hero-to:#f8f4ff; --mk-overlay-rgb:235,224,255; }
body[data-mk-theme="arctic"][data-mk-mode="light"]     { --mk-hero-from:#a8ccf0; --mk-hero-mid:#c0e0fa; --mk-hero-to:#e8f4ff; --mk-overlay-rgb:220,240,255; }

/* ── Hero text: override all hardcoded #fff for light mode ───── */
body[data-mk-mode="light"] .mk-hero-text,
body[data-mk-mode="light"] .mk-hero h1             { color: var(--mk-text); text-shadow: none !important; }
body[data-mk-mode="light"] .mk-hero h1 span        { color: var(--mk-accent); text-shadow: none !important; }
body[data-mk-mode="light"] .mk-hero-sub            { color: var(--mk-muted) !important; }
body[data-mk-mode="light"] .mk-hero-eyebrow {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.14) !important;
    color: var(--mk-accent) !important;
    box-shadow: none !important;
}

/* ── Hero buttons on light backgrounds ─────────────────────── */
body[data-mk-mode="light"] .mk-btn-outline {
    color: var(--mk-text);
    border-color: rgba(0,0,0,.22);
}
body[data-mk-mode="light"] .mk-btn-outline:hover {
    background: rgba(0,0,0,.05);
    color: var(--mk-text);
    border-color: rgba(0,0,0,.38);
    box-shadow: none;
}
body[data-mk-mode="light"] .mk-btn-light {
    background: rgba(0,0,0,.06);
    color: var(--mk-text);
    border-color: rgba(0,0,0,.14);
}
body[data-mk-mode="light"] .mk-btn-light:hover {
    background: rgba(0,0,0,.1);
    color: var(--mk-text);
    border-color: rgba(0,0,0,.22);
}

/* ── Sport hero (sub-pages) text ─────────────────────────────── */
body[data-mk-mode="light"] .mk-sport-hero-content     { color: var(--mk-text); }
body[data-mk-mode="light"] .mk-sport-hero-content h1  { color: var(--mk-text); text-shadow: none !important; }

/* ── Suppress hardcoded cyan radial orbs ────────────────────── */
/* .mk-hero::before also serves as grid overlay — strip the radial glow */
body[data-mk-mode="light"] .mk-hero::before {
    background-image:
        linear-gradient(var(--mk-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mk-grid-line) 1px, transparent 1px) !important;
    background-size: 60px 60px !important;
}
body[data-mk-mode="light"] .mk-hero::after           { background: none !important; }
body[data-mk-mode="light"] .mk-video-section::before { background: none !important; }
body[data-mk-mode="light"] .mk-cta::before           { background: none !important; }
body[data-mk-mode="light"] .mk-stats::before         { background: none !important; }

/* ── Suppress hardcoded cyan grid lines on section surfaces ──── */
body[data-mk-mode="light"] .mk-section::before,
body[data-mk-mode="light"] .mk-video-section::before,
body[data-mk-mode="light"] .mk-about-section::before,
body[data-mk-mode="light"] .mk-footer::before        { background-image: none !important; }

/* ============================================================
   PAGE LAYOUTS — applied via data-mk-layout on <body>
   Standard = default (no attribute). Others are structurally
   different page experiences, not just spacing tweaks.
   ============================================================ */

/* ── Wide: 1500px, spacious, 4-col products ──────────────── */
body[data-mk-layout="wide"] .mk-section-inner,
body[data-mk-layout="wide"] .mk-hero-content,
body[data-mk-layout="wide"] .mk-navbar-inner,
body[data-mk-layout="wide"] .mk-footer-inner,
body[data-mk-layout="wide"] .mk-video-inner,
body[data-mk-layout="wide"] .mk-stats-inner,
body[data-mk-layout="wide"] .mk-cta-inner            { max-width: 1520px; }
body[data-mk-layout="wide"] .mk-section              { padding: 6.5rem 0; }
body[data-mk-layout="wide"] .mk-hero-content         { padding: 9rem 2.5rem 5rem; gap: 5.5rem; }
body[data-mk-layout="wide"] .mk-hero h1              { font-size: clamp(2.4rem, 5vw, 4.2rem); }
@media (min-width: 1100px) {
    body[data-mk-layout="wide"] .mk-products-grid    { grid-template-columns: repeat(4,1fr); }
}

/* ── Centered: 900px max, editorial column ───────────────── */
body[data-mk-layout="centered"] .mk-section-inner,
body[data-mk-layout="centered"] .mk-navbar-inner,
body[data-mk-layout="centered"] .mk-footer-inner,
body[data-mk-layout="centered"] .mk-stats-inner,
body[data-mk-layout="centered"] .mk-cta-inner        { max-width: 920px; }
body[data-mk-layout="centered"] .mk-hero-content     { grid-template-columns: 1fr; max-width: 800px; padding: 8rem 2rem 5rem; text-align: center; }
body[data-mk-layout="centered"] .mk-hero-text        { text-align: center; }
body[data-mk-layout="centered"] .mk-hero-sub         { max-width: 540px; margin: 0 auto 2rem; }
body[data-mk-layout="centered"] .mk-hero-actions     { justify-content: center; }
body[data-mk-layout="centered"] .mk-hero-video       { display: none; }
body[data-mk-layout="centered"] .mk-steps            { grid-template-columns: repeat(2,1fr); }
body[data-mk-layout="centered"] .mk-sports-grid      { grid-template-columns: repeat(2,1fr); }
body[data-mk-layout="centered"] .mk-section-header-center { max-width: 680px; margin-left: auto; margin-right: auto; }

/* ── Compact: tight spacing, data-dense ─────────────────── */
body[data-mk-layout="compact"] .mk-section           { padding: 3rem 0; }
body[data-mk-layout="compact"] .mk-hero              { min-height: 76vh; }
body[data-mk-layout="compact"] .mk-hero-content      { padding: 6rem 2rem 3rem; gap: 2.5rem; }
body[data-mk-layout="compact"] .mk-hero h1           { font-size: clamp(1.7rem, 3.5vw, 2.8rem); }
body[data-mk-layout="compact"] .mk-stats             { padding: 1.5rem 0; }
body[data-mk-layout="compact"] .mk-stats-inner       { gap: 2rem; }
body[data-mk-layout="compact"] .mk-stat-num          { font-size: clamp(1.8rem, 3vw, 2.8rem); }
body[data-mk-layout="compact"] .mk-products-grid     { gap: 1rem; }
body[data-mk-layout="compact"] .mk-steps             { gap: 1rem; }
body[data-mk-layout="compact"] .mk-step              { padding: 1.25rem 1rem; }
body[data-mk-layout="compact"] .mk-sports-grid       { gap: .75rem; }
body[data-mk-layout="compact"] .mk-sport-card        { aspect-ratio: 3/2; }
body[data-mk-layout="compact"] .mk-section-title     { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }

/* ── Bold: oversized type, dramatic impact ───────────────── */
body[data-mk-layout="bold"] .mk-section-inner,
body[data-mk-layout="bold"] .mk-hero-content,
body[data-mk-layout="bold"] .mk-navbar-inner,
body[data-mk-layout="bold"] .mk-footer-inner,
body[data-mk-layout="bold"] .mk-video-inner          { max-width: 1400px; }
body[data-mk-layout="bold"] .mk-section              { padding: 7rem 0; }
body[data-mk-layout="bold"] .mk-hero-content         { grid-template-columns: 3fr 2fr; padding: 9rem 2rem 5rem; gap: 2.5rem; }
body[data-mk-layout="bold"] .mk-hero h1              { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.0; letter-spacing: -.03em; }
body[data-mk-layout="bold"] .mk-section-title        { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.02em; }
body[data-mk-layout="bold"] .mk-section-label        { font-size: .8rem; letter-spacing: .22em; }
body[data-mk-layout="bold"] .mk-stat-num             { font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 800; }
body[data-mk-layout="bold"] .mk-step-num             { width: 62px; height: 62px; font-size: 1.4rem; }
body[data-mk-layout="bold"] .mk-hero-sub             { font-size: 1.2rem; max-width: 560px; }

/* ══════════════════════════════════════════════════════════
   LANDING — conversion-focused, centered hero, no distractions
   ══════════════════════════════════════════════════════════ */
body[data-mk-structure="landing"] .mk-hero              { min-height: 100vh; }
body[data-mk-structure="landing"] .mk-hero-content      { grid-template-columns: 1fr; max-width: 860px; padding: 9rem 2rem 6rem; text-align: center; align-items: center; }
body[data-mk-structure="landing"] .mk-hero-text         { text-align: center; }
body[data-mk-structure="landing"] .mk-hero-video        { display: none; }
body[data-mk-structure="landing"] .mk-hero h1           { font-size: clamp(3rem, 6.5vw, 5.5rem); line-height: .98; letter-spacing: -.03em; }
body[data-mk-structure="landing"] .mk-hero-sub          { max-width: 520px; margin: 0 auto 2.5rem; font-size: 1.15rem; }
body[data-mk-structure="landing"] .mk-hero-actions      { justify-content: center; }
body[data-mk-structure="landing"] .mk-hero-eyebrow      { margin: 0 auto 1.5rem; }

/* Stats: jumbo standalone numbers */
body[data-mk-structure="landing"] .mk-stats             { padding: 4.5rem 0; }
body[data-mk-structure="landing"] .mk-stat-num          { font-size: clamp(3rem, 5vw, 5rem); line-height: 1; }
body[data-mk-structure="landing"] .mk-stats-inner       { gap: 5rem; justify-content: center; }

/* Sports: horizontal scroll strip */
body[data-mk-structure="landing"] .mk-sports-grid       { display: flex !important; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
body[data-mk-structure="landing"] .mk-sport-card        { flex: 0 0 220px !important; aspect-ratio: 3/4 !important; }

/* Steps: horizontal with connecting line */
body[data-mk-structure="landing"] .mk-steps             { position: relative; align-items: flex-start; }
body[data-mk-structure="landing"] .mk-steps::before     { content:''; position:absolute; top:26px; left:calc(16.6% + 26px); right:calc(16.6% + 26px); height:1px; background: var(--mk-glass-border); pointer-events:none; }
body[data-mk-structure="landing"] .mk-step              { text-align: center; }

/* Hide non-essential sections */
body[data-mk-structure="landing"] .mk-ticker-section    { display: none; }
body[data-mk-structure="landing"] .mk-about-section     { display: none; }
body[data-mk-structure="landing"] .mk-section.mk-bg-light { display: none; } /* gallery */

/* CTA: expanded prominence */
body[data-mk-structure="landing"] .mk-cta               { padding: 7rem 0; }
body[data-mk-structure="landing"] .mk-cta h2            { font-size: clamp(2rem, 4vw, 3.2rem); }

/* ══════════════════════════════════════════════════════════
   MAGAZINE — editorial, typographic, content-forward
   ══════════════════════════════════════════════════════════ */
body[data-mk-structure="magazine"] .mk-hero             { min-height: 55vh; }
body[data-mk-structure="magazine"] .mk-hero-content     { grid-template-columns: 1fr; max-width: 1100px; padding: 8rem 2rem 4rem; }
body[data-mk-structure="magazine"] .mk-hero-video       { display: none; }
body[data-mk-structure="magazine"] .mk-hero h1          { font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: 1.0; letter-spacing: -.025em; }
body[data-mk-structure="magazine"] .mk-hero-sub         { max-width: 580px; }

/* Sections: top accent rule like editorial chapters */
body[data-mk-structure="magazine"] .mk-section          { border-top: 2px solid var(--mk-accent); }
body[data-mk-structure="magazine"] .mk-section-title    { font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -.02em; }

/* Sports: 2-col wide landscape cards */
body[data-mk-structure="magazine"] .mk-sports-grid      { grid-template-columns: repeat(2,1fr) !important; }
body[data-mk-structure="magazine"] .mk-sport-card       { aspect-ratio: 16/9 !important; }

/* Product cards: horizontal list rows */
body[data-mk-structure="magazine"] .mk-products-grid    { grid-template-columns: 1fr !important; gap: 0 !important; }
body[data-mk-structure="magazine"] .mk-product-card     { flex-direction: row !important; border-radius: 0 !important; border: none !important; border-bottom: 1px solid var(--mk-glass-border) !important; backdrop-filter: none !important; }
body[data-mk-structure="magazine"] .mk-product-card:hover { transform: none !important; background: rgba(255,255,255,.04) !important; }
body[data-mk-structure="magazine"] .mk-product-img-wrap { width: 220px !important; flex-shrink: 0 !important; aspect-ratio: unset !important; height: 160px !important; }
body[data-mk-structure="magazine"] .mk-product-body     { padding: 1.5rem 2rem !important; display: flex; flex-direction: column; justify-content: center; }

/* Steps: vertical numbered list, not cards */
body[data-mk-structure="magazine"] .mk-steps            { grid-template-columns: 1fr !important; gap: 0 !important; }
body[data-mk-structure="magazine"] .mk-step             { display: flex !important; flex-direction: row !important; text-align: left !important; gap: 1.75rem !important; align-items: flex-start !important; padding: 1.75rem 0 !important; background: transparent !important; border: none !important; border-bottom: 1px solid var(--mk-glass-border) !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body[data-mk-structure="magazine"] .mk-step-num         { margin: 0 !important; flex-shrink: 0 !important; }
body[data-mk-structure="magazine"] .mk-step h3          { text-align: left !important; }
body[data-mk-structure="magazine"] .mk-step p           { text-align: left !important; }

/* Hide ticker and gallery in magazine */
body[data-mk-structure="magazine"] .mk-ticker-section   { display: none; }
body[data-mk-structure="magazine"] .mk-section.mk-bg-light { display: none; }

/* ══════════════════════════════════════════════════════════
   IMMERSIVE — cinematic, full-bleed, photo-dominant
   ══════════════════════════════════════════════════════════ */

/* Remove max-width containment — everything edge-to-edge */
body[data-mk-structure="immersive"] .mk-section-inner,
body[data-mk-structure="immersive"] .mk-hero-content,
body[data-mk-structure="immersive"] .mk-navbar-inner,
body[data-mk-structure="immersive"] .mk-footer-inner,
body[data-mk-structure="immersive"] .mk-video-inner,
body[data-mk-structure="immersive"] .mk-about-inner,
body[data-mk-structure="immersive"] .mk-cta-inner,
body[data-mk-structure="immersive"] .mk-stats-inner     { max-width: 100%; padding-left: 5vw; padding-right: 5vw; }

body[data-mk-structure="immersive"] .mk-hero            { min-height: 100vh; }
body[data-mk-structure="immersive"] .mk-hero-content    { grid-template-columns: 1fr; padding: 8rem 5vw 5rem; align-items: flex-end; min-height: 100vh; padding-bottom: 8rem; }
body[data-mk-structure="immersive"] .mk-hero-video      { display: none; }
body[data-mk-structure="immersive"] .mk-hero h1         { font-size: clamp(3.5rem, 8vw, 8rem); line-height: .92; letter-spacing: -.04em; }
body[data-mk-structure="immersive"] .mk-hero-sub        { font-size: 1.25rem; max-width: 600px; }

/* Stats: enormous spaced numbers */
body[data-mk-structure="immersive"] .mk-stats           { padding: 5rem 5vw; }
body[data-mk-structure="immersive"] .mk-stat-num        { font-size: clamp(4rem, 7vw, 7rem); line-height: 1; font-weight: 800; }
body[data-mk-structure="immersive"] .mk-stat-label      { font-size: .9rem; letter-spacing: .2em; }
body[data-mk-structure="immersive"] .mk-stats-inner     { gap: 8vw; }

/* Sports: 2-col mosaic with first card spanning 2 rows */
body[data-mk-structure="immersive"] .mk-sports-grid     { grid-template-columns: repeat(2,1fr) !important; gap: .5rem !important; }
body[data-mk-structure="immersive"] .mk-sport-card      { border-radius: 0 !important; }
body[data-mk-structure="immersive"] .mk-sport-card:first-child { grid-row: span 2 !important; aspect-ratio: unset !important; min-height: 500px; }

/* Steps: oversized */
body[data-mk-structure="immersive"] .mk-section         { padding: 8rem 0; }
body[data-mk-structure="immersive"] .mk-step-num        { width: 72px !important; height: 72px !important; font-size: 1.6rem !important; }
body[data-mk-structure="immersive"] .mk-section-title   { font-size: clamp(2.2rem, 4.5vw, 4rem); letter-spacing: -.025em; }

/* About: full-bleed split */
body[data-mk-structure="immersive"] .mk-about-inner     { padding: 0 !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
body[data-mk-structure="immersive"] .mk-about-text      { padding: 6rem 5vw !important; }
body[data-mk-structure="immersive"] .mk-about-photo     { border-radius: 0 !important; aspect-ratio: unset !important; min-height: 500px; box-shadow: none !important; }

/* Hide ticker */
body[data-mk-structure="immersive"] .mk-ticker-section  { display: none; }

/* ══════════════════════════════════════════════════════════
   SAAS — tech-product style, structured, feature-grid
   ══════════════════════════════════════════════════════════ */
body[data-mk-structure="saas"] .mk-hero                 { min-height: 68vh; }
body[data-mk-structure="saas"] .mk-hero-content         { padding: 7rem 2rem 4rem; gap: 3rem; }
body[data-mk-structure="saas"] .mk-hero h1              { font-size: clamp(1.8rem, 3.8vw, 3.2rem); }
body[data-mk-structure="saas"] .mk-hero-sub             { font-size: .95rem; max-width: 440px; }

/* Stats: compact pill row */
body[data-mk-structure="saas"] .mk-stats               { padding: 1.5rem 0; }
body[data-mk-structure="saas"] .mk-stats-inner         { gap: 2rem; flex-wrap: wrap; }
body[data-mk-structure="saas"] .mk-stat                { background: var(--mk-glass); border: 1px solid var(--mk-glass-border); border-radius: 8px; padding: .6rem 1.25rem; display: flex; align-items: center; gap: .75rem; flex-direction: row; }
body[data-mk-structure="saas"] .mk-stat-num            { font-size: 1.4rem; line-height: 1; }
body[data-mk-structure="saas"] .mk-stat-label          { font-size: .7rem; letter-spacing: .06em; text-align: left; }

/* Sections: tighter */
body[data-mk-structure="saas"] .mk-section             { padding: 3.5rem 0; }

/* Products: 4-col tight grid */
@media (min-width: 900px) {
    body[data-mk-structure="saas"] .mk-products-grid   { grid-template-columns: repeat(4,1fr); gap: 1rem; }
}
body[data-mk-structure="saas"] .mk-product-card        { border-radius: 8px !important; }
body[data-mk-structure="saas"] .mk-product-img-wrap    { aspect-ratio: 16/9 !important; }

/* Steps: horizontal compact numbered pills */
body[data-mk-structure="saas"] .mk-steps              { gap: 1rem; }
body[data-mk-structure="saas"] .mk-step               { padding: 1.25rem !important; }
body[data-mk-structure="saas"] .mk-step-num           { width: 36px !important; height: 36px !important; font-size: .9rem !important; margin-bottom: .75rem !important; }
body[data-mk-structure="saas"] .mk-step h3            { font-size: .82rem !important; }
body[data-mk-structure="saas"] .mk-step p             { font-size: .78rem !important; }

/* About: narrow centered text, no photo */
body[data-mk-structure="saas"] .mk-about-inner        { grid-template-columns: 1fr !important; max-width: 720px !important; }
body[data-mk-structure="saas"] .mk-about-photo        { display: none !important; }
body[data-mk-structure="saas"] .mk-about-text .mk-section-sub { font-size: 1rem; }

/* Sports: 3-col (same as standard — no override needed) */

/* Hide noise */
body[data-mk-structure="saas"] .mk-ticker-section      { display: none; }
body[data-mk-structure="saas"] .mk-section.mk-bg-light { display: none; } /* gallery */

/* Footer: compact */
body[data-mk-structure="saas"] .mk-footer              { padding: 3rem 0 1.5rem; }


/* ── Budget Calculator Widget ─────────────────────────────────────────────── */
.mk-calc-section { background: linear-gradient(160deg, rgba(8,4,20,.98) 0%, rgba(12,20,50,.98) 100%); }
.mk-calc-widget {
    max-width: 780px;
    margin: 2.5rem auto 0;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    overflow: hidden;
}
.mk-calc-step { display: none; padding: 2rem 2.5rem; }
.mk-calc-step.active { display: block; }
.mk-calc-step-label {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
}
.mk-calc-step-sub { color: var(--mk-text-muted); font-size: .88rem; margin: -.75rem 0 1.5rem; }
.mk-calc-step-num {
    width: 32px; height: 32px;
    background: var(--mk-accent);
    color: #000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Sports grid */
.mk-calc-sports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 1.75rem;
}
@media (max-width: 600px) { .mk-calc-sports-grid { grid-template-columns: repeat(2,1fr); } }
.mk-calc-sport-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem .75rem;
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    cursor: pointer;
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: border-color .15s, background .15s, color .15s;
}
.mk-calc-sport-btn:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.mk-calc-sport-btn.active { border-color: var(--mk-accent); background: rgba(0,212,255,.08); color: #fff; }
.mk-calc-sport-btn input { display: none; }
.mk-calc-sport-btn i { font-size: 1.4rem; color: var(--mk-accent); }

/* Attendance options */
.mk-calc-attendance-opts {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 500px) { .mk-calc-attendance-opts { grid-template-columns: 1fr; } }
.mk-calc-att-btn {
    display: block;
    padding: 1rem 1.25rem;
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.mk-calc-att-btn:hover { border-color: rgba(255,255,255,.3); }
.mk-calc-att-btn.active { border-color: var(--mk-accent); background: rgba(0,212,255,.08); }
.mk-calc-att-btn input { display: none; }
.mk-calc-att-label { display: flex; flex-direction: column; gap: .2rem; }
.mk-calc-att-num { font-size: 1rem; font-weight: 700; color: #fff; }
.mk-calc-att-desc { font-size: .78rem; color: var(--mk-text-muted); }

/* Sponsor hint */
.mk-calc-sponsor-hint {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.25);
    border-radius: 8px;
    font-size: .82rem;
    color: #86efac;
    margin-bottom: 1.25rem;
}

/* Budget options */
.mk-calc-budget-opts {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
    margin-bottom: 1.75rem;
}
@media (max-width: 500px) { .mk-calc-budget-opts { grid-template-columns: 1fr; } }
.mk-calc-budget-btn {
    display: block;
    padding: 1.25rem;
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    text-align: center;
}
.mk-calc-budget-btn:hover { border-color: rgba(255,255,255,.3); }
.mk-calc-budget-btn.active { border-color: var(--mk-accent); background: rgba(0,212,255,.08); }
.mk-calc-budget-btn input { display: none; }
.mk-calc-budget-label { display: flex; flex-direction: column; gap: .2rem; align-items: center; }
.mk-calc-budget-label span { font-size: 1rem; font-weight: 700; color: #fff; }
.mk-calc-budget-label small { font-size: .78rem; color: var(--mk-text-muted); }

/* Nav buttons */
.mk-calc-nav { display: flex; gap: .75rem; justify-content: flex-end; margin-top: .5rem; }

/* Results */
.mk-calc-results-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mk-calc-results-header .fa-check-circle { font-size: 2rem; color: var(--mk-accent); flex-shrink: 0; }
.mk-calc-results-title { font-size: 1.1rem; font-weight: 700; color: #fff; }
.mk-calc-results-sub { font-size: .82rem; color: var(--mk-text-muted); margin-top: .15rem; }
.mk-calc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.5rem 2rem;
}
.mk-calc-result-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
}
.mk-calc-result-card:hover { border-color: rgba(0,212,255,.4); }
.mk-calc-result-img { aspect-ratio: 16/9; overflow: hidden; background: rgba(255,255,255,.04); }
.mk-calc-result-img img { width: 100%; height: 100%; object-fit: cover; }
.mk-calc-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); font-size: 2rem; }
.mk-calc-result-body { padding: .9rem 1rem; }
.mk-calc-dvb-badge {
    display: inline-flex; align-items: center;
    padding: .18rem .55rem;
    background: rgba(250,204,21,.12);
    border: 1px solid rgba(250,204,21,.3);
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fde047;
    margin-bottom: .5rem;
}
.mk-calc-featured-badge {
    display: inline-flex; align-items: center;
    padding: .18rem .55rem;
    background: rgba(0,212,255,.1);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mk-accent);
    margin-bottom: .5rem;
}
.mk-calc-result-sport { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mk-text-muted); margin-bottom: .2rem; }
.mk-calc-result-name { font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: .3rem; }
.mk-calc-result-model { font-size: .75rem; color: var(--mk-text-muted); margin-bottom: .4rem; font-family: monospace; }
.mk-calc-result-desc { font-size: .77rem; color: rgba(255,255,255,.6); line-height: 1.45; }
.mk-calc-no-results {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    color: rgba(255,255,255,.6);
    font-size: .88rem;
    gap: .5rem;
}
.mk-calc-results-cta {
    display: flex;
    gap: .75rem;
    padding: 0 2rem 1.5rem;
    flex-wrap: wrap;
}
.mk-calc-dvb-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 2rem 1.5rem;
    padding: .9rem 1rem;
    background: rgba(250,204,21,.07);
    border: 1px solid rgba(250,204,21,.2);
    border-radius: 8px;
    font-size: .82rem;
    color: rgba(255,255,255,.8);
    line-height: 1.5;
}

/* Dark bg override so section title shows */
.mk-calc-section .mk-section-label,
.mk-calc-section .mk-section-title,
.mk-calc-section .mk-section-sub { color: #fff !important; }
.mk-calc-section .mk-section-label { opacity: .7; }

/* ── Inline Edit Mode ──────────────────────────────────────────────────────── */

/* Top-of-viewport edit banner */
.mk-edit-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 4000;
    background: #22c55e;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    padding: 5px 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transform: translateY(-100%);
    transition: transform .2s;
    pointer-events: none;
}
body.mk-edit-mode .mk-edit-banner {
    transform: translateY(0);
    pointer-events: auto;
}
.mk-edit-banner-status {
    font-weight: 400;
    opacity: .85;
    transition: opacity .3s;
}

/* Shift page content down to make room for banner */
body.mk-edit-mode .mk-navbar { top: 28px; }
body.mk-edit-mode .mk-hero   { padding-top: calc(var(--mk-nav-h,64px) + 28px); }

/* Editable element hover — shows intent without activating */
body.mk-edit-mode [data-cms-key] {
    cursor: text;
    position: relative;
    transition: outline .12s, background .12s;
    border-radius: 3px;
    outline: 2px dashed transparent;
}
body.mk-edit-mode [data-cms-key]:hover {
    outline-color: rgba(34,197,94,.55);
    background: rgba(34,197,94,.05) !important;
}

/* Active editing state */
body.mk-edit-mode [data-cms-key][contenteditable="true"] {
    outline-color: #22c55e !important;
    background: rgba(34,197,94,.08) !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
    border-radius: 4px;
}

/* Edit label tooltip that appears on focus */
.mk-edit-label {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: #22c55e;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s, transform .12s;
}
.mk-edit-label.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Image-bg edit overlay */
body.mk-edit-mode [data-cms-img-key] {
    cursor: pointer;
    position: relative;
}
body.mk-edit-mode [data-cms-img-key]::after {
    content: '\f030'; /* fa-camera */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(34,197,94,.85);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
}
body.mk-edit-mode [data-cms-img-key]:hover::after {
    opacity: 1;
}

/* Image URL input popover */
.mk-img-edit-popover {
    position: fixed;
    z-index: 5000;
    background: rgba(10,16,40,.97);
    border: 1px solid #22c55e;
    border-radius: 10px;
    padding: .85rem 1rem;
    min-width: 320px;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    display: none;
}
.mk-img-edit-popover.open { display: block; }
.mk-img-edit-popover label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #22c55e;
    display: block;
    margin-bottom: .4rem;
}
.mk-img-edit-popover input {
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    padding: .45rem .65rem;
    font-size: .8rem;
    color: #fff;
    font-family: monospace;
    margin-bottom: .6rem;
    outline: none;
}
.mk-img-edit-popover input:focus { border-color: #22c55e; }
.mk-img-edit-popover-btns { display: flex; gap: .5rem; }

/* Preview bar edit toggle button */
.mk-pbar-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    color: rgba(255,255,255,.75);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .28rem .65rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.mk-pbar-edit-btn:hover { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #fff; }
.mk-pbar-edit-btn.active { background: rgba(34,197,94,.18); border-color: #22c55e; color: #22c55e; }

/* Save flash notification */
.mk-save-flash {
    position: fixed;
    bottom: 56px;
    right: 1.5rem;
    background: #22c55e;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: .5rem 1rem;
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(34,197,94,.35);
    z-index: 3999;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
}
.mk-save-flash.show { opacity: 1; transform: translateY(0); }

/* ── Undo/Redo buttons ─────────────────────────────────────────── */
.mk-pbar-edit-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.mk-pbar-edit-btn:disabled:hover {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.75);
}

/* ── History panel ─────────────────────────────────────────────── */
.mk-pbar-panel-history {
    width: 360px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
}
.mk-hist-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.mk-hist-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.mk-hist-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,.5);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .45rem .5rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.mk-hist-tab:hover { color: rgba(255,255,255,.8); }
.mk-hist-tab.active { color: #7b9dff; border-bottom-color: #7b9dff; }
.mk-hist-pane {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.mk-hist-pane.active { display: flex; }
.mk-hist-empty {
    color: rgba(255,255,255,.35);
    padding: 1rem;
    text-align: center;
    font-size: .78rem;
}
.mk-hist-item {
    padding: .55rem .65rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.mk-hist-item:last-child { border-bottom: none; }
.mk-hist-item-key {
    font-size: .7rem;
    font-weight: 700;
    color: #7b9dff;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .18rem;
}
.mk-hist-item-vals {
    font-size: .78rem;
    color: rgba(255,255,255,.8);
    word-break: break-all;
    margin-bottom: .18rem;
    line-height: 1.4;
}
.mk-hist-old {
    color: rgba(255,255,255,.35);
    text-decoration: line-through;
    font-size: .75rem;
}
.mk-hist-new { color: #d4e4f8; }
.mk-hist-item-meta {
    font-size: .68rem;
    color: rgba(255,255,255,.35);
    margin-bottom: .25rem;
}
.mk-hist-revert-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: rgba(123,157,255,.1);
    border: 1px solid rgba(123,157,255,.25);
    border-radius: 5px;
    color: #a5b8ff;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .5rem;
    cursor: pointer;
    transition: background .15s;
}
.mk-hist-revert-btn:hover { background: rgba(123,157,255,.2); color: #fff; }
.mk-hist-input {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: #fff;
    font-size: .75rem;
    padding: .3rem .5rem;
    outline: none;
    font-family: inherit;
}

/* ── Text Color Utility Classes ───────────────────────────── */
/* Applied via data-cms color picker; stored as {field}__color in CMS */
.mk-color-accent {
    color: var(--mk-accent,#00d4ff) !important;
    -webkit-text-fill-color: var(--mk-accent,#00d4ff) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
.mk-color-gradient {
    background: linear-gradient(135deg, var(--mk-accent,#7b9dff), var(--mk-blue,#a5c8ff)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline;
}
.mk-color-blue {
    color: var(--mk-blue,#3d9eff) !important;
    -webkit-text-fill-color: var(--mk-blue,#3d9eff) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
.mk-color-white {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
.mk-color-light {
    color: var(--mk-text,#d4e4f8) !important;
    -webkit-text-fill-color: var(--mk-text,#d4e4f8) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
.mk-color-muted {
    color: var(--mk-muted,#7a9ec8) !important;
    -webkit-text-fill-color: var(--mk-muted,#7a9ec8) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
.mk-color-gold {
    color: var(--mk-gold,#f59e0b) !important;
    -webkit-text-fill-color: var(--mk-gold,#f59e0b) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* ── Color Palette Popup ──────────────────────────────────── */
.mk-color-palette {
    position: absolute;
    z-index: 10010;
    background: rgba(10,16,38,.97);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: .4rem .5rem;
    display: none;
    flex-direction: column;
    gap: .3rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.08);
    backdrop-filter: blur(12px);
    pointer-events: all;
}
.mk-color-palette.open { display: flex; }
.mk-color-palette-label {
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255,255,255,.38);
    text-transform: uppercase;
    letter-spacing: .09em;
}
.mk-color-swatches {
    display: flex;
    gap: .3rem;
    align-items: center;
}
.mk-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .12s, border-color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    font-size: .55rem;
    outline: none;
    padding: 0;
    flex-shrink: 0;
}
.mk-color-swatch:hover { transform: scale(1.22); }
.mk-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.mk-hist-input:focus { border-color: rgba(123,157,255,.5); }

/* ── Product Detail Page ─────────────────────────────────── */
.mk-product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3.5rem;
    align-items: start;
}
@media (max-width: 860px) {
    .mk-product-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ── Software Showcase — Carousel ───────────────────────── */
.mk-sw-section {
    background: var(--mk-surface-2, #eaeef5);
    padding: 3.5rem 0;
    color: var(--mk-text, #0e1a35);
}
.mk-sw-section .mk-section-header-center { margin-bottom: 2rem; }
.mk-sw-label  { color: var(--mk-accent, #1255a8); border-color: var(--mk-glass-border); background: rgba(18,85,168,.08); }
.mk-sw-title  { color: var(--mk-text, #0e1a35); }
.mk-sw-sub    { color: var(--mk-muted, #4a6890); }

/* Carousel shell */
.mk-sw-carousel { position: relative; overflow: hidden; }
.mk-sw-track {
    display: flex;
    transition: transform .42s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ── Slide — image left | info right ── */
.mk-sw-slide {
    min-width: 100%;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 0 .5rem 1rem;
    box-sizing: border-box;
}
.mk-sw-slide--mobile  { grid-template-columns: 2fr 3fr; }
.mk-sw-slide--desktop { grid-template-columns: 3fr 2fr; }

/* Image side */
.mk-sw-slide-img {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    overflow: hidden;
    background: var(--mk-surface, #fff);
    border: 1px solid var(--mk-glass-border);
}
.mk-sw-slide--mobile .mk-sw-slide-img {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 0 0 1px var(--mk-glass-border);
}
.mk-sw-slide--desktop .mk-sw-slide-img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.1), 0 0 0 1px var(--mk-glass-border);
}
.mk-sw-slide-img img {
    display: block;
    width: 100%;
    height: auto;
}
.mk-sw-slide--desktop .mk-sw-slide-img img {
    height: 100%;
    object-fit: cover;
}

/* Info side */
.mk-sw-slide-info {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.mk-sw-type-badge {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mk-muted, #4a6890);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.mk-sw-tag {
    font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mk-accent, #1a6fd4); background: rgba(26,111,212,.08); border: 1px solid rgba(26,111,212,.2);
    border-radius: 20px; padding: .2rem .6rem;
    display: inline-block;
}
.mk-sw-name {
    font-size: 1.5rem; font-weight: 800; color: var(--mk-text, #0e1a35);
    margin: 0; line-height: 1.2;
}
.mk-sw-desc {
    font-size: .85rem; color: var(--mk-muted, #4a6890);
    line-height: 1.65; margin: 0;
}
.mk-sw-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .35rem;
}
.mk-sw-features li {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .82rem; color: var(--mk-text, #0e1a35); line-height: 1.4;
    opacity: .8;
}
.mk-sw-features li i {
    color: var(--mk-accent, #1a6fd4); flex-shrink: 0; font-size: .6rem; margin-top: .22rem;
}
.mk-sw-actions {
    display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .15rem;
}

/* App store badges */
.mk-appstore-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--mk-surface, #fff); border: 1px solid var(--mk-glass-border);
    border-radius: 7px; padding: .35rem .75rem;
    font-size: .72rem; font-weight: 600; color: var(--mk-text, #0e1a35);
    text-decoration: none; transition: all .15s; white-space: nowrap;
}
.mk-appstore-badge:hover { background: var(--mk-accent, #1a6fd4); color: #fff; border-color: transparent; }
.mk-sw-learn {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; font-weight: 600; color: var(--mk-accent, #1a6fd4);
    text-decoration: none; transition: color .15s;
}
.mk-sw-learn:hover { opacity: .75; }
.mk-sw-learn i { font-size: .65rem; }

/* Navigation row */
.mk-sw-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
}
.mk-sw-btn {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--mk-glass-border);
    background: var(--mk-surface, #fff);
    color: var(--mk-text, #0e1a35);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s; font-size: .8rem; flex-shrink: 0;
}
.mk-sw-btn:hover { background: var(--mk-accent, #1a6fd4); border-color: transparent; color: #fff; }
.mk-sw-dots { display: flex; gap: .5rem; align-items: center; }
.mk-sw-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mk-glass-border);
    border: none; padding: 0.35rem; cursor: pointer; transition: all .2s;
    min-width: 24px;
    min-height: 24px;
}
.mk-sw-dot.active { background: var(--mk-accent, #1a6fd4); transform: scale(1.4); }

/* Placeholder */
.mk-sw-placeholder {
    width: 100%; height: 200px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mk-surface-2, #eaeef5);
    font-size: 2.5rem; color: var(--mk-muted, #4a6890); opacity: .4;
}

/* Responsive */
@media (max-width: 720px) {
    .mk-sw-slide--mobile {
        grid-template-columns: 130px 1fr;
        gap: 1.25rem;
    }
    .mk-sw-slide--desktop {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .mk-sw-name { font-size: 1.15rem; }
    .mk-sw-desc { font-size: .8rem; }
}
@media (max-width: 480px) {
    .mk-sw-section { padding: 2.5rem 0; }
    .mk-sw-slide--mobile {
        grid-template-columns: 100px 1fr;
        gap: 1rem;
    }
    .mk-sw-name { font-size: 1rem; }
}

/* ── Phone Frame ─────────────────────────────────────────────── */
.mk-phone-frame {
    position: relative;
    width: 220px;
    min-height: 440px;
    background: #1a1a2e;
    border-radius: 36px;
    border: 3px solid #2d2d4e;
    box-shadow: 0 8px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
    overflow: hidden;
    flex-shrink: 0;
    display: none; /* hidden by default; JS shows active */
}
.mk-phone-frame.active { display: block; }
.mk-phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 18px;
    background: #1a1a2e;
    border-radius: 10px;
    z-index: 10;
}
.mk-phone-screen {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    overflow: hidden;
    background: #0e1a35;
}
.mk-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mk-phone-home-bar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,.3);
    border-radius: 3px;
    z-index: 10;
}

/* Small phone frame (strip) */
.mk-phone-frame-sm {
    width: 160px;
    min-height: 320px;
    border-radius: 28px;
    display: block !important; /* always visible in strip */
}

/* Phone carousel controls */
.mk-phone-carousel {
    position: relative;
    display: flex;
    justify-content: center;
}
.mk-phone-dots {
    display: flex;
    gap: .5rem;
    justify-content: center;
}
.mk-phone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(99,102,241,.3);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}
.mk-phone-dot.active {
    background: #2f5dff;
    transform: scale(1.3);
}

/* Phone screenshot strip */
.mk-phone-strip {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* ── Browser / Desktop Frame ─────────────────────────────────── */
.mk-browser-frame {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mk-glass-border);
    box-shadow: 0 8px 40px rgba(30,48,101,.12);
    background: var(--mk-surface-2);
}
.mk-browser-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    background: var(--mk-primary-dk);
    border-bottom: 1px solid var(--mk-glass-border);
}
.mk-browser-dots {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}
.mk-browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: block;
}
.mk-browser-dots span:first-child { background: #fc6058; }
.mk-browser-dots span:nth-child(2) { background: #fec02f; }
.mk-browser-dots span:last-child   { background: #2aca3e; }
.mk-browser-url {
    flex: 1;
    background: rgba(255,255,255,.08);
    border-radius: 6px;
    padding: .25rem .75rem;
    font-size: .75rem;
    color: var(--mk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-browser-screen {
    background: var(--mk-surface);
    min-height: 200px;
}
.mk-browser-screen img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 520px;
}
.mk-browser-frame-sm .mk-browser-screen img {
    max-height: 200px;
}

/* Desktop screenshot gallery */
.mk-desktop-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 2rem;
}
@media (max-width: 640px) {
    .mk-desktop-gallery { grid-template-columns: 1fr; }
    .mk-phone-frame { width: 180px; min-height: 360px; }
    .mk-phone-frame-sm { width: 130px; min-height: 260px; }
}

/* ── Block toolbar (Concrete5-style) ─────────────────────────────────────── */
.mk-block-tool-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding: .3rem .45rem;
    border-radius: 5px;
    font-size: .75rem;
    transition: background .12s, color .12s;
    line-height: 1;
}
.mk-block-tool-btn:hover { background: rgba(123,157,255,.2); color: #a5c8ff; }

/* ── Section hover highlight in edit mode ───────────────────────────────── */
body.mk-edit-mode [data-section]:hover {
    outline: 2px dashed rgba(123,157,255,.45);
    outline-offset: -2px;
    cursor: pointer;
}
body.mk-edit-mode [data-section].mk-block-active {
    outline: 2px solid rgba(123,157,255,.8);
    outline-offset: -2px;
}

/* ── HTML mode cursor ───────────────────────────────────────────────────── */
body.mk-html-pick-mode [data-section],
body.mk-html-pick-mode section.mk-section,
body.mk-html-pick-mode section.mk-sport-hero,
body.mk-html-pick-mode section.mk-stats,
body.mk-html-pick-mode section.mk-cta,
body.mk-html-pick-mode section.mk-video-section {
    cursor: crosshair !important;
    outline: 2px dashed rgba(0,212,255,.4);
    outline-offset: -2px;
}
body.mk-html-pick-mode [data-section]:hover,
body.mk-html-pick-mode section.mk-section:hover,
body.mk-html-pick-mode section.mk-sport-hero:hover,
body.mk-html-pick-mode section.mk-stats:hover,
body.mk-html-pick-mode section.mk-cta:hover,
body.mk-html-pick-mode section.mk-video-section:hover {
    outline-color: rgba(0,212,255,.9);
}

/* ── Editable <img> tag highlight ───────────────────────────────────────── */
body.mk-edit-mode [data-cms-src-key]:hover {
    outline: 2px dashed rgba(245,158,11,.7);
    outline-offset: 2px;
    cursor: pointer;
}

/* ============================================================
   Category 2 — Video Board Layout Overrides
   Applied via body.mk-layout-cat-2 when page_layout = "2"
   ============================================================ */

/* Hero: taller with centered text, gradient overlay emphasis */
body.mk-layout-cat-2 .mk-sport-hero {
    min-height: 55vh;
}
body.mk-layout-cat-2 .mk-sport-hero-overlay {
    background: linear-gradient(180deg, rgba(12,22,48,.3) 0%, rgba(12,22,48,.85) 100%);
}
body.mk-layout-cat-2 .mk-sport-hero-content {
    text-align: center;
}
body.mk-layout-cat-2 .mk-sport-hero-content h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
}
body.mk-layout-cat-2 .mk-hero-actions {
    justify-content: center;
}

/* Stats bar: accent border and wider spacing */
body.mk-layout-cat-2 .mk-stats {
    border-top: 2px solid rgba(0,212,255,.3);
    border-bottom: 2px solid rgba(0,212,255,.3);
}
body.mk-layout-cat-2 .mk-stats-inner {
    gap: 4rem;
}
body.mk-layout-cat-2 .mk-stat-num {
    color: var(--mk-accent, #00d4ff);
}

/* Features section: single-column centered layout for video board focus */
body.mk-layout-cat-2 .mk-section.mk-bg-white .mk-resp-2col {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    text-align: center;
}
body.mk-layout-cat-2 .mk-section.mk-bg-white .mk-feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    text-align: left;
}
body.mk-layout-cat-2 .mk-section.mk-bg-white .mk-feature-item {
    background: rgba(17,31,61,.5);
    border: 1px solid rgba(0,212,255,.15);
    border-radius: 12px;
    padding: 1.25rem;
}

/* Products: wider cards for LED spec display */
body.mk-layout-cat-2 .mk-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
body.mk-layout-cat-2 .mk-product-card {
    border: 1px solid rgba(0,212,255,.15);
}
body.mk-layout-cat-2 .mk-product-card.featured {
    border-color: rgba(0,212,255,.4);
    box-shadow: 0 0 30px rgba(0,212,255,.1);
}

/* Why section: reverse column on video boards for emphasis */
body.mk-layout-cat-2 .mk-resp-2col-rev {
    direction: ltr;
}

/* CTA: accent glow for video board pages */
body.mk-layout-cat-2 .mk-cta {
    border-top: 2px solid rgba(0,212,255,.25);
}
body.mk-layout-cat-2 .mk-cta h2 {
    color: var(--mk-accent, #00d4ff);
}

@media (max-width: 900px) {
    body.mk-layout-cat-2 .mk-stats-inner { gap: 2rem; }
    body.mk-layout-cat-2 .mk-section.mk-bg-white .mk-feature-list { grid-template-columns: 1fr; }
}

/* ============================================================
   CAT1 SPORT PAGE — CONTENT CLASS SYSTEM
   Replaces hardcoded inline color values in SportCat1.cshtml
   with CSS-variable-aware classes that adapt to all themes.
   ============================================================ */

/* Body copy text (replaces color:#4b5563 inline) */
.cat1-body-text {
    font-size: .9rem;
    color: var(--mk-muted);
    line-height: 1.7;
}

/* Feature card heading (replaces color:#1e3065 inline) */
.cat1-card-title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--mk-text);
    margin: 0 0 .5rem;
}

/* Feature card body copy (replaces color:#4b5563 inline) */
.cat1-card-body {
    font-size: .85rem;
    color: var(--mk-muted);
    margin: 0;
    line-height: 1.6;
}

/* Feature card container (replaces inline background + border) */
.cat1-feature-card {
    background: var(--mk-surface-2);
    border-radius: 14px;
    padding: 2rem;
    border: 1px solid var(--mk-glass-border);
    transition: box-shadow .25s, border-color .25s;
}
.cat1-feature-card:hover {
    border-color: var(--mk-accent);
    box-shadow: 0 0 18px rgba(0,212,255,.12);
}

/* ── Section separator: subtle border between adjacent alternating bg sections */
.mk-bg-white + .mk-bg-light,
.mk-bg-light  + .mk-bg-white {
    border-top: 1px solid rgba(0,212,255,.08);
}

/* ============================================================
   CAT-1 STORY PAGES — Section background contrast fix
   Default mk-bg-white (#162444) and mk-bg-light (#111f3d) are
   nearly identical dark navies — no visual rhythm between sections.
   Override so cat-1 alternates between surface-2 and the page
   base (#0e1a35), creating a clear 2-level depth system.
   Feature cards are given a contrasting background so they
   stand out from whichever section contains them.
   ============================================================ */

/* "White" sections → elevated surface (slightly lighter navy) */
body.mk-layout-cat-1 .mk-bg-white {
    background: var(--mk-surface-2);  /* #162444 */
}

/* "Light" sections → page base (darkest level = real contrast with surface-2) */
body.mk-layout-cat-1 .mk-bg-light {
    background: var(--mk-bg);  /* #0e1a35 — was --mk-surface (#111f3d, barely different) */
}

/* Stronger separator between alternating sections on story pages */
body.mk-layout-cat-1 .mk-bg-white + .cat1-section > .mk-bg-light,
body.mk-layout-cat-1 .mk-bg-light  + .cat1-section > .mk-bg-white {
    border-top: 1px solid rgba(0,212,255,.12);
}

/* Feature cards in "white" (elevated) sections: go darker so cards read as inset (dark mode) */
body.mk-layout-cat-1 .mk-bg-white .cat1-feature-card {
    background: rgba(14,26,53,.75);       /* close to --mk-bg, sits below surface-2 */
    border-color: rgba(0,212,255,.18);
}

/* Feature cards in "light" (base) sections: go lighter so cards appear elevated (dark mode) */
body.mk-layout-cat-1 .mk-bg-light .cat1-feature-card {
    background: var(--mk-surface-2);      /* #162444 — elevated above --mk-bg base */
    border-color: rgba(0,212,255,.2);
}

/* Ensure feature card hover glow works on both variants */
body.mk-layout-cat-1 .cat1-feature-card:hover {
    border-color: var(--mk-accent);
    box-shadow: 0 0 22px rgba(0,212,255,.14);
}

/* Light mode overrides — flip card colours so they're bright on light section backgrounds */
body[data-mk-mode="light"].mk-layout-cat-1 .mk-bg-white .cat1-feature-card {
    background: var(--mk-surface) !important;   /* white in light mode */
    border-color: var(--mk-glass-border) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
body[data-mk-mode="light"].mk-layout-cat-1 .mk-bg-light .cat1-feature-card {
    background: var(--mk-surface-2) !important; /* eaeef5 — slightly tinted on white base */
    border-color: var(--mk-glass-border) !important;
}
body[data-mk-mode="light"].mk-layout-cat-1 .cat1-feature-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.1), 0 0 0 1px var(--mk-accent) !important;
    border-color: var(--mk-accent) !important;
}

/* Light mode: section bg overrides — mk-bg-light should be page base (white), mk-bg-white slightly tinted */
body[data-mk-mode="light"].mk-layout-cat-1 .mk-bg-white {
    background: var(--mk-surface-2);  /* #eaeef5 light blue-gray */
}
body[data-mk-mode="light"].mk-layout-cat-1 .mk-bg-light {
    background: var(--mk-surface);    /* #ffffff pure white */
}

/* ── Mid-screen gap fix (900px–1100px breakpoint dead zone) ── */
@media (max-width: 1100px) and (min-width: 900px) {
    .mk-resp-2col,
    .mk-resp-2col-rev {
        gap: 2.5rem !important;
    }
}

/* ── Edit mode: always-visible admin bar for cat1 sections ── */
/* In normal hover mode the bar fades in on hover (defined inline in SportCat1).
   In edit mode we force it always visible and outline the section. */
body.mk-edit-mode .cat1-section--admin .cat1-admin-bar {
    opacity: 1;
}
body.mk-edit-mode .cat1-section--admin {
    outline: 2px dashed rgba(47,93,255,.4);
    outline-offset: -2px;
}

/* ── Edit mode pill (floating bottom-left, visible to authenticated users) ── */
.mk-edit-mode-pill {
    position: fixed;
    bottom: 56px; /* sits above preview bar */
    left: 1rem;
    z-index: 999;
    background: rgba(14,26,53,.9);
    color: var(--mk-text, #d4e4f8);
    border: 1px solid var(--mk-glass-border, rgba(0,212,255,.2));
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .3rem .85rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s, box-shadow .15s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Chakra Petch', sans-serif;
}
.mk-edit-mode-pill:hover {
    opacity: 1;
    box-shadow: 0 0 12px rgba(0,212,255,.2);
}
body.mk-edit-mode .mk-edit-mode-pill {
    opacity: 1;
    background: rgba(34,197,94,.18);
    border-color: #22c55e;
    color: #22c55e;
}

/* ── Cat1 floating admin toolbar (bottom-right, admin only) ── */
.cat1-floating-toolbar {
    position: fixed;
    bottom: 60px;
    right: 1.25rem;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: flex-end;
}
.cat1-floating-toolbar a,
.cat1-floating-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(14,26,53,.92);
    color: var(--mk-accent, #00d4ff);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .35rem .8rem;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
    font-family: 'Chakra Petch', sans-serif;
    cursor: pointer;
}
.cat1-floating-toolbar a:hover,
.cat1-floating-toolbar button:hover {
    background: rgba(0,212,255,.12);
    border-color: var(--mk-accent, #00d4ff);
    color: #fff;
    box-shadow: 0 0 12px rgba(0,212,255,.18);
}

/* ── Product edit pill (bottom-right, suadmin only, Product.cshtml) ── */
.mk-product-edit-pill {
    position: fixed;
    bottom: 60px;
    right: 1.25rem;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(14,26,53,.92);
    color: var(--mk-accent, #00d4ff);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .35rem .8rem;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
    font-family: 'Chakra Petch', sans-serif;
}

/* ── Dark theme surface card utilities ─────────────────── */
.mk-card-surface { background: var(--mk-surface-2); border-radius: 14px; padding: 2rem; border: 1px solid var(--mk-glass-border); }
.mk-card-surface-sm { background: var(--mk-surface-2); border-radius: 12px; padding: 1.25rem; border: 1px solid var(--mk-glass-border); }
.mk-img-frame { border-radius: 12px; overflow: hidden; background: var(--mk-surface); aspect-ratio: 4/3; }
.mk-body-sm  { font-size: .85rem; color: var(--mk-muted); line-height: 1.6; margin: 0; }
.mk-body-xs  { font-size: .8rem;  color: var(--mk-muted); margin: 0 0 .75rem; line-height: 1.6; }
.mk-card-heading { font-size: 1rem; font-weight: 800; color: var(--mk-text); margin: 0 0 .5rem; }
/* Bump hero bg image from nearly invisible to subtly visible */
.mk-hero-bg { opacity: .22; }

/* ── FontAwesome font-display: swap ─────────────────────── */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-display: swap;
}