/* ========== Translazor UI (no @apply, Bootstrap-safe) ========== */
:root {
    --bg: #0b1020;
    --fg: #0f172a; /* slate-900 */
    --card: rgba(15, 23, 42, 0.6);
    --ring: rgba(99, 102, 241, .4);
}

/* Subtle noise background helper (optional) */
.tz-noise::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><filter id="n"><feTurbulence baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.03"/></svg>');
    pointer-events: none;
}

/* Glass card */
.tz-glass {
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    backdrop-filter: saturate(1.2) blur(10px);
    background: var(--card);
    border: 1px solid rgba(148,163,184,.15);
}

/* Buttons (prefixed to avoid Bootstrap .btn conflicts) */
.tz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem; /* ~ rounded-2xl */
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    transition: all .2s ease; /* transition */
    text-decoration: none;
    line-height: 1.25rem;
    cursor: pointer;
    border: 0;
    gap: 0.5rem;
}

/* Primary */
.tz-btn-primary {
    background-color: #4f46e5; /* indigo-600 */
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(30,27,75,.30), 0 4px 6px -4px rgba(30,27,75,.30);
}

    .tz-btn-primary:hover {
        background-color: #6366f1; /* indigo-500 */
    }

/* Ghost */
.tz-btn-ghost {
    color: #e2e8f0; /* slate-200 */
    background: transparent;
    border: 1px solid rgba(71,85,105,.40); /* slate-600/40 */
}

    .tz-btn-ghost:hover {
        color: #ffffff;
    }

/* Tag/Pill */
.tz-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(71,85,105,.50); /* slate-600/50 */
    padding: 0.25rem 0.625rem; /* py-1 px-2.5 */
    border-radius: 9999px; /* full */
    font-size: 11px;
    font-weight: 500;
    color: #cbd5e1; /* slate-300 */
    white-space: nowrap;
}

/* Section title/subtitle */
.tz-section-title {
    color: #ffffff;
    font-weight: 800; /* extrabold */
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-size: 1.875rem; /* 3xl */
}

@media (min-width: 768px) {
    .tz-section-title {
        font-size: 2.25rem;
    }
    /* 4xl */
}

.tz-section-sub {
    margin-top: 0.75rem; /* mt-3 */
    color: #cbd5e1; /* slate-300 */
    max-width: 42rem; /* max-w-2xl */
}

/* Feature card */
.tz-feature-card {
    background: var(--card);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    backdrop-filter: saturate(1.2) blur(10px);
    border: 1px solid rgba(148,163,184,.15);
    border-radius: 1rem; /* rounded-2xl */
    padding: 1.5rem; /* p-6 */
    transition: box-shadow .2s ease, transform .2s ease;
}

    .tz-feature-card:hover {
        box-shadow: 0 20px 25px -5px rgba(49,46,129,.20), 0 8px 10px -6px rgba(49,46,129,.20); /* ~ indigo-900/20 */
    }

/* Utility helpers if needed */
.tz-text-muted {
    color: #94a3b8;
}
/* slate-400 */
.tz-text-soft {
    color: #cbd5e1;
}
/* slate-300 */
.tz-rounded-3xl {
    border-radius: 1.5rem;
}

.tz-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(2,6,23,.25), 0 4px 6px -4px rgba(2,6,23,.25);
}

/* Footer small text alignment on desktop */
@media (min-width: 768px) {
    .md\\:text-right {
        text-align: right;
    }
}

.tz-input {
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    background: rgba(15,23,42,.60); /* bg-slate-900/60 */
    border: 1px solid rgba(255,255,255,.10);
    padding: .75rem 1rem; /* py-3 px-4 */
    color: #e5e7eb; /* text-slate-100 */
}

.tz-input::placeholder {
    color: #94a3b8;
}
/* placeholder-slate-400 */
.tz-input:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(99,102,241,.6); /* focus:ring-2 + indigo-500 */
    border-color: transparent;
}