:root {
            --brand-color: #6195da;
            --bg-dark: #0a0c10;
            --glass: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
            --text-main: #f8f9fa;
            --text-dim: #94a3b8;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        .glow-line {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 4px;
            background: linear-gradient(90deg, #0095ff, #005eff, #a6c6ff, #6790d6, #0095ff);
            background-size: 200% 100%;
            animation: gradientMove 5s linear infinite;
            z-index: 9999;
            box-shadow: 0 0 15px 2px rgba(0,149,255,0.8), 0 0 30px 5px rgba(97,149,218,0.4);
            filter: blur(0.5px);
        }

        @keyframes gradientMove {
            0%   { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }

        .container {
            max-width: 1000px;
            width: 90%;
            text-align: center;
            z-index: 1;
            flex: 1;
            padding: 60px 0;
        }

        .logo-container { margin-bottom: 30px; }

        .logo-img {
            width: min(500px, 90%);
            height: auto;
           
        }

        header p {
            font-size: 1.2rem;
            color: var(--text-dim);
            max-width: 550px;
            margin: 0 auto 32px;
        }

        
        .section-divider {
            width: 100%;
            max-width: 600px;
            margin: 0 auto 40px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .section-divider::before,
        .section-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
        }

        .divider-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--brand-color);
            opacity: 0.6;
            flex-shrink: 0;
        }

        
        .nav-pills {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 60px;
        }

        .pill-link {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 11px 22px;
            border-radius: 12px;
            border: 1px solid var(--glass-border);
            background: var(--glass);
            color: #fff;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            transition: all 0.25s ease;
            backdrop-filter: blur(8px);
        }

        .pill-link .material-symbols-outlined {
            font-size: 18px;
            color: #fff;
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            line-height: 1;
        }

        .pill-link .pill-fa {
            font-size: 17px;
            color: #fff;
            line-height: 1;
        }

        .pill-link .npm-icon {
            width: 20px;
            height: 20px;
            display: block;
        }

        .pill-link:hover {
            border-color: var(--brand-color);
            background: rgba(97,149,218,0.12);
            transform: translateY(-2px);
        }

        .pill-link.pill-primary {
            border-color: rgba(97,149,218,0.5);
            background: rgba(97,149,218,0.1);
        }

        .pill-link.pill-primary:hover {
            background: rgba(97,149,218,0.2);
            border-color: var(--brand-color);
        }

    
        .typewriter-wrap {
            max-width: 480px;
            margin: 0 auto 28px;
        }

        .typewriter-line {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 22px;
            border-left: 3px solid var(--brand-color);
            background: rgba(97,149,218,0.05);
            border-radius: 0 14px 14px 0;
        }

        .tw-prefix {
            color: var(--brand-color);
            font-size: 1.15rem;
            font-weight: 800;
            flex-shrink: 0;
            user-select: none;
        }

        .tw-text {
            color: var(--text-main);
            font-size: 1.05rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            min-height: 1.4em;
        }

        .tw-cursor {
            display: inline-block;
            width: 2px;
            height: 1.1em;
            background: var(--brand-color);
            vertical-align: middle;
            margin-left: 2px;
            border-radius: 1px;
            animation: blink 0.75s step-end infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0; }
        }

        .terminal-container {
            max-width: 480px;
            margin: 0 auto;
        }

        .terminal {
            background: rgba(0,0,0,0.4);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 18px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: 0.3s;
        }

        .terminal:hover {
            border-color: var(--brand-color);
            background: rgba(0,0,0,0.6);
        }

        .command {
            color: #fff;
            font-family: 'Consolas', monospace;
            font-weight: 600;
        }

        

        .built-tech {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .built-tech img {
            width: 36px;
            height: 36px;
            display: block;
        }

        .built-tech span {
            font-size: 0.82rem;
            font-weight: 600;
            color: #fff;
        }

        .and-more {
            font-size: 0.9rem;
            font-weight: 700;
            color: #fff;
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: opacity 0.2s ease;
        }

        .and-more:hover { opacity: 0.6; }

       
        footer {
            width: 100%;
            padding: 40px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .footer-brand-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            opacity: 0.5;
            transition: 0.3s;
        }

        .footer-brand-wrap:hover { opacity: 0.9; }

        .copyright-text {
            font-size: 0.9rem;
            color: var(--text-dim);
            font-weight: 500;
        }

        @media (max-width: 600px) {
            .logo-img { width: 85%; }
            .nav-pills { gap: 8px; }
            .pill-link { font-size: 0.88rem; padding: 10px 16px; }
        }


        /* --- Seção de Anúncios --- */
.ads-section {
    width: 100%;
    max-width: 800px;
    margin: 60px auto 20px; /* Margem para afastar do terminal */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.ad-card {
    position: relative;
    display: block;
    border-radius: 16px;
   
    overflow: hidden; 
    border: 1px solid var(--glass-border);
    background: var(--glass);
    text-decoration: none;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}


.ad-card:hover {
    border-color: var(--brand-color);
    box-shadow: 0 0 25px rgba(97, 149, 218, 0.35);
}

.ad-image {
    width: 100%;
    height: 220px; 
    object-fit: cover;
    display: block;
 
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.ad-card:hover .ad-image {
    transform: scale(1.08);
}


.ad-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2; /* Garante que fique acima da imagem */
    pointer-events: none;
}