:root {
            --night: #0d1117;
            --deep: #a9d039;
            --slate: #a9d039;
            --green: #00c47a;
            --green-dim: rgba(0,196,122,0.10);
            --green-border: rgba(0,196,122,0.22);
            --white: #ffffff;
            --off-white: #f6f8fa;
            --border: #e5e7eb;
            --text: #a9d039;
            --muted: #6b7280;
            --light-muted: #9ca3af;
        }

       

        .snnnn {
            width: 100%;
            max-width: 1140px;
            margin: 0 auto;
        }

        /* ── TABS ── */
        .tabs-container {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 14px;
            display: flex;
            padding: 6px;
            margin-bottom: 16px;
            gap: 4px;
        }

        .tab-item {
            flex: 1;
            padding: 13px 16px;
            text-align: center;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: var(--muted);
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.25s ease;
            white-space: nowrap;
            position: relative;
        }

        .tab-item.active {
            background: var(--night);
            color: var(--white);
            font-weight: 600;
        }

        .tab-item:not(.active):hover {
            background: var(--off-white);
            color: var(--text);
        }

        /* ── BANNER ── */
        .content-banner {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 20px;
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            overflow: hidden;
            min-height: 420px;
        }

        /* LEFT */
        .banner-info {
            padding: 56px 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .category-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--green);
            margin-bottom: 20px;
        }

        .category-label::before {
            content: '';
            width: 22px; height: 2px;
            background: var(--green);
            border-radius: 2px;
        }

        .banner-info h2 {
            font-family: 'Sora', sans-serif;
            font-size: 38px;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.8px;
            color: var(--night);
            margin-bottom: 16px;
        }

        .banner-info p {
            font-size: 15.5px;
            font-weight: 300;
            color: var(--muted);
            line-height: 1.7;
            max-width: 420px;
            margin-bottom: 40px;
        }

        /* Pricing */
        .pricing-row {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .price-box .label {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--light-muted);
            margin-bottom: 4px;
            display: block;
        }

        .price-box .value {
            font-family: 'Sora', sans-serif;
            font-size: 30px;
            font-weight: 700;
            color: var(--night);
            line-height: 1;
        }

        .price-box .value span {
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: var(--muted);
            margin-left: 4px;
        }

        .btn-plans {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--night);
            color: var(--white);
            padding: 16px 28px;
            border-radius: 10px;
            text-decoration: none;
            font-family: 'DM Sans', sans-serif;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.01em;
            transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .btn-plans svg {
            width: 14px; height: 14px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.2s ease;
        }

        .btn-plans:hover {
            background: var(--slate);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(13,17,23,0.18);
        }

        .btn-plans:hover svg { transform: translateX(3px); }

        /* RIGHT */
        .banner-image {
            position: relative;
            background: url('assets/Barateiro/Gemini_Generated_Image_htmj7lhtmj7lhtmj.png') center center / cover no-repeat;
        }

        .banner-image::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(13,17,23,0.25) 0%, transparent 60%);
        }

        /* Tags */
        .tags-container {
            position: absolute;
            right: 32px;
            bottom: 48px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(13,17,23,0.72);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.10);
            color: var(--white);
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            transition: background 0.2s ease;
        }

        .tag:hover { background: rgba(13,17,23,0.88); }

        .tag-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--green);
            flex-shrink: 0;
        }

        /* ── ANIMATIONS ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: none; }
        }

        .tabs-container   { animation: fadeUp 0.5s 0.05s both; }
        .content-banner   { animation: fadeUp 0.6s 0.12s both; }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .content-banner { grid-template-columns: 1fr; }
            .banner-image { height: 320px; }
            .banner-info { padding: 40px 36px; }
            .banner-info h2 { font-size: 30px; }
            .tabs-container { overflow-x: auto; }
            .tab-item { min-width: 140px; }
        }

        @media (max-width: 560px) {
            .pricing-row { flex-direction: column; align-items: flex-start; gap: 16px; }
            .btn-plans { width: 100%; justify-content: center; }
            .banner-info h2 { font-size: 26px; }
            .tags-container { right: 16px; bottom: 20px; }
        }