/* =========================================================
   1. ROOT & THEME TOKENS
   ========================================================= */
:root {
    --mf-blue: #1C8DFF;
    --mf-orange: #FF5B00;
    --mf-deep: #132D47;
    --mf-black: #0C0C0E;
    --mf-white: #FFFFFF;
    --mf-orange: #ff5b00;
    --mf-violet: #A03CFF;
    --mf-neon-orange-soft: rgba(255, 91, 0, 0.35);
    --mf-neon-orange-glow: rgba(255, 91, 0, 0.55);
    --mf-header-h: 76px; /* altura normal del header */
    --mf-header-h-compact: 72px; /* altura cuando compacta */
}

/* =========================================================
   2. GLOBAL / BODY
   ========================================================= */
body {
    background: radial-gradient(circle at top, #0f1827 0, #05060a 45%, #020308 100%);
    color: var(--mf-white);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

.mf-main-wrapper {
    padding-top: 0rem;
    padding-bottom: 2rem;
}

/* Estado normal: logo vertical grande */
.mf-logo-vertical {
    display: block;
    height: 100px;
    width: auto;
    margin-top: -20px;
    margin-bottom: -6px;
}

.mf-logo-horizontal {
    display: none;
    height: 40px;
    width: auto;
}

/* Logo default state */
.mf-logo-vertical {
    display: block;
}

.mf-logo-horizontal {
    display: none;
}

/* When header is compact (scroll down) */
.mf-nav-hybrid.mf-compact .mf-logo-vertical {
    display: none;
}

.mf-nav-hybrid.mf-compact .mf-logo-horizontal {
    display: block;
}

/* =========================================================
   3. HEADER & NAVIGATION – MAXIFORGE HYBRID HEADER
   ========================================================= */
.mf-nav-hybrid {
    position: sticky;
    top: 0;
    z-index: 999;
    background: radial-gradient(circle at top, #1c8dff15, #00040a 70%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    padding: 0.6rem 0;
    min-height: 80px;
    transition: all 0.25s ease;
}

    /* Bottom neon line */
    .mf-nav-hybrid::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg, rgba(255,255,255,0), var(--mf-blue), var(--mf-orange), rgba(255,255,255,0));
        box-shadow: 0 0 12px rgba(28,141,255,0.55);
    }

/* Inner layout */
.mf-nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 64px; /* evita jumps del logo */
}

/* Logo */
.mf-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mf-blue);
    transition: filter 0.3s ease, transform 0.3s ease;
}

    .mf-nav-logo img {
        height: 100px;
        width: auto;
        display: block;
      /*  margin-top: -20px;*/
        margin-bottom: -6px;
        transition: height .25s ease;
    }

    .mf-nav-logo:hover {
        filter: drop-shadow(0 0 10px rgba(28,141,255,0.7));
        transform: translateY(-1px);
    }

    /* Logo default state */
    .mf-nav-logo .mf-logo-vertical {
        display: block !important;
        margin-top: -5px;
    }

    .mf-nav-logo .mf-logo-horizontal {
        display: none !important;
    }

/* Compact state on scroll */
.mf-nav-hybrid.mf-compact .mf-logo-vertical {
    display: none !important;
}

.mf-nav-hybrid.mf-compact .mf-logo-horizontal {
    display: block !important;
}


/* Desktop nav links */
.mf-nav-links {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

    .mf-nav-links a {
        position: relative;
        color: #e8eeff;
        font-size: 0.82rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        padding-bottom: 0.2rem;
        transition: color 0.2s ease;
    }

        /* Hover underline – single color */
        .mf-nav-links a::after {
            content: "";
            position: absolute;
            left: 20%;
            right: 20%;
            bottom: -0.32rem;
            height: 2px;
            background: var(--mf-blue);
            opacity: 0;
            transform: scaleX(0.3);
            border-radius: 2px;
            box-shadow: 0 0 8px rgba(28,141,255,0.7);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .mf-nav-links a:hover {
            color: var(--mf-white);
        }

            .mf-nav-links a:hover::after {
                opacity: 1;
                transform: scaleX(1);
            }

/* Compact mode */
.mf-nav-hybrid.mf-compact {
    padding: 0.45rem 0;
    backdrop-filter: blur(8px);
}

    .mf-nav-hybrid.mf-compact .mf-nav-logo img {
        height: 65px; /* tamaño compacto estable */
    }

/* Dark absolute mode */
body.dark-abs .mf-nav-hybrid {
    background: rgba(0, 0, 0, 0.92);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.9);
}

body.dark-abs .mf-nav-links a {
    color: #d4ddff;
}

body.dark-abs .mf-nav-logo {
    color: #6bbaff;
}

/* Mobile toggle */
.mf-nav-toggle {
    display: none;
    cursor: pointer;
    color: var(--mf-white);
    font-size: 1.4rem;
}

/* Mobile panel */
.mf-mobile-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 72%;
    height: 100vh;
    background: rgba(10,14,28,0.85);
    backdrop-filter: blur(12px);
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transition: right 0.35s ease;
    z-index: 9999;
}

    .mf-mobile-panel.open {
        right: 0;
    }

    .mf-mobile-panel a {
        font-size: 1rem;
        letter-spacing: 0.18em;
        color: #e8eeff;
        text-decoration: none;
    }

/* Breakpoints */
@media (max-width: 920px) {
    .mf-nav-links {
        display: none;
    }

    .mf-nav-toggle {
        display: block;
    }
}
/* =========================================================
   HERO — Painel glass ultra-amplo + neon inferior
   ========================================================= */

.mf-hero {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    background: radial-gradient( circle at 30% 20%, #0a1122 0%, #020617 55%, #01040d 100% );
}

    .mf-hero .container {
        max-width: 1500px;
    }

/* Grid: painel muito maior que o card */
.mf-hero-inner {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    gap: 4rem;
    align-items: stretch; /* iguala alturas */
}

/* PAINEL GLASS DO TEXTO */
.mf-hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 3.4rem 3.4rem 3rem;
    border-radius: 34px;
    background: linear-gradient( 130deg, rgba(15, 23, 42, 0.88), rgba(3, 7, 18, 0.94) );
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 50px 140px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(22px);
}

    /* Blur lateral (esquerda) para fusão com o fundo */
    .mf-hero-copy::before {
        content: "";
        position: absolute;
        top: -50px;
        bottom: -50px;
        left: -80px;
        width: 140px;
        pointer-events: none;
        filter: blur(50px);
        opacity: 0.28;
        background: linear-gradient( 90deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.05) );
    }

    /* NEON INFERIOR, ESTILO CARD DA DIREITA */
    .mf-hero-copy::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: -3px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient( 90deg, rgba(0, 0, 0, 0), #1c8dff, #38bdf8, #1c8dff, rgba(0, 0, 0, 0) );
        box-shadow: 0 0 16px rgba(56, 189, 248, 0.9), 0 0 28px rgba(15, 23, 42, 0.9);
        pointer-events: none;
    }

/* TIPOGRAFIA */
.mf-kicker {
    font-size: 0.88rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #93a4c1;
    margin-bottom: 1.3rem;
}

.mf-hero-title {
    font-size: clamp(2.8rem, 4vw, 4.4rem);
    line-height: 1.07;
    font-weight: 700;
    margin-bottom: 1.4rem;
    color: #f5f7ff;
}

/* destaque azul dentro do título */
.mf-highlight-blue {
    color: var(--mf-blue);
}

.mf-highlight-violet {
    color: var(--mf-violet);
}
.mf-highlight-orange {
    color: var(--mf-orange);
}

.mf-hero-text {
    font-size: 1.12rem;
    color: #dce0e6;
    margin-bottom: 1.9rem;
    max-width: 44rem;
}

.mf-hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.mf-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-size: 0.95rem;
}

/* CARD DERECHO */
.mf-hero-visual {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

    .mf-hero-visual .mf-3dcard {
        max-width: 500px;
        height: 100%;
        display: flex;
    }

/* RESPONSIVO */
@media (max-width: 1100px) {
    .mf-hero {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

    .mf-hero-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .mf-hero-copy {
        border-radius: 28px;
    }

        .mf-hero-copy::after {
            left: 14%;
            right: 14%;
        }
}
/* Hero + pills */
.mf-hero-meta.mf-pill-set {
    margin-top: 0.6rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}


/* =========================================================
   5. FOOTER
   ========================================================= */
.mf-footer {
    background: radial-gradient(circle at top, #132d47 0, #020308 55%, #000000 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.7);
}

    .mf-footer .container {
        color: #9aa3c7;
    }

    .mf-footer span:last-child {
        color: var(--mf-blue);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.7rem;
    }

/* =========================================================
   6. NEON DIVIDERS
   ========================================================= */
.neon-line,
footer.mf-footer,
.mf-hero-panel,
.border-bottom,
.border-top {
    position: relative;
}

    .neon-line::after,
    footer.mf-footer::after,
    .mf-hero-panel::after,
    .border-bottom::after,
    .border-top::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        bottom: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0), var(--mf-blue), rgba(255,255,255,0));
        box-shadow: 0 0 12px var(--mf-blue);
        pointer-events: none;
    }

/* =========================================================
   7. BUTTON SYSTEM (BASE + VARIANTS)
   ========================================================= */
.mf-btn,
.mf-btn:hover,
.mf-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.4rem;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mf-white);
    transition: all 0.18s ease;
}

    .mf-btn:active {
        transform: translateY(1px);
    }

/* === Primary Cel-Shading === */
.mf-btn-primary {
    background: var(--mf-blue);
    border: 2px solid var(--mf-black);
    color: var(--mf-white);
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.55), inset 5px 5px 0 rgba(255, 255, 255, 0.32), 0 0 18px rgba(28, 141, 255, 0.75);
}

    .mf-btn-primary:hover {
        background: #4db4ff;
        border: 2px solid var(--mf-black);
        box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.55), inset 5px 5px 0 rgba(255, 255, 255, 0.32), 0 0 18px rgba(28, 141, 255, 0.75);

    }

/* === Secondary Orange Cel-Shading === */
.mf-btn-secondary-warm {
    background: rgba(255, 120, 40, 0.32);
    color: #ffe8d6;
    border: 2px solid var(--mf-black);
    border-radius: 0.4rem;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.45), inset 3px 3px 0 rgba(255, 255, 255, 0.20), 0 0 14px rgba(255, 120, 40, 0.45);
}

    .mf-btn-secondary-warm:hover {
        background: rgba(255, 145, 60, 0.45);
        color: var(--mf-white);
        box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.55), inset 4px 4px 0 rgba(255, 255, 255, 0.25), 0 0 18px rgba(255, 120, 40, 0.75);
    }

/* === Glass Holographic === */
.mf-btn-glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #dfe7ff;
    border-radius: 0.45rem;
    text-shadow: 0 0 4px rgba(28,141,255,0.4);
    box-shadow: 0 0 10px rgba(28, 141, 255, 0.25), inset 0 0 12px rgba(255, 255, 255, 0.05);
}

    .mf-btn-glass:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0 0 18px rgba(28, 141, 255, 0.45), inset 0 0 16px rgba(255, 255, 255, 0.10);
    }

/* === Tech NFC === */
.mf-btn-tech {
    background: rgba(10, 14, 28, 0.8);
    color: #d7e3ff;
    border: 1px solid rgba(28, 141, 255, 0.8);
    border-radius: 0.45rem;
    box-shadow: 0 0 12px rgba(28, 141, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

    .mf-btn-tech:hover {
        background: rgba(18, 26, 48, 0.9);
        border-color: rgba(28, 141, 255, 1);
        box-shadow: 0 0 22px rgba(28, 141, 255, 0.65);
    }

/* === Accent Purple === */
.mf-btn-accent {
    background: rgba(40, 0, 70, 0.3);
    color: #e8d7ff;
    border: 1px solid rgba(160, 60, 255, 0.9);
    border-radius: 0.45rem;
    text-shadow: 0 0 6px rgba(160, 60, 255, 0.7);
    box-shadow: 0 0 12px rgba(160, 60, 255, 0.6);
}

    .mf-btn-accent:hover {
        background: rgba(80, 0, 150, 0.45);
        color: var(--mf-white);
        box-shadow: 0 0 18px rgba(160, 60, 255, 0.9);
    }

/* === Special Hybrid (Cel + Holo) === */
.mf-btn-special {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.45rem;
    color: #e8f2ff;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.35), inset 4px 4px 0 rgba(255, 255, 255, 0.20), 0 0 16px rgba(28, 141, 255, 0.35);
}

    .mf-btn-special:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.32);
        box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.45), inset 5px 5px 0 rgba(255, 255, 255, 0.26), 0 0 22px rgba(28, 141, 255, 0.55);
    }
/* =========================================================
   NEON GLASS BUTTONS – site default (no cel-shading)
   Usage:
     mf-btn mf-btn-ng mf-btn-ng--blue
     mf-btn mf-btn-ng mf-btn-ng--orange
     mf-btn mf-btn-ng mf-btn-ng--violet
     mf-btn mf-btn-ng mf-btn-ng--ghost
     mf-btn mf-btn-ng mf-btn-ng--soft
   ========================================================= */

.mf-btn-ng {
    --ng-accent: 28,141,255; /* default: Forge Blue */
    --ng-text: 248,250,252;
    --ng-bg-a: 12,18,34;
    --ng-bg-b: 15,23,42;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .78rem 1.25rem;
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(var(--ng-accent), 0.30);
    color: rgba(var(--ng-text), 0.92);
    background: radial-gradient(circle at 25% 15%, rgba(var(--ng-accent), 0.18), rgba(var(--ng-bg-a), 0.65) 45%, rgba(var(--ng-bg-b), 0.85) 100% );
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 14px 45px rgba(0,0,0,0.45), 0 0 24px rgba(var(--ng-accent), 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: .84rem;
    line-height: 1;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

    /* inner sheen */
    .mf-btn-ng::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.00) 60% );
        opacity: 0.55;
        pointer-events: none;
    }

    /* neon underline (subtle, centered) */
    .mf-btn-ng::after {
        content: "";
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: -10px;
        height: 20px;
        background: radial-gradient(circle at 50% 50%, rgba(var(--ng-accent), 0.55), rgba(var(--ng-accent), 0) );
        filter: blur(10px);
        opacity: 0.65;
        pointer-events: none;
    }

    .mf-btn-ng:hover {
        transform: translateY(-1px);
        border-color: rgba(var(--ng-accent), 0.52);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 0 0 6px rgba(255,255,255,0.04), 0 18px 70px rgba(0,0,0,0.55), 0 0 34px rgba(var(--ng-accent), 0.28);
        filter: saturate(1.06) contrast(1.06);
    }

    .mf-btn-ng:active {
        transform: translateY(0px);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 10px 35px rgba(0,0,0,0.42), 0 0 20px rgba(var(--ng-accent), 0.14);
    }

    .mf-btn-ng:focus-visible {
        outline: none;
        border-color: rgba(var(--ng-accent), 0.62);
        box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 0 0 4px rgba(255,255,255,0.06), 0 0 0 9px rgba(var(--ng-accent), 0.22), 0 0 40px rgba(var(--ng-accent), 0.22);
    }

/* ===== Color variants ===== */

.mf-btn-ng--blue {
    --ng-accent: 28,141,255;
}
/* Forge Blue */
.mf-btn-ng--orange {
    --ng-accent: 255,91,0;
}
/* Neon Orange */
.mf-btn-ng--violet {
    --ng-accent: 167,110,255;
}
/* Violet accent */

/* ===== Ghost (lighter, less glow) ===== */

.mf-btn-ng--ghost {
    border-color: rgba(148,163,184,0.35);
    background: radial-gradient(circle at 25% 15%, rgba(148,163,184,0.10), rgba(12,18,34,0.55) 45%, rgba(15,23,42,0.82) 100% );
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 14px 45px rgba(0,0,0,0.42);
}

    .mf-btn-ng--ghost::after {
        background: radial-gradient(circle at 50% 50%, rgba(148,163,184,0.40), rgba(148,163,184,0) );
        opacity: 0.55;
    }

/* ===== Soft (pill less aggressive, good for secondary CTAs) ===== */

.mf-btn-ng--soft {
    border-color: rgba(var(--ng-accent), 0.22);
    background: linear-gradient(180deg, rgba(12,18,34,0.58), rgba(15,23,42,0.82) );
    box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 12px 40px rgba(0,0,0,0.40);
}

    .mf-btn-ng--soft::after {
        left: 26%;
        right: 26%;
        opacity: 0.45;
    }

/* =========================================================
   FOOTER · micro trust points
   ========================================================= */

.mf-footer-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .8rem;
    justify-content: center;
    color: rgba(229,231,235,0.68);
    font-size: .82rem;
}

    .mf-footer-points li {
        padding: .35rem .7rem;
        border-radius: 999px;
        background: rgba(15,23,42,0.70);
        border: 1px solid rgba(55,65,81,0.75);
    }
/* =========================================================
   Section glow variants (home pattern compatible)
   ========================================================= */

#mf-niche .mf-glow-blue {
    --mfGlowA: rgba(28,141,255,0.22);
    --mfGlowB: rgba(28,141,255,0.10);
    --mfGlowC: rgba(255,91,0,0.04);
}

#mf-niche .mf-glow-orange {
    --mfGlowA: rgba(255,91,0,0.18);
    --mfGlowB: rgba(255,91,0,0.08);
    --mfGlowC: rgba(28,141,255,0.06);
}

#mf-niche .mf-glow-mix {
    --mfGlowA: rgba(28,141,255,0.18);
    --mfGlowB: rgba(255,91,0,0.14);
    --mfGlowC: rgba(148,163,184,0.06);
}

#mf-niche .mf-glow-purple {
    --mfGlowA: rgba(155, 89, 182, 0.16);
    --mfGlowB: rgba(28,141,255,0.10);
    --mfGlowC: rgba(255,91,0,0.06);
}

/* Apply to the existing pattern wrapper (whatever you're using on home) */
#mf-niche .mf-section-pattern,
#mf-niche .mf-section-pattern-inner,
#mf-niche .mf-niche-panel {
    position: relative;
}

    /* Overlay glow layer */
    #mf-niche .mf-section-pattern::before,
    #mf-niche .mf-section-pattern-inner::before,
    #mf-niche .mf-niche-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(900px 420px at 18% 25%, var(--mfGlowA, rgba(28,141,255,0.16)), rgba(0,0,0,0) 60%), radial-gradient(900px 420px at 82% 70%, var(--mfGlowB, rgba(255,91,0,0.10)), rgba(0,0,0,0) 62%), radial-gradient(700px 380px at 55% 15%, var(--mfGlowC, rgba(148,163,184,0.06)), rgba(0,0,0,0) 58%);
        opacity: 1;
    }