:root {
  --brand-primary: #3B82F6;
  --brand-secondary: #14B8A6; 
  --brand-accent: #F59E0B;
  --brand-muted: #64748B;
  --brand-bg: #0B1220;
  --brand-bg-soft: #0F172A;
  --brand-card: #111827;
  --brand-text: #469072;
  --brand-red-letter: #994A3D;
  --brand-text-muted: #9CA3AF;
}
    html,
    body {
        height: 100%;
        background: radial-gradient(1200px 600px at 10% -10%, rgba(59, 130, 246, .2), transparent),
            radial-gradient(900px 400px at 100% 20%, rgba(20, 184, 166, .15), transparent),
            var(--brand-bg);
        color: var(--brand-text);
        font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }
    .content-wrapper {
        background: transparent !important;
    }

    .navbar {
        background: rgba(15, 23, 42, .6) !important;
        backdrop-filter: blur(8px);
    }

    .btn-brand {
        background: var(--brand-primary);
        border-color: var(--brand-primary);
        color: #fff;
    }

    .btn:hover{
        color: #fff;
    }

    .btn-brand:hover {
        filter: brightness(1.05);
    }

    .btn-ghost {
        background: transparent;
        border: 1px solid rgba(229, 231, 235, .15);
        color: var(--brand-text);
    }

    .btn-ghost:hover {
        border-color: rgba(229, 231, 235, .35);
    }

    .hero {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        padding-top: 6rem;
        padding-bottom: 5rem;
        border-radius: 10px;
    }

    .hero:before {
        content: "";
        position: absolute;
        inset: -25% -10% auto -10%;
        height: 80%;
        z-index: -1;
        background: conic-gradient(from 180deg at 50% 50%, rgba(59, 130, 246, .2), rgba(20, 184, 166, .2), rgba(245, 158, 11, .14), rgba(59, 130, 246, .2));
        filter: blur(80px) saturate(140%);
    }

    .hero-title {
        letter-spacing: -0.02em;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .375rem .75rem;
        border-radius: 999px;
        background: rgba(148, 163, 184, .15);
        color: var(--brand-text);
        font-weight: 600;
    }

    .chip i {
        width: 22px;
        height: 22px;
        display: inline-grid;
        place-items: center;
        background: rgba(59, 130, 246, .22);
        border-radius: 999px;
    }

    .search-wrap {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
    }

    .search-wrap input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--brand-text);
    }

    .search-wrap input::placeholder {
        color: var(--brand-text-muted);
    }

    .section {
        padding: 5rem 0;
    }

    .card-brand {
        background: var(--brand-card);
        border: 1px solid rgba(255, 255, 255, .06);
        color: var(--brand-text);
        border-radius: 18px;
    }

    .icon-badge {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: rgba(59, 130, 246, .18);
    }

    .feature-title {
        letter-spacing: -.01em;
    }

    .bg-stripes {
        background-image: linear-gradient(45deg, rgba(255, 255, 255, .05) 12.5%, transparent 12.5%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 62.5%, transparent 62.5%, transparent 100%);
        background-size: 16px 16px;
    }

    .footer {
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    a {
        color: var(--brand-text);
    }

    a:hover {
        color: #fff;
    }