@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
    --dark: #09090b;
    --panel: #18181b;
    --panel2: #27272a;
    --line: #27272a;
    --muted: #a1a1aa;
    --blue: #2563eb;
    --cyan: #22d3ee;
    --font-main: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-main);
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    line-height: inherit;
    font-family: var(--font-main);
    font-feature-settings: normal;
    font-variation-settings: normal;
    background: #09090b;
    color: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
}

a {
    text-decoration: none;
}

.bg-site {
    background: #09090b;
}

.text-gradient {
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Header */
.navbar-kj {
    background: rgba(9, 9, 11, .86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transform: translateY(-100%);
    animation: kjHeaderDrop .65s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes kjHeaderDrop {
    to {
        transform: translateY(0);
    }
}

.navbar-kj .navbar {
    min-height: 80px;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-kj .nav-link {
    color: #a1a1aa;
    font-size: .9rem;
    font-weight: 500;
    padding: .7rem 1rem;
    border-radius: 999px;
}

.navbar-kj .nav-link:hover,
.navbar-kj .nav-link.active {
    color: #fff;
}

.logo-kj {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .2);
}

.logo-kj::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #34d399;
    border: 2px solid #fff;
}

.search-trigger {
    align-items: center;
    gap: .75rem;
    min-height: 42px;
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid #3f3f46;
    background: rgba(24, 24, 27, .55);
    color: #a1a1aa;
    font-size: .9rem;
    transition: .2s ease;
}

.search-trigger:hover {
    border-color: #52525b;
    color: #d4d4d8;
    background: rgba(39, 39, 42, .75);
}

.search-trigger kbd {
    display: inline-flex;
    align-items: center;
    padding: .15rem .45rem;
    border: 0;
    border-radius: .45rem;
    background: #3f3f46;
    color: #a1a1aa;
    font-size: .75rem;
}

/* General */
.hero {
    min-height: 100vh;
    position: relative;
    background: #09090b;
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 9, 11, .65), #09090b),
        linear-gradient(90deg, rgba(9, 9, 11, .85), transparent, rgba(9, 9, 11, .85)),
        url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&h=1080&fit=crop&q=80") center/cover;
    opacity: 1;
}

.hero>* {
    position: relative;
}

.hero-title {
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .88;
}

.section-pad {
    padding: 7rem 0;
}

.section-dark {
    background: #09090b;
}

.section-alt {
    background: #111113;
}

.card-dark {
    background: rgba(24, 24, 27, .76);
    border: 1px solid #27272a;
    border-radius: 1.5rem;
}

.card-dark:hover {
    border-color: rgba(96, 165, 250, .35);
}

.btn-pill {
    border-radius: 999px;
    padding: .85rem 1.5rem;
    font-weight: 700;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(39, 39, 42, .8);
    color: #60a5fa;
    font-weight: 700;
    font-size: .85rem;
}

.service-row {
    border-top: 1px solid rgba(63, 63, 70, .55);
    padding: 1.5rem;
    border-radius: 1rem;
    transition: .25s;
}

.service-row:hover {
    background: rgba(24, 24, 27, .8);
    transform: translateY(-2px);
}

.icon-box {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: #18181b;
    border: 1px solid #27272a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
}

.portfolio-card {
    border-radius: 1.5rem;
    overflow: hidden;
    background: white;
    color: #0f172a;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    height: 100%;
    transition: .25s;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .18);
}

.portfolio-card img {
    height: 260px;
    object-fit: cover;
    width: 100%;
    transition: .5s;
}

.portfolio-card:hover img {
    transform: scale(1.05);
}

/* Footer */
.footer {
    background: #09090b;
    border-top: 1px solid #27272a;
}

.footer a {
    color: #a1a1aa;
    transition: color .2s ease;
}

.footer a:hover {
    color: #fff;
}

/* Support */
.floating-support {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #10b981;
    box-shadow: 0 14px 34px rgba(16, 185, 129, .3);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    animation: supportFloat 2.4s ease-in-out infinite;
}

.floating-support:hover {
    background: #34d399;
    transform: scale(1.08);
    box-shadow: 0 18px 42px rgba(16, 185, 129, .4);
}

.floating-support i {
    position: absolute;
    font-size: 1.45rem;
    transition: opacity .2s ease, transform .2s ease;
}

.floating-support .support-toggle__close {
    opacity: 0;
    transform: rotate(-90deg) scale(.75);
}

.floating-support.is-open {
    animation: none;
}

.floating-support.is-open .support-toggle__open {
    opacity: 0;
    transform: rotate(90deg) scale(.75);
}

.floating-support.is-open .support-toggle__close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

@keyframes supportFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.support-panel {
    position: fixed;
    right: 1.5rem;
    bottom: 6rem;
    z-index: 1040;
    width: min(24rem, calc(100vw - 2rem));
    display: none;
    transform-origin: bottom right;
}

.support-panel.is-open {
    display: block;
    animation: supportPanelIn .26s ease forwards;
}

@keyframes supportPanelIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.support-card {
    overflow: hidden;
    color: #fff;
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 1rem;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .58);
}

.support-card__header {
    padding: 1rem;
    background: linear-gradient(90deg, #2563eb, #4f46e5);
}

.support-card__avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}

.support-card__title {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.support-card__subtitle {
    margin: 0;
    color: #dbeafe;
    font-size: .78rem;
}

.support-card__close {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: transparent;
    transition: background .2s ease;
}

.support-card__close:hover {
    background: rgba(255, 255, 255, .18);
}

.support-card__body {
    max-height: 20rem;
    overflow-y: auto;
    padding: 1rem;
}

.support-message {
    width: fit-content;
    max-width: calc(100% - 2rem);
    padding: .78rem .9rem;
    border-radius: 1rem;
}

.support-message p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
}

.support-message--bot {
    margin-bottom: 1rem;
    color: #e4e4e7;
    background: #27272a;
    border-top-left-radius: .25rem;
}

.support-message--user {
    margin: 0 0 .45rem auto;
    color: #fff;
    background: #2563eb;
    border-top-right-radius: .25rem;
    white-space: pre-line;
}

.support-back {
    display: block;
    margin-left: auto;
    padding: 0;
    border: 0;
    color: #71717a;
    background: transparent;
    font-size: .78rem;
    transition: color .2s ease;
}

.support-back:hover {
    color: #d4d4d8;
}

.support-actions {
    display: grid;
    gap: .55rem;
}

.support-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 0;
    border-radius: .8rem;
    color: #e4e4e7;
    background: #27272a;
    text-align: left;
    transition: background .2s ease, transform .2s ease;
}

.support-action:hover {
    background: #3f3f46;
    transform: translateY(-1px);
}

.support-action__icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: .65rem;
    color: #60a5fa;
    background: rgba(37, 99, 235, .18);
}

.support-card__footer {
    padding: 1rem;
    border-top: 1px solid #27272a;
}

.support-whatsapp {
    width: 100%;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .8rem;
    color: #fff;
    background: #059669;
    font-weight: 700;
    transition: background .2s ease, transform .2s ease;
}

.support-whatsapp:hover {
    color: #fff;
    background: #10b981;
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .support-panel {
        right: 1rem;
        bottom: 5.5rem;
        width: calc(100vw - 2rem);
    }

    .floating-support {
        right: 1rem;
        bottom: 1rem;
    }
}

/* Cookies */
.cookie-panel {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1050;
    display: none;
}

.cookie-card {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.55rem 1.75rem;
    border: 1px solid #27272a;
    border-radius: 1.35rem;
    background: #18181b;
    color: #fff;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .55);
}

.cookie-icon {
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, .12);
    color: #facc15;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.cookie-body {
    flex: 1;
}

.cookie-body h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

.cookie-body p {
    color: #a1a1aa;
    margin-bottom: 1rem;
    max-width: 760px;
}

.cookie-body a {
    color: #facc15;
    font-weight: 700;
}

.cookie-actions {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
}

/* FAQ */
.faq-answer {
    display: none;
}

/* Admin */
.admin-shell {
    min-height: 100vh;
    background: #f3f4f6;
}

.admin-sidebar {
    width: 270px;
    background: #111827;
    color: white;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
    overflow-y: auto;
}

.admin-main {
    margin-left: 270px;
    min-height: 100vh;
}

.admin-top {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
}

.admin-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.admin-sidebar a {
    color: #d1d5db;
    text-decoration: none;
    display: block;
    padding: .75rem 1rem;
    border-radius: .75rem;
    margin-bottom: .25rem;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: #1f2937;
    color: white;
}

.form-control,
.form-select {
    border-radius: .75rem;
}

.rich-editor {
    min-height: 320px;
}

.admin-form-heading {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.35rem;
}

.admin-form-heading>span {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: .85rem;
    background: #eff6ff;
    color: #2563eb;
    flex: 0 0 auto;
}

.admin-form-heading h2 {
    font-size: 1.05rem;
    margin: 0;
}

.admin-form-heading p {
    margin: .15rem 0 0;
    color: #6b7280;
}

.admin-tabs .nav-link {
    border-radius: 999px;
    color: #374151;
}

.admin-tabs .nav-link.active {
    color: #fff;
}

.admin-sticky-panel {
    position: sticky;
    top: 1.25rem;
}

.admin-thumb {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    border-radius: .85rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: .35rem;
    flex: 0 0 auto;
}

.admin-thumb--empty {
    display: inline-grid;
    place-items: center;
    background: #f3f4f6;
    color: #374151;
    font-weight: 800;
    padding: 0;
}

.admin-media-preview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: .9rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: .75rem;
}

.admin-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.admin-color-choice {
    cursor: pointer;
}

.admin-color-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-color-choice span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .72rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: .86rem;
    font-weight: 750;
}

.admin-color-choice span::before,
.admin-color-dot {
    content: "";
    width: .75rem;
    height: .75rem;
    display: inline-block;
    border-radius: 999px;
    margin-right: .35rem;
    vertical-align: middle;
}

.admin-color-choice input:checked+span {
    border-color: #111827;
    box-shadow: 0 0 0 .18rem rgba(17, 24, 39, .08);
}

.admin-color-choice--purple span::before,
.admin-color-dot--purple {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
}

.admin-color-choice--emerald span::before,
.admin-color-dot--emerald {
    background: linear-gradient(135deg, #059669, #0d9488);
}

.admin-color-choice--orange span::before,
.admin-color-dot--orange {
    background: linear-gradient(135deg, #f97316, #dc2626);
}

.admin-color-choice--blue span::before,
.admin-color-dot--blue {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.admin-color-choice--rose span::before,
.admin-color-dot--rose {
    background: linear-gradient(135deg, #e11d48, #f472b6);
}

.admin-color-choice--cyan span::before,
.admin-color-dot--cyan {
    background: linear-gradient(135deg, #0891b2, #22d3ee);
}

.admin-rich-editor {
    border: 1px solid #d1d5db;
    border-radius: .9rem;
    overflow: hidden;
    background: #fff;
}

.admin-rich-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .55rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.admin-rich-editor__toolbar button,
.admin-rich-editor__style {
    min-width: 2.15rem;
    height: 2.15rem;
    border: 1px solid #d1d5db;
    border-radius: .6rem;
    background: #fff;
    color: #111827;
}

.admin-rich-editor__style {
    width: auto;
    padding: 0 .65rem;
}

.admin-rich-editor__toolbar button:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.admin-rich-editor__content {
    min-height: 360px;
    padding: 1rem;
    outline: none;
    line-height: 1.75;
}

.admin-rich-editor__content:focus {
    box-shadow: inset 0 0 0 .2rem rgba(37, 99, 235, .10);
}

/* Search modal */
.modal-backdrop.show {
    opacity: .72;
    backdrop-filter: blur(7px);
}

body.search-is-open main,
body.search-is-open footer,
body.search-is-open .floating-support,
body.search-is-open .cookie-panel {
    filter: blur(7px);
    transition: filter .2s ease;
}

.search-modal__dialog {
    max-width: 760px;
    margin-top: 7vh;
}

.search-modal__content {
    border: 1px solid #27272a;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #18181b;
    color: #fff;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}

.search-modal__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #27272a;
}

.search-modal__header i {
    color: #71717a;
    font-size: 1.25rem;
}

.search-modal__header input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 1.15rem;
}

.search-modal__header input::placeholder {
    color: #71717a;
}

.search-modal__close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: #71717a;
}

.search-modal__close:hover {
    background: #27272a;
    color: #fff;
}

.search-modal__body {
    max-height: 60vh;
    overflow-y: auto;
    padding: .75rem;
}

.search-group {
    margin-bottom: 1rem;
}

.search-group>p {
    margin: .65rem 1rem;
    color: #71717a;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.search-result {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    color: #fff;
    text-decoration: none;
    transition: .2s ease;
}

.search-result:hover {
    background: #27272a;
    color: #fff;
}

.search-result__icon {
    width: 44px;
    height: 44px;
    border-radius: .9rem;
    background: rgba(37, 99, 235, .12);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result strong {
    display: block;
    font-size: 1rem;
    line-height: 1.15;
}

.search-result small {
    display: block;
    color: #71717a;
    margin-top: .2rem;
}

.search-result.is-hidden {
    display: none;
}

.search-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid #27272a;
    color: #71717a;
    font-size: .75rem;
}

.search-modal__footer kbd {
    border: 0;
    border-radius: .35rem;
    padding: .15rem .45rem;
    background: #27272a;
    color: #a1a1aa;
}

/* Reveal */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Blog listing */
.blog-hero {
    position: relative;
    overflow: hidden;
    padding: 9rem 0 5rem;
    background:
        radial-gradient(circle at 84% 18%, rgba(37, 99, 235, .16), transparent 34%),
        radial-gradient(circle at 0% 0%, rgba(124, 58, 237, .13), transparent 31%),
        linear-gradient(135deg, #09090b 0%, #121217 52%, #0b1220 100%);
}

.blog-hero__glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(76px);
}

.blog-hero__glow--right {
    width: 36rem;
    height: 36rem;
    top: -14rem;
    right: -8rem;
    background: rgba(37, 99, 235, .12);
}

.blog-hero__glow--left {
    width: 28rem;
    height: 28rem;
    bottom: -16rem;
    left: -10rem;
    background: rgba(124, 58, 237, .10);
}

.blog-back {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #94a3b8;
    font-size: .95rem;
    font-weight: 400;
    margin-bottom: 2rem;
    transition: color .2s ease, transform .2s ease;
}

.blog-back:hover {
    color: #fff;
    transform: translateX(-2px);
}

.blog-hero__content {
    max-width: 760px;
}

.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: .32rem .85rem;
    border-radius: 999px;
    background: rgba(39, 39, 42, .9);
    color: #fde047;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 1.7rem;
}

.blog-hero h1 {
    color: #fff;
    font-size: clamp(3.25rem, 6.2vw, 5rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;
    margin: 0 0 1.25rem;
}

.blog-hero h1 span {
    background: linear-gradient(90deg, #60a5fa, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.blog-hero p {
    color: #f8fafc;
    font-size: 1.08rem;
    line-height: 1.72;
    max-width: 720px;
    margin: 0;
    font-weight: 400;
}

.blog-toolbar {
    position: sticky;
    top: 80px;
    z-index: 20;
    background: rgba(16, 16, 19, .96);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding: 1.25rem 0;
}

.blog-toolbar__inner {
    display: grid;
    grid-template-columns: minmax(280px, 392px) minmax(0, 1fr);
    align-items: center;
    gap: 1.35rem;
}

.blog-search-box {
    position: relative;
    width: 100%;
}

.blog-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
}

.blog-search-box input {
    width: 100%;
    height: 43px;
    border-radius: .65rem;
    border: 1px solid rgba(113, 113, 122, .48);
    background: rgba(39, 39, 42, .72);
    color: #fff;
    padding: 0 1rem 0 2.75rem;
    outline: 0;
    font-size: .88rem;
    font-weight: 400;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.blog-search-box input::placeholder {
    color: #a1a1aa;
}

.blog-search-box input:focus {
    border-color: rgba(96, 165, 250, .75);
    background: rgba(39, 39, 42, .92);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);
}

.blog-filter-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.blog-category-filter {
    border: 0;
    background: rgba(39, 39, 42, .86);
    color: #d4d4d8;
    min-height: 2rem;
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.blog-category-filter i {
    font-size: .9rem;
}

.blog-category-filter:hover {
    background: rgba(63, 63, 70, .94);
    color: #fff;
    transform: translateY(-1px);
}

.blog-category-filter.is-active {
    background: #2563eb;
    color: #fff;
}

.blog-listing {
    padding: 4rem 0 6rem;
    background: #09090b;
}

.blog-featured {
    margin-bottom: 4rem;
}

.blog-featured__link {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    overflow: hidden;
    border: 1px solid #27272a;
    border-radius: 1.5rem;
    background: #18181b;
    color: inherit;
    text-decoration: none;
    transition: .35s ease;
}

.blog-featured__link:hover {
    border-color: #3f3f46;
    box-shadow: 0 24px 90px rgba(37, 99, 235, .12);
}

.blog-featured__image {
    min-height: 440px;
    overflow: hidden;
}

.blog-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.blog-featured__link:hover .blog-featured__image img {
    transform: scale(1.055);
}

.blog-featured__content {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: .42rem .8rem;
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    margin-bottom: 1rem;
}

.blog-gradient-blue {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.blog-gradient-violet {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.blog-gradient-emerald {
    background: linear-gradient(90deg, #059669, #34d399);
}

.blog-gradient-pink {
    background: linear-gradient(90deg, #db2777, #f472b6);
}

.blog-gradient-amber {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.blog-gradient-indigo {
    background: linear-gradient(90deg, #4f46e5, #818cf8);
}

.blog-gradient-fuchsia {
    background: linear-gradient(90deg, #c026d3, #e879f9);
}

.blog-featured h2 {
    color: #fff;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.04em;
    margin-bottom: 1rem;
    transition: color .2s ease;
}

.blog-featured__link:hover h2 {
    color: #60a5fa;
}

.blog-featured p {
    color: #a1a1aa;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.7rem;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: #71717a;
    font-size: .85rem;
}

.blog-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.blog-card {
    min-height: 100%;
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid #27272a;
    border-radius: 1rem;
    background: #18181b;
    color: inherit;
    text-decoration: none;
    transition: .35s ease;
}

.blog-card__link:hover {
    border-color: #3f3f46;
    box-shadow: 0 20px 65px rgba(37, 99, 235, .10);
}

.blog-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.blog-card__link:hover .blog-card__image img {
    transform: scale(1.055);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.35rem 1.5rem 1.45rem;
}

.blog-card h3 {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: .65rem;
    transition: color .2s ease;
}

.blog-card__link:hover h3 {
    color: #60a5fa;
}

.blog-card p {
    color: #a1a1aa;
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.blog-empty-state {
    display: none;
    text-align: center;
    padding: 5rem 1rem;
    color: #a1a1aa;
}

.blog-empty-state i {
    display: block;
    font-size: 3rem;
    color: #3f3f46;
    margin-bottom: 1rem;
}

.blog-empty-state h3 {
    color: #fff;
    font-weight: 800;
}

.blog-post-item.is-hidden {
    display: none;
}

/* Blog detail */
.blog-detail-container {
    width: min(100% - 3rem, 1050px);
    margin-inline: auto;
}

.blog-detail-hero {
    position: relative;
    overflow: hidden;
    padding: 8.4rem 0 5.25rem;
    background:
        radial-gradient(circle at 88% 14%, rgba(37, 99, 235, .15), transparent 34%),
        linear-gradient(135deg, #09090b 0%, #101018 50%, #09090b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.blog-detail-hero__glow {
    position: absolute;
    top: -12rem;
    right: -9rem;
    width: 38rem;
    height: 38rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, .12);
    filter: blur(70px);
    pointer-events: none;
}

.blog-detail-hero__content {
    position: relative;
    z-index: 1;
}

.blog-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: .95rem;
    margin-bottom: 2rem;
    transition: color .2s ease, transform .2s ease;
}

.blog-detail-back:hover {
    color: #fff;
    transform: translateX(-2px);
}

.blog-detail-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .48rem 1rem;
    border-radius: 999px;
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    box-shadow: 0 18px 42px rgba(20, 184, 166, .18);
    margin-bottom: 1.55rem;
}

.blog-detail-title {
    max-width: 820px;
    margin: 0 0 1.35rem;
    color: #fff;
    font-size: clamp(2.25rem, 5.8vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.blog-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 1.8rem;
    color: #cbd5e1;
    font-size: .98rem;
}

.blog-detail-meta__item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.blog-detail-meta__item i {
    color: #cbd5e1;
    font-size: 1.1rem;
}

.blog-detail-main {
    background: #050507;
    padding: 4rem 0 4.5rem;
}

.blog-detail-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8.25;
    object-fit: cover;
    border-radius: 1.35rem;
    margin-bottom: 4.9rem;
    box-shadow: 0 22px 65px rgba(0, 0, 0, .32);
}

.blog-detail-content {
    max-width: 860px;
    margin-inline: auto;
    color: #d4d4d8;
    font-size: 1.08rem;
    line-height: 1.82;
    padding-bottom: 4.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.blog-detail-content>*:first-child {
    margin-top: 0;
}

.blog-detail-content>*:last-child {
    margin-bottom: 0;
}

.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.blog-detail-content h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin: 0 0 1.15rem;
}

.blog-detail-content h3 {
    font-size: clamp(1.28rem, 2vw, 1.55rem);
    margin: 2rem 0 .45rem;
}

.blog-detail-content h4 {
    font-size: 1.15rem;
    margin: 1.65rem 0 .45rem;
}

.blog-detail-content p,
.blog-detail-content ul,
.blog-detail-content ol {
    margin-bottom: 1.18rem;
}

.blog-detail-content ul,
.blog-detail-content ol {
    padding-left: 1.35rem;
}

.blog-detail-content li {
    margin-bottom: .45rem;
}

.blog-detail-content strong {
    color: #fff;
    font-weight: 800;
}

.blog-detail-content a {
    color: #60a5fa;
    text-decoration: none;
}

.blog-detail-content a:hover {
    color: #93c5fd;
    text-decoration: underline;
}

.blog-detail-content blockquote {
    margin: 2rem 0;
    padding: 1.2rem 1.35rem;
    border-left: 3px solid #2563eb;
    background: rgba(39, 39, 42, .45);
    border-radius: 0 1rem 1rem 0;
    color: #e4e4e7;
}

.blog-detail-content img {
    max-width: 100%;
    border-radius: 1rem;
    margin: 2rem 0;
}

.blog-detail-tags {
    max-width: 860px;
    margin: 2.25rem auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    color: #71717a;
}

.blog-detail-tags i {
    font-size: 1.1rem;
}

.blog-detail-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .34rem .78rem;
    border-radius: 999px;
    background: #27272a;
    color: #e4e4e7;
    font-size: .86rem;
}

.blog-detail-share-wrap {
    max-width: 860px;
    margin: 2.35rem auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .85rem;
}

.blog-detail-share-label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #a1a1aa;
    font-weight: 800;
}

.blog-detail-share {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: #27272a;
    color: #a1a1aa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.blog-detail-share:hover {
    transform: translateY(-2px);
    background: #3f3f46;
    color: #fff;
}

.blog-detail-cta {
    max-width: 860px;
    margin: 4.25rem auto 0;
    padding: 2.65rem 2rem;
    border-radius: 1.35rem;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    text-align: center;
    box-shadow: 0 24px 70px rgba(37, 99, 235, .22);
}

.blog-detail-cta h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.035em;
}

.blog-detail-cta p {
    margin: 0 auto 1.65rem;
    max-width: 650px;
    color: #dbeafe;
}

.blog-detail-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .65rem 2.1rem;
    border-radius: .45rem;
    background: #fff;
    color: #2563eb;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.blog-detail-cta__button:hover {
    background: #eff6ff;
    color: #2563eb;
    transform: translateY(-1px);
}

/* Portfolio page */
.portfolio-page-hero {
    position: relative;
    overflow: hidden;
    padding: 9rem 0 5rem;
    background:
        radial-gradient(circle at 84% 18%, rgba(37, 99, 235, .16), transparent 34%),
        radial-gradient(circle at 0% 0%, rgba(124, 58, 237, .13), transparent 31%),
        linear-gradient(135deg, #09090b 0%, #121217 52%, #0b1220 100%);
}

.portfolio-page-hero__glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(76px);
}

.portfolio-page-hero__glow--right {
    width: 36rem;
    height: 36rem;
    top: -14rem;
    right: -8rem;
    background: rgba(37, 99, 235, .12);
}

.portfolio-page-hero__glow--left {
    width: 28rem;
    height: 28rem;
    bottom: -16rem;
    left: -10rem;
    background: rgba(124, 58, 237, .10);
}

.portfolio-page-back {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #94a3b8;
    font-size: .95rem;
    font-weight: 400;
    margin-bottom: 2rem;
    transition: color .2s ease, transform .2s ease;
}

.portfolio-page-back:hover {
    color: #fff;
    transform: translateX(-2px);
}

.portfolio-page-hero__content {
    max-width: 820px;
}

.portfolio-page-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: .32rem .85rem;
    border-radius: 999px;
    background: rgba(39, 39, 42, .9);
    color: #fde047;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 1.7rem;
}

.portfolio-page-hero h1 {
    color: #fff;
    font-size: clamp(3.25rem, 6.2vw, 5rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .98;
    margin: 0 0 1.25rem;
}

.portfolio-page-hero h1 span {
    background: linear-gradient(90deg, #60a5fa, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.portfolio-page-hero p {
    color: #f8fafc;
    font-size: 1.08rem;
    line-height: 1.72;
    max-width: 720px;
    margin: 0;
    font-weight: 400;
}

.portfolio-page-toolbar {
    position: sticky;
    top: 80px;
    z-index: 20;
    background: rgba(16, 16, 19, .96);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    padding: 1.25rem 0;
}

.portfolio-page-toolbar__inner {
    display: grid;
    grid-template-columns: minmax(280px, 392px) minmax(0, 1fr);
    align-items: center;
    gap: 1.35rem;
}

.portfolio-page-search-box {
    position: relative;
    width: 100%;
}

.portfolio-page-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
}

.portfolio-page-search-box input {
    width: 100%;
    height: 43px;
    border-radius: .65rem;
    border: 1px solid rgba(113, 113, 122, .48);
    background: rgba(39, 39, 42, .72);
    color: #fff;
    padding: 0 1rem 0 2.75rem;
    outline: 0;
    font-size: .88rem;
    font-weight: 400;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.portfolio-page-search-box input::placeholder {
    color: #a1a1aa;
}

.portfolio-page-search-box input:focus {
    border-color: rgba(96, 165, 250, .75);
    background: rgba(39, 39, 42, .92);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);
}

.portfolio-page-filter-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.portfolio-page-filter {
    border: 0;
    background: rgba(39, 39, 42, .86);
    color: #d4d4d8;
    min-height: 2rem;
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.portfolio-page-filter i {
    font-size: .9rem;
}

.portfolio-page-filter:hover {
    background: rgba(63, 63, 70, .94);
    color: #fff;
    transform: translateY(-1px);
}

.portfolio-page-filter.is-active {
    background: #2563eb;
    color: #fff;
}

.portfolio-page-listing {
    padding: 4rem 0 6rem;
    background: #09090b;
}

.portfolio-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.portfolio-page-card {
    min-height: 100%;
}

.portfolio-page-card__link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid #27272a;
    border-radius: 1.25rem;
    background: #18181b;
    color: inherit;
    text-decoration: none;
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.portfolio-page-card__link:hover {
    border-color: #3f3f46;
    box-shadow: 0 20px 65px rgba(37, 99, 235, .10);
    transform: translateY(-4px);
}

.portfolio-page-card__image {
    position: relative;
    aspect-ratio: 16 / 10.5;
    overflow: hidden;
    background: #09090b;
}

.portfolio-page-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease, opacity .35s ease;
}

.portfolio-page-card__link:hover .portfolio-page-card__image img {
    transform: scale(1.055);
    opacity: .86;
}

.portfolio-page-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.15rem;
    background: linear-gradient(180deg, transparent 20%, rgba(9, 9, 11, .78) 100%);
    opacity: 0;
    transition: opacity .25s ease;
}

.portfolio-page-card__link:hover .portfolio-page-card__overlay {
    opacity: 1;
}

.portfolio-page-card__overlay span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.portfolio-page-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.35rem 1.5rem 1.45rem;
}

.portfolio-page-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: .42rem .8rem;
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    margin-bottom: 1rem;
}

.portfolio-gradient-blue {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.portfolio-gradient-violet {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.portfolio-gradient-emerald {
    background: linear-gradient(90deg, #059669, #34d399);
}

.portfolio-gradient-pink {
    background: linear-gradient(90deg, #db2777, #f472b6);
}

.portfolio-gradient-amber {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.portfolio-gradient-indigo {
    background: linear-gradient(90deg, #4f46e5, #818cf8);
}

.portfolio-page-card__client {
    display: block;
    margin-bottom: .45rem;
    color: #60a5fa;
    font-size: .83rem;
    font-weight: 800;
}

.portfolio-page-card h2 {
    color: #fff;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: .65rem;
    transition: color .2s ease;
}

.portfolio-page-card__link:hover h2 {
    color: #60a5fa;
}

.portfolio-page-card p {
    color: #a1a1aa;
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.portfolio-page-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
}

.portfolio-page-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: .25rem .62rem;
    border-radius: 999px;
    background: rgba(39, 39, 42, .9);
    color: #d4d4d8;
    font-size: .76rem;
    font-weight: 700;
}

.portfolio-page-empty-state {
    display: none;
    text-align: center;
    padding: 5rem 1rem;
    color: #a1a1aa;
}

.portfolio-page-empty-state i {
    display: block;
    font-size: 3rem;
    color: #3f3f46;
    margin-bottom: 1rem;
}

.portfolio-page-empty-state h3 {
    color: #fff;
    font-weight: 800;
}

.portfolio-page-item.is-hidden {
    display: none;
}

/* Project detail */
.project-detail-hero {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 5rem;
    background:
        radial-gradient(circle at 84% 18%, rgba(37, 99, 235, .16), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(79, 70, 229, .12), transparent 33%),
        linear-gradient(135deg, #09090b 0%, #18181b 48%, #09090b 100%);
}

.project-detail-hero__glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(76px);
}

.project-detail-hero__glow--right {
    width: 38rem;
    height: 38rem;
    top: -15rem;
    right: -9rem;
    background: rgba(37, 99, 235, .12);
}

.project-detail-hero__glow--left {
    width: 28rem;
    height: 28rem;
    bottom: -16rem;
    left: -10rem;
    background: rgba(79, 70, 229, .12);
}

.project-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #94a3b8;
    font-size: .95rem;
    font-weight: 400;
    margin-bottom: 2rem;
    transition: color .2s ease, transform .2s ease;
}

.project-detail-back:hover {
    color: #fff;
    transform: translateX(-2px);
}

.project-detail-hero__content {
    max-width: 980px;
}

.project-detail-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .48rem 1rem;
    border-radius: 999px;
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    margin-bottom: 1.55rem;
    box-shadow: 0 18px 42px rgba(37, 99, 235, .14);
}

.project-detail-gradient-blue {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.project-detail-gradient-violet {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.project-detail-gradient-emerald {
    background: linear-gradient(90deg, #059669, #34d399);
}

.project-detail-gradient-pink {
    background: linear-gradient(90deg, #db2777, #f43f5e);
}

.project-detail-gradient-amber {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.project-detail-gradient-indigo {
    background: linear-gradient(90deg, #4f46e5, #818cf8);
}

.project-detail-hero h1 {
    color: #fff;
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 800;
    margin: 0 0 1rem;
}

.project-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.15rem 1.75rem;
    color: #cbd5e1;
    font-size: 1rem;
}

.project-detail-meta span,
.project-detail-meta a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.project-detail-meta a {
    color: #60a5fa;
    text-decoration: none;
    transition: color .2s ease;
}

.project-detail-meta a:hover {
    color: #93c5fd;
}

.project-detail-meta i {
    font-size: 1.1rem;
}

.project-detail-page {
    background: #050507;
    padding: 4rem 0 5rem;
}

.project-detail-gallery {
    margin-bottom: 3rem;
}

.project-detail-gallery__main {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8.95;
    overflow: hidden;
    border: 0;
    padding: 0;
    border-radius: 1.5rem;
    background: #18181b;
    cursor: pointer;
}

.project-detail-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease, opacity .25s ease;
}

.project-detail-gallery__main:hover img {
    transform: scale(1.035);
    opacity: .9;
}

.project-detail-gallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    font-weight: 700;
    opacity: 0;
    transition: background .25s ease, opacity .25s ease;
}

.project-detail-gallery__main:hover .project-detail-gallery__overlay {
    background: rgba(0, 0, 0, .22);
    opacity: 1;
}

.project-detail-gallery__thumbs {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    padding: 1rem 0 .25rem;
}

.project-detail-gallery__thumb {
    flex: 0 0 auto;
    width: 5.8rem;
    height: 3.75rem;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: .85rem;
    background: #18181b;
    opacity: .62;
    transition: opacity .2s ease, box-shadow .2s ease, transform .2s ease;
}

.project-detail-gallery__thumb:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.project-detail-gallery__thumb.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px #2563eb, 0 0 0 4px rgba(37, 99, 235, .20);
}

.project-detail-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, .9fr);
    gap: 3rem;
    align-items: start;
}

.project-detail-main-col {
    min-width: 0;
}

.project-detail-description {
    margin-bottom: 2.8rem;
}

.project-detail-description h2 {
    color: #fff;
    font-size: 1.55rem;
    line-height: 1.25;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 0 0 1rem;
}

.project-detail-description p {
    color: #cbd5e1;
    font-size: 1.08rem;
    line-height: 1.75;
    margin: 0;
}

.project-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
}

.project-detail-info-card {
    min-height: 100%;
    padding: 1.45rem;
    border-radius: 1rem;
    border: 1px solid #27272a;
    background: #18181b;
}

.project-detail-info-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
}

.project-detail-info-card__icon i {
    font-size: 1.25rem;
}

.project-detail-info-card__icon--red {
    background: rgba(239, 68, 68, .20);
    color: #f87171;
}

.project-detail-info-card__icon--amber {
    background: rgba(245, 158, 11, .20);
    color: #fbbf24;
}

.project-detail-info-card__icon--green {
    background: rgba(16, 185, 129, .20);
    color: #34d399;
}

.project-detail-info-card h3 {
    color: #fff;
    font-size: .98rem;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 .65rem;
}

.project-detail-info-card p {
    color: #cbd5e1;
    font-size: .88rem;
    line-height: 1.65;
    margin: 0;
}

.project-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.project-detail-side-card {
    padding: 1.45rem;
    border-radius: 1rem;
    border: 1px solid #27272a;
    background: #18181b;
}

.project-detail-side-card h3 {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 1rem;
}

.project-detail-side-card h3 i {
    color: #60a5fa;
}

.project-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.project-detail-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .35rem .75rem;
    border-radius: .45rem;
    border: 1px solid #3f3f46;
    background: #27272a;
    color: #e4e4e7;
    font-size: .82rem;
    font-weight: 700;
}

.project-detail-cta-card {
    padding: 1.45rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    box-shadow: 0 24px 70px rgba(37, 99, 235, .20);
}

.project-detail-cta-card h3 {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 .75rem;
}

.project-detail-cta-card p {
    color: #dbeafe;
    font-size: .88rem;
    line-height: 1.55;
    margin: 0 0 1.35rem;
}

.project-detail-cta-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.45rem;
    padding: .55rem 1rem;
    border-radius: .45rem;
    background: #fff;
    color: #2563eb;
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.project-detail-cta-card a:hover {
    background: #eff6ff;
    color: #2563eb;
    transform: translateY(-1px);
}

/* Project lightbox */
.project-detail-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5rem 6rem;
    background: rgba(0, 0, 0, .92);
}

.project-detail-lightbox.is-open {
    display: flex;
}

.project-detail-lightbox img {
    display: block;
    max-width: min(100%, 1180px);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 1rem;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
}

.project-detail-lightbox__close,
.project-detail-lightbox__nav {
    position: absolute;
    border: 0;
    background: rgba(39, 39, 42, .9);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
}

.project-detail-lightbox__close:hover,
.project-detail-lightbox__nav:hover {
    background: rgba(63, 63, 70, .95);
    transform: translateY(-1px);
}

.project-detail-lightbox__close {
    top: 1.5rem;
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
}

.project-detail-lightbox__nav {
    top: 50%;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    transform: translateY(-50%);
}

.project-detail-lightbox__nav:hover {
    transform: translateY(calc(-50% - 1px));
}

.project-detail-lightbox__nav--prev {
    left: 1.5rem;
}

.project-detail-lightbox__nav--next {
    right: 1.5rem;
}

/* Responsive existing pages */
@media (max-width: 1199px) {

    .blog-toolbar__inner,
    .portfolio-page-toolbar__inner {
        grid-template-columns: 1fr;
    }

    .blog-filter-list,
    .portfolio-page-filter-list {
        justify-content: flex-start;
    }

    .blog-grid,
    .portfolio-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-detail-layout {
        grid-template-columns: 1fr;
    }

    .project-detail-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .admin-sidebar {
        position: static;
        width: auto;
    }

    .admin-main {
        margin-left: 0;
    }

    .hero-title {
        font-size: clamp(3rem, 17vw, 6rem);
    }

    .blog-detail-container {
        width: min(100% - 2rem, 1050px);
    }

    .blog-detail-hero {
        padding-top: 7.25rem;
    }

    .blog-detail-main {
        padding-top: 2.25rem;
    }

    .blog-detail-image {
        margin-bottom: 3rem;
    }

    .project-detail-hero {
        padding: 7rem 0 4rem;
    }

    .project-detail-page {
        padding: 2.5rem 0 4rem;
    }

    .project-detail-gallery__main {
        aspect-ratio: 16 / 10;
    }

    .project-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .project-detail-lightbox {
        padding: 4rem 1rem;
    }
}

@media (max-width: 767px) {

    .blog-hero,
    .portfolio-page-hero {
        padding: 7rem 0 4rem;
    }

    .blog-hero h1,
    .portfolio-page-hero h1 {
        font-size: clamp(2.65rem, 12vw, 4.2rem);
    }

    .blog-toolbar,
    .portfolio-page-toolbar {
        top: 72px;
    }

    .blog-featured__link {
        grid-template-columns: 1fr;
    }

    .blog-featured__image {
        min-height: auto;
        aspect-ratio: 16 / 10;
    }

    .blog-featured__content {
        padding: 1.5rem;
    }

    .blog-grid,
    .portfolio-page-grid {
        grid-template-columns: 1fr;
    }

    .blog-filter-list,
    .portfolio-page-filter-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .35rem;
    }

    .blog-category-filter,
    .portfolio-page-filter {
        white-space: nowrap;
    }

    .project-detail-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.6rem);
    }

    .project-detail-meta {
        gap: .8rem 1.1rem;
        font-size: .92rem;
    }

    .project-detail-gallery__main {
        border-radius: 1rem;
        aspect-ratio: 16 / 11;
    }

    .project-detail-gallery__thumb {
        width: 4.9rem;
        height: 3.2rem;
    }

    .project-detail-layout {
        gap: 2.25rem;
    }

    .project-detail-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .blog-detail-container {
        width: min(100% - 1.5rem, 1050px);
    }

    .blog-detail-hero {
        padding: 6.75rem 0 3.75rem;
    }

    .blog-detail-title {
        font-size: clamp(2.05rem, 11vw, 3rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

    .blog-detail-meta {
        gap: .85rem 1.1rem;
        font-size: .92rem;
    }

    .blog-detail-image {
        border-radius: 1rem;
        aspect-ratio: 16 / 10.5;
        margin-bottom: 2.5rem;
    }

    .blog-detail-content {
        font-size: 1rem;
        line-height: 1.72;
        padding-bottom: 3rem;
    }

    .blog-detail-cta {
        padding: 2rem 1.2rem;
        margin-top: 3.2rem;
    }

    .cookie-card {
        flex-direction: column;
        padding: 1.25rem;
    }
}

/* ==========================================================
   HOME UPDATE
   ========================================================== */

:root {
    --kj-bg: #09090b;
    --kj-bg-soft: #0f0f13;
    --kj-panel: rgba(24, 24, 27, .74);
    --kj-panel-strong: rgba(24, 24, 27, .94);
    --kj-border: rgba(63, 63, 70, .62);
    --kj-border-soft: rgba(63, 63, 70, .38);
    --kj-text: #f8fafc;
    --kj-muted: #a1a1aa;
    --kj-muted-2: #71717a;
    --kj-blue: #2563eb;
    --kj-blue-soft: #60a5fa;
    --kj-cyan: #67e8f9;
    --kj-amber: #f59e0b;
    --kj-orange: #fb923c;
    --kj-radius-lg: 1.75rem;
    --kj-radius-md: 1.25rem;
    --kj-shadow-dark: 0 24px 80px rgba(0, 0, 0, .34);
    --kj-shadow-blue: 0 22px 70px rgba(37, 99, 235, .22);
}

body.bg-site,
body.home-page {
    background: var(--kj-bg);
    color: var(--kj-text);
}

body.home-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 88% 0%, rgba(37, 99, 235, .08), transparent 32rem),
        radial-gradient(circle at 0% 100%, rgba(39, 39, 42, .70), transparent 34rem),
        var(--kj-bg);
}

body.home-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.text-muted-soft {
    color: var(--kj-muted-2) !important;
}

.text-slate {
    color: #64748b !important;
}

.fw-black {
    font-weight: 900 !important;
}

.text-primary-gradient {
    background: linear-gradient(90deg, #60a5fa 0%, #93c5fd 45%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.text-warning-gradient {
    background: linear-gradient(90deg, #fbbf24 0%, #fb923c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.navbar-kj.is-scrolled {
    background: rgba(9, 9, 11, .92);
    border-bottom-color: rgba(63, 63, 70, .48);
    box-shadow: 0 15px 60px rgba(0, 0, 0, .25);
}

.navbar-kj .navbar-brand {
    color: #fff;
    letter-spacing: -.03em;
}

.navbar-kj .nav-link {
    transition: color .2s ease, background .2s ease;
}

.navbar-kj .nav-link:hover,
.navbar-kj .nav-link.active {
    background: rgba(255, 255, 255, .05);
}

.navbar-toggler:focus {
    box-shadow: none;
}

body.home-page .btn-primary,
.cta-section .btn-primary,
.kj-modal .btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #3b82f6;
    --bs-btn-hover-border-color: #3b82f6;
    box-shadow: 0 18px 36px rgba(37, 99, 235, .20);
}

.section-pad {
    padding: clamp(5rem, 8vw, 8rem) 0;
    position: relative;
    overflow: hidden;
}

.section-dark {
    background: #09090b;
    color: #fff;
}

.section-alt {
    background: linear-gradient(180deg, #09090b 0%, #111114 100%);
    color: #fff;
}

.section-heading {
    margin-bottom: 4rem;
}

.section-heading--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 4rem;
}

.section-kicker {
    color: var(--kj-muted-2);
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(2rem, 5vw, 4.25rem);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 900;
    margin: 0 0 1.25rem;
    color: #fff;
}

.section-title--xl {
    font-size: clamp(2.75rem, 7vw, 5.75rem);
}

.section-title span:not(.text-gradient):not(.text-warning-gradient):not(.text-primary-gradient) {
    color: #71717a;
}

.section-description {
    color: var(--kj-muted);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.75;
    max-width: 43rem;
}

.badge-soft--warning {
    color: #fbbf24;
}

.link-subtle {
    color: #a1a1aa;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.link-subtle:hover {
    color: #fff;
}

.link-primary-gradient {
    text-decoration: none;
    font-weight: 800;
    color: #60a5fa;
}

.link-primary-gradient:hover {
    color: #93c5fd;
}

/* Hero */
.hero.home-hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: #09090b;
    padding-top: 7rem;
}

.hero.home-hero::before {
    display: none;
}

.home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .20;
}

.home-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 9, 11, .64), rgba(9, 9, 11, .42) 38%, #09090b 100%),
        linear-gradient(90deg, rgba(9, 9, 11, .84), transparent 48%, rgba(9, 9, 11, .84));
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 7rem);
    display: flex;
    flex-direction: column;
}

.hero__topline {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #a1a1aa;
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .16em;
    padding-top: 1.5rem;
}

.hero__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: #34d399;
    animation: kjPulseDot 2s infinite;
}

.hero__line {
    width: 3rem;
    height: 1px;
    background: rgba(161, 161, 170, .38);
}

.hero__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 0;
}

.hero__eyebrow {
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin-bottom: 2rem;
}

.hero.home-hero .hero-title {
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .88;
    margin-bottom: 2rem;
}

.hero__lead {
    color: #a1a1aa;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    max-width: 45rem;
    margin: 0 auto 2.5rem;
}

.hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero__stats {
    width: min(100%, 34rem);
    margin: 4.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(63, 63, 70, .45);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.hero__stat {
    text-align: center;
}

.hero__stat strong {
    display: block;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.04em;
}

.hero__stat span {
    display: block;
    margin-top: .25rem;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hero-marquee {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(63, 63, 70, .45);
    padding: 1rem 0;
    overflow: hidden;
}

.hero-marquee__track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: kjMarquee 28s linear infinite;
}

.hero-marquee span {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    white-space: nowrap;
    color: #52525b;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Services */
.services-section {
    background: #09090b;
}

.service-list {
    border-top: 1px solid rgba(63, 63, 70, .45);
}

.service-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.65rem 1rem;
    border-top: 0;
    border-bottom: 1px solid rgba(63, 63, 70, .45);
    border-radius: 1rem;
    margin-bottom: .2rem;
    color: #fff;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease;
}

.service-row:hover {
    background: rgba(24, 24, 27, .70);
    transform: translateY(-2px);
    color: #fff;
}

.service-row__left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.service-row__number {
    width: 1.7rem;
    color: #52525b;
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.service-row .icon-box {
    color: #60a5fa;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.service-row:hover .icon-box {
    border-color: rgba(96, 165, 250, .35);
    background: rgba(37, 99, 235, .08);
}

.service-row h3 {
    color: #fff;
    font-size: clamp(1.18rem, 2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -.035em;
    margin: 0 0 .35rem;
}

.service-row p {
    color: #71717a;
    margin: 0;
    line-height: 1.55;
    max-width: 42rem;
}

.service-row__tags {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.service-row__tags span {
    color: #71717a;
    font-size: .76rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.service-row__arrow {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(63, 63, 70, .80);
    color: #71717a;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.service-row:hover .service-row__arrow {
    color: #fff;
    border-color: rgba(96, 165, 250, .45);
    transform: translate(2px, -2px);
}

/* Feature cards */
.features-section {
    background:
        radial-gradient(circle at 30% 10%, rgba(37, 99, 235, .07), transparent 25rem),
        radial-gradient(circle at 70% 90%, rgba(37, 99, 235, .06), transparent 22rem),
        #09090b;
}

.feature-card {
    height: 100%;
    padding: 2rem;
    border-radius: 1.65rem;
    background: rgba(24, 24, 27, .78);
    border: 1px solid rgba(63, 63, 70, .62);
    overflow: hidden;
    position: relative;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(37, 99, 235, .08), transparent 55%);
    transition: opacity .28s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(96, 165, 250, .35);
    background: rgba(24, 24, 27, .94);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card__icon {
    position: relative;
    z-index: 1;
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: rgba(37, 99, 235, .12);
    color: #60a5fa;
    font-size: 1.45rem;
    margin-bottom: 1.35rem;
}

.feature-card h3 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: .8rem;
}

.feature-card p {
    position: relative;
    z-index: 1;
    color: #a1a1aa;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

.feature-card__metric {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(63, 63, 70, .62);
    padding-top: 1rem;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.feature-card__metric strong {
    color: #60a5fa;
    font-size: 1.85rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.04em;
}

.feature-card__metric span {
    color: #71717a;
    font-size: .9rem;
}

.trust-strip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    padding: 1.2rem 1.5rem;
    border-radius: 1.25rem;
    background: rgba(24, 24, 27, .55);
    border: 1px solid rgba(63, 63, 70, .55);
}

.trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #d4d4d8;
    font-weight: 650;
}

.trust-strip i {
    color: #60a5fa;
}

.trust-strip__sep {
    width: 1px;
    height: 1.5rem;
    background: rgba(63, 63, 70, .75);
}

/* Process */
.process-section {
    background:
        radial-gradient(circle at 25% 0%, rgba(245, 158, 11, .10), transparent 26rem),
        radial-gradient(circle at 75% 100%, rgba(251, 146, 60, .10), transparent 24rem),
        linear-gradient(180deg, #09090b 0%, #111114 100%);
}

.process-track {
    position: relative;
}

.process-line {
    position: absolute;
    top: 4.25rem;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, rgba(37, 99, 235, .35), rgba(139, 92, 246, .35), rgba(16, 185, 129, .35), rgba(245, 158, 11, .35));
}

.process-step {
    position: relative;
    text-align: center;
}

.process-step__icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 1.75rem;
}

.process-step__icon {
    position: relative;
    z-index: 1;
    width: 5rem;
    height: 5rem;
    display: grid;
    place-items: center;
    border-radius: 1.25rem;
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .22);
}

.process-step__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    opacity: .22;
    animation: kjSoftPing 2.6s infinite;
    z-index: -1;
}

.process-step__number {
    position: absolute;
    top: -.65rem;
    right: -.65rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .6rem;
    background: #fff;
    color: #111827;
    font-weight: 900;
    font-size: .82rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
}

.process-step h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: .75rem;
}

.process-step p {
    color: #a1a1aa;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 18rem;
}

.process-step--blue .process-step__icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.process-step--violet .process-step__icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.process-step--emerald .process-step__icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.process-step--amber .process-step__icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.process-stats {
    margin-top: 5rem;
    padding: 2.4rem;
    border-radius: 1.6rem;
    background: rgba(39, 39, 42, .55);
    border: 1px solid rgba(63, 63, 70, .62);
}

.process-stat {
    text-align: center;
}

.process-stat strong {
    display: block;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
    background: linear-gradient(90deg, #fbbf24, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.process-stat span {
    display: block;
    margin-top: .7rem;
    color: #a1a1aa;
}

/* Diagnostic */
.diagnostic-section {
    color: #fff;
    background:
        radial-gradient(circle at 30% 0%, rgba(96, 165, 250, .24), transparent 25rem),
        radial-gradient(circle at 70% 100%, rgba(79, 70, 229, .24), transparent 24rem),
        linear-gradient(135deg, #0f172a, #1e3a8a 52%, #312e81);
}

.diagnostic-section .badge-soft {
    background: rgba(255, 255, 255, .10);
    color: #bfdbfe;
    border-color: rgba(255, 255, 255, .18);
}

.diagnostic-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    color: #dbeafe;
    margin: 2rem 0;
}

.diagnostic-points span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.diagnostic-points i {
    color: #34d399;
}

.diagnostic-form {
    display: none;
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    border-radius: 1.35rem;
    background: rgba(15, 23, 42, .55);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(14px);
}

/* Home portfolio */
.home-portfolio-section {
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .10), transparent 28rem),
        #f8fafc;
    color: #0f172a;
}

.home-portfolio-section .section-title,
.home-portfolio-section .section-heading h2 {
    color: #0f172a;
}

.home-portfolio-section .section-description {
    color: #64748b;
}

.portfolio-filter-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: 3rem;
}

.portfolio-filter {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: .7rem 1rem;
    font-weight: 750;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.portfolio-filter:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}

.portfolio-filter.is-active,
.portfolio-filter.btn-dark {
    background: #0f172a !important;
    color: #fff !important;
    border-color: #0f172a !important;
}

.portfolio-card {
    border-radius: 1.55rem;
    overflow: hidden;
    background: #fff;
    color: #0f172a;
    height: 100%;
    box-shadow: 0 15px 45px rgba(15, 23, 42, .08);
    transition: transform .28s ease, box-shadow .28s ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 75px rgba(15, 23, 42, .14);
}

.portfolio-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.portfolio-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease;
}

.portfolio-card:hover .portfolio-card__image img {
    transform: scale(1.08);
}

.portfolio-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: #fff;
    border-radius: 999px;
    padding: .38rem .75rem;
    font-size: .75rem;
    font-weight: 850;
}

.portfolio-card__badge--pink {
    background: linear-gradient(90deg, #ec4899, #f43f5e);
}

.portfolio-card__badge--violet {
    background: linear-gradient(90deg, #8b5cf6, #9333ea);
}

.portfolio-card__badge--emerald {
    background: linear-gradient(90deg, #10b981, #14b8a6);
}

.portfolio-card__badge--blue {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.portfolio-card__badge--indigo {
    background: linear-gradient(90deg, #4f46e5, #2563eb);
}

.portfolio-card__badge--amber {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    background: linear-gradient(180deg, transparent 20%, rgba(15, 23, 42, .82));
    opacity: 0;
    transition: opacity .25s ease;
}

.portfolio-card:hover .portfolio-card__overlay {
    opacity: 1;
}

.portfolio-card__overlay span {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-weight: 800;
}

.portfolio-card__body {
    padding: 1.45rem;
}

.portfolio-card__client {
    color: #2563eb;
    font-size: .86rem;
    font-weight: 800;
    margin-bottom: .45rem;
}

.portfolio-card h3 {
    color: #0f172a;
    font-size: 1.22rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -.035em;
    margin-bottom: .65rem;
}

.portfolio-card p {
    color: #64748b;
    line-height: 1.62;
    margin-bottom: 1rem;
    font-size: .95rem;
}

.portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.portfolio-tags span {
    display: inline-flex;
    padding: .3rem .62rem;
    border-radius: .55rem;
    background: #f1f5f9;
    color: #475569;
    font-weight: 750;
    font-size: .76rem;
}

/* Clients */
.clients-section {
    background: #09090b;
    border-top: 1px solid rgba(63, 63, 70, .50);
    border-bottom: 1px solid rgba(63, 63, 70, .50);
}

.clients-marquee {
    position: relative;
    overflow: hidden;
}

.clients-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8rem;
    z-index: 2;
    pointer-events: none;
}

.clients-marquee__fade--left {
    left: 0;
    background: linear-gradient(90deg, #09090b, transparent);
}

.clients-marquee__fade--right {
    right: 0;
    background: linear-gradient(270deg, #09090b, transparent);
}

.clients-marquee__track {
    display: flex;
    gap: 1.2rem;
    width: max-content;
    animation: kjMarquee 32s linear infinite;
}

.client-logo-card {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    min-width: max-content;
    padding: .85rem 1.15rem;
    border-radius: 1rem;
    background: rgba(24, 24, 27, .72);
    border: 1px solid rgba(63, 63, 70, .50);
    color: #d4d4d8;
    font-weight: 750;
    transition: background .2s ease, border-color .2s ease;
}

.client-logo-card:hover {
    background: rgba(39, 39, 42, .82);
    border-color: rgba(251, 191, 36, .35);
}

.client-logo-card__mark {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border-radius: .85rem;
    background: linear-gradient(135deg, #3f3f46, #27272a);
    color: #a1a1aa;
    font-weight: 900;
}

/* Team */
.team-section {
    background:
        radial-gradient(circle at 0% 25%, rgba(37, 99, 235, .06), transparent 28rem),
        radial-gradient(circle at 100% 70%, rgba(37, 99, 235, .06), transparent 24rem),
        #111114;
}

.team-card {
    height: 100%;
    padding: 1.35rem;
    border-radius: 1.45rem;
    background: rgba(24, 24, 27, .60);
    border: 1px solid rgba(82, 82, 91, .62);
    transition: transform .28s ease, border-color .28s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    border-color: rgba(96, 165, 250, .38);
}

.team-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 1.15rem;
    margin-bottom: 1.25rem;
}

.team-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.team-card:hover .team-card__image img {
    transform: scale(1.05);
}

.team-card__image a {
    position: absolute;
    inset: auto 50% 1rem auto;
    transform: translateX(50%);
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}

.team-card:hover .team-card__image a {
    opacity: 1;
}

.team-card__image a:hover {
    background: rgba(255, 255, 255, .28);
}

.team-card__body {
    text-align: center;
}

.team-card__body h3 {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
    margin-bottom: .25rem;
}

.team-card__role {
    color: #60a5fa !important;
    font-weight: 800;
    font-size: .9rem;
    margin-bottom: .7rem;
}

.team-card__body p:not(.team-card__role) {
    color: #a1a1aa;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.mini-stat {
    text-align: center;
    padding: 1.25rem;
    border-radius: 1.15rem;
    background: rgba(24, 24, 27, .55);
    border: 1px solid rgba(63, 63, 70, .48);
}

.mini-stat strong {
    display: block;
    color: #60a5fa;
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -.04em;
}

.mini-stat span {
    color: #71717a;
    font-size: .88rem;
}

/* Testimonials */
.testimonial-main {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 1.8rem;
    background: rgba(39, 39, 42, .62);
    border: 1px solid rgba(82, 82, 91, .72);
    box-shadow: var(--kj-shadow-dark);
}

.testimonial-main__quote {
    position: absolute;
    top: -1.5rem;
    left: 2rem;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.7rem;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    box-shadow: var(--kj-shadow-blue);
}

.testimonial-main__stars {
    color: #60a5fa;
    letter-spacing: .16rem;
    margin: 1rem 0 1.5rem;
}

.testimonial-main>p {
    color: #fff;
    font-size: clamp(1.12rem, 2vw, 1.55rem);
    line-height: 1.65;
    margin-bottom: 2rem;
}

.testimonial-main__author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-main__author img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .16);
}

.testimonial-main__author strong {
    display: block;
    color: #fff;
}

.testimonial-main__author span {
    color: #a1a1aa;
    font-size: .9rem;
}

.testimonial-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.testimonial-controls>button {
    width: 2.8rem;
    height: 2.8rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background .2s ease;
}

.testimonial-controls>button:hover {
    background: rgba(255, 255, 255, .16);
}

.testimonial-controls .carousel-indicators {
    position: static;
    margin: 0;
    gap: .45rem;
}

.testimonial-controls .carousel-indicators button {
    width: .55rem;
    height: .55rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .30);
    opacity: 1;
    transition: width .2s ease, background .2s ease;
}

.testimonial-controls .carousel-indicators button.active {
    width: 2rem;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.testimonial-thumb {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(63, 63, 70, .62);
    border-radius: 1.15rem;
    background: rgba(24, 24, 27, .50);
    padding: 1rem;
    color: #fff;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.testimonial-thumb:hover,
.testimonial-thumb.is-active {
    background: rgba(39, 39, 42, .75);
    border-color: rgba(96, 165, 250, .35);
    transform: translateY(-3px);
}

.testimonial-thumb img {
    width: 2.65rem;
    height: 2.65rem;
    object-fit: cover;
    border-radius: 999px;
}

.testimonial-thumb strong {
    display: block;
    font-size: .92rem;
    color: #fff;
}

.testimonial-thumb span {
    display: block;
    color: #a1a1aa;
    font-size: .78rem;
}

.testimonial-thumb p {
    color: #d4d4d8;
    font-size: .88rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* FAQ home */
.faq-section {
    background: #09090b;
}

.faq-list {
    display: grid;
    gap: .85rem;
}

.faq-item {
    border: 1px solid rgba(63, 63, 70, .55);
    background: rgba(24, 24, 27, .75);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease;
}

.faq-item:hover,
.faq-item.is-open,
.faq-item.open {
    border-color: rgba(96, 165, 250, .35);
    background: rgba(24, 24, 27, .95);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    font-weight: 800;
}

.faq-question i {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(39, 39, 42, .85);
    color: #a1a1aa;
    transition: transform .2s ease;
}

.faq-item.is-open .faq-question i,
.faq-item.open .faq-question i {
    transform: rotate(45deg);
    color: #60a5fa;
}

.faq-answer {
    display: none;
    padding: 0 1.35rem 1.25rem;
    color: #a1a1aa;
    line-height: 1.7;
}

/* Products */
.products-section {
    background: #09090b;
}

.product-card {
    display: block;
    height: 100%;
    padding: 1.7rem;
    border-radius: 1.35rem;
    color: #fff;
    text-decoration: none;
    background: rgba(24, 24, 27, .68);
    border: 1px solid rgba(63, 63, 70, .55);
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    color: #fff;
    background: rgba(24, 24, 27, .92);
}

.product-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
    color: #fff;
}

.product-card--purple .product-card__icon {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.product-card--emerald .product-card__icon {
    background: linear-gradient(135deg, #059669, #10b981);
}

.product-card--orange .product-card__icon {
    background: linear-gradient(135deg, #ea580c, #f97316);
}

.product-card--blue .product-card__icon {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.product-card--rose .product-card__icon {
    background: linear-gradient(135deg, #e11d48, #f472b6);
}

.product-card--cyan .product-card__icon {
    background: linear-gradient(135deg, #0891b2, #22d3ee);
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card span {
    display: inline-flex;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, .14);
    color: #60a5fa;
    font-weight: 800;
    font-size: .78rem;
    margin-bottom: .9rem;
}

.product-card h3 {
    font-weight: 900;
    letter-spacing: -.035em;
    color: #fff;
}

.product-card p {
    color: #a1a1aa;
    line-height: 1.65;
}

.product-card strong {
    color: #a1a1aa;
    transition: color .2s ease;
}

.product-card:hover strong {
    color: #fff;
}

/* CTA */
.cta-section {
    background: radial-gradient(circle at 15% 0%, rgba(37, 99, 235, .14), transparent 24rem), linear-gradient(180deg, #09090b, #111114);
    color: #fff;
}

.cta-contact-list {
    display: grid;
    gap: .9rem;
    color: #d4d4d8;
}

.cta-contact-list div {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.cta-contact-list i {
    color: #60a5fa;
}

.cta-form-card {
    padding: clamp(1.4rem, 4vw, 2.5rem);
}

.cta-form-card h3 {
    font-weight: 900;
    letter-spacing: -.035em;
    color: #fff;
}

.cta-section .form-control,
.cta-section .form-select,
.diagnostic-form .form-control,
.diagnostic-form .form-select,
.kj-modal .form-control,
.kj-modal .form-select {
    background-color: rgba(9, 9, 11, .64);
    border-color: rgba(63, 63, 70, .70);
    color: #fff;
    border-radius: .8rem;
    padding: .85rem 1rem;
}

.cta-section .form-control::placeholder,
.diagnostic-form .form-control::placeholder,
.kj-modal .form-control::placeholder {
    color: #71717a;
}

.cta-section .form-control:focus,
.cta-section .form-select:focus,
.diagnostic-form .form-control:focus,
.diagnostic-form .form-select:focus,
.kj-modal .form-control:focus,
.kj-modal .form-select:focus {
    background-color: rgba(9, 9, 11, .86);
    color: #fff;
    border-color: rgba(96, 165, 250, .62);
    box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .16);
}

.cta-section .form-select option,
.diagnostic-form .form-select option,
.kj-modal .form-select option {
    color: #111;
}

/* Modal */
.kj-modal .modal-content {
    background: #111114;
    color: #fff;
    border: 1px solid rgba(82, 82, 91, .70);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.kj-modal .modal-header,
.kj-modal .modal-footer {
    border-color: rgba(63, 63, 70, .55);
}

.kj-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .8;
}

.modal-plan {
    height: 100%;
    padding: 1.25rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(63, 63, 70, .65);
    background: rgba(24, 24, 27, .75);
}

.modal-plan h6 {
    font-weight: 900;
    color: #fff;
}

.modal-plan p {
    color: #a1a1aa;
    margin-bottom: 0;
    font-size: .9rem;
    line-height: 1.55;
}

/* Animations */
@keyframes kjMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes kjPulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
    }

    70% {
        box-shadow: 0 0 0 .55rem rgba(52, 211, 153, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

@keyframes kjSoftPing {
    0% {
        transform: scale(1);
        opacity: .22;
    }

    75%,
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* Home responsive */
@media (max-width: 991.98px) {
    .navbar-kj .navbar-collapse {
        padding: 1rem 0 1.25rem;
        border-top: 1px solid rgba(63, 63, 70, .45);
    }

    .section-heading--split {
        display: block;
    }

    .section-description.text-lg-end {
        text-align: left !important;
        margin-top: 1.25rem;
    }

    .hero.home-hero {
        min-height: 92vh;
    }

    .hero.home-hero .hero-title {
        font-size: clamp(3.2rem, 16vw, 6rem);
    }

    .service-row {
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }

    .service-row__meta {
        grid-column: 1 / -1;
    }

    .clients-marquee__fade {
        width: 4rem;
    }

    .process-line {
        display: none;
    }

    .trust-strip__sep {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .section-pad {
        padding: 4.25rem 0;
    }

    .section-heading {
        margin-bottom: 2.6rem;
    }

    .hero.home-hero {
        padding-top: 5.75rem;
    }

    .hero__topline {
        gap: .65rem;
        letter-spacing: .09em;
        flex-wrap: wrap;
    }

    .hero.home-hero .hero-title {
        letter-spacing: -.075em;
    }

    .hero__stats {
        margin-top: 3rem !important;
        padding-top: 2rem !important;
    }

    .service-row {
        padding: 1.25rem .75rem;
        margin: 0 -.25rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    .trust-strip {
        justify-content: flex-start;
    }

    .portfolio-filter {
        padding: .58rem .82rem;
        font-size: .82rem;
    }

    .testimonial-main__author {
        align-items: flex-start;
    }
}

/* ==========================================================
   HERO HOME FIX - K&J
   Compatible con pages/home.blade.php actual
   ========================================================== */

.hero.home-hero {
    position: relative;
    min-height: 100vh;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    overflow: hidden;
    background: #09090b;
}

.hero.home-hero::before {
    display: none;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .20;
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 9, 11, .64) 0%, rgba(9, 9, 11, .44) 38%, #09090b 100%),
        linear-gradient(90deg, rgba(9, 9, 11, .86) 0%, rgba(9, 9, 11, .25) 48%, rgba(9, 9, 11, .86) 100%);
}

.hero__glow {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(80px);
}

.hero__glow--top {
    top: -18rem;
    right: -12rem;
    width: 44rem;
    height: 44rem;
    background: rgba(37, 99, 235, .12);
}

.hero__glow--bottom {
    left: -14rem;
    bottom: -18rem;
    width: 36rem;
    height: 36rem;
    background: rgba(39, 39, 42, .70);
}

.hero__container {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
}

.hero__availability {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #a1a1aa;
    font-size: .74rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .16em;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.hero__pulse {
    width: .55rem;
    height: .55rem;
    flex: 0 0 .55rem;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
    animation: kjHeroPulse 2s infinite;
}

.hero__line {
    width: 3rem;
    height: 1px;
    background: rgba(161, 161, 170, .38);
}

.hero__content {
    flex: 1;
    min-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 0 4rem;
}

.hero__eyebrow {
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin-bottom: 2rem;
}

.hero.home-hero .hero-title {
    margin: 0 0 2rem;
    color: #fff;
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.08em;
}

.hero.home-hero .text-gradient {
    background: linear-gradient(90deg, #60a5fa 0%, #93c5fd 48%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero.home-hero .text-muted-soft {
    color: #71717a !important;
}

.hero__lead {
    width: min(100%, 43rem);
    margin: 0 auto 2.5rem;
    color: #a1a1aa;
    font-size: clamp(1rem, 1.75vw, 1.22rem);
    line-height: 1.75;
}

.hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-hero-primary {
    min-height: 3.45rem;
    padding-inline: 1.9rem;
    border: 0;
    color: #09090b;
    font-weight: 850;
    box-shadow: 0 24px 70px rgba(255, 255, 255, .10);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.btn-hero-primary:hover {
    color: #09090b;
    background: #f4f4f5;
    transform: translateY(-2px);
    box-shadow: 0 28px 80px rgba(255, 255, 255, .14);
}

.btn-hero-secondary {
    min-height: 3.45rem;
    padding-inline: 1.9rem;
    border-color: rgba(161, 161, 170, .55);
    color: #d4d4d8;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(10px);
    font-weight: 800;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.btn-hero-secondary:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-2px);
}

.hero__stats {
    width: min(100%, 34rem);
    margin: 4.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(63, 63, 70, .45);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.hero__stat {
    text-align: center;
}

.hero__stat-number {
    display: block;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.04em;
    margin-bottom: .45rem;
}

.hero__stat small {
    display: block;
    color: #71717a;
    font-size: .66rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.hero__marquee {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid rgba(63, 63, 70, .45);
    padding: 1rem 0;
}

.hero__marquee-track {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    width: max-content;
    white-space: nowrap;
    animation: kjHeroMarquee 34s linear infinite;
}

.hero__marquee-track span {
    color: #52525b;
    font-size: .74rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .15em;
}

@keyframes kjHeroMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes kjHeroPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
    }

    70% {
        box-shadow: 0 0 0 .6rem rgba(52, 211, 153, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

@media (max-width: 991.98px) {
    .hero.home-hero {
        min-height: 92vh;
        padding-top: 74px;
    }

    .hero__container {
        padding-top: 1.25rem;
    }

    .hero__content {
        min-height: calc(92vh - 150px);
        padding: 2.5rem 0 3.5rem;
    }

    .hero.home-hero .hero-title {
        font-size: clamp(3.15rem, 15vw, 6.3rem);
    }

    .hero__availability {
        gap: .75rem;
        letter-spacing: .11em;
    }
}

@media (max-width: 575.98px) {
    .hero.home-hero {
        min-height: 100svh;
        padding-top: 70px;
    }

    .hero__availability {
        justify-content: flex-start;
        flex-wrap: wrap;
        font-size: .68rem;
    }

    .hero__content {
        min-height: calc(100svh - 145px);
        padding: 2rem 0 3rem;
    }

    .hero__eyebrow {
        font-size: .68rem;
        letter-spacing: .22em;
        margin-bottom: 1.4rem;
    }

    .hero.home-hero .hero-title {
        font-size: clamp(3rem, 17vw, 4.8rem);
        letter-spacing: -.075em;
        margin-bottom: 1.5rem;
    }

    .hero__lead {
        font-size: .98rem;
        margin-bottom: 2rem;
    }

    .hero__actions {
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__stats {
        margin-top: 3rem;
        padding-top: 1.6rem;
        gap: .5rem;
    }

    .hero__stat-number {
        font-size: 1.45rem;
    }

    .hero__stat small {
        font-size: .58rem;
        letter-spacing: .1em;
    }

    .hero__marquee-track {
        gap: 1.5rem;
        animation-duration: 26s;
    }
}

/* ==========================================================
   HOME FINAL VISUAL OVERRIDE - K&J Open Solutions
   Guía visual: home oscuro + portfolio claro + barra scroll
   ========================================================== */

:root {
    --kj-bg: #09090b;
    --kj-bg-2: #111114;
    --kj-card: rgba(24, 24, 27, .78);
    --kj-card-2: rgba(39, 39, 42, .55);
    --kj-line: rgba(63, 63, 70, .64);
    --kj-muted: #a1a1aa;
    --kj-muted-2: #71717a;
    --kj-blue: #2563eb;
    --kj-blue-2: #60a5fa;
    --kj-cyan: #67e8f9;
    --kj-amber: #f59e0b;
}

.kj-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 2000;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #2563eb, #60a5fa, #67e8f9);
    box-shadow: 0 0 18px rgba(96, 165, 250, .65);
}

body.home-page {
    background: var(--kj-bg);
    color: #fff;
}

body.home-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 88% 0%, rgba(37, 99, 235, .09), transparent 34rem),
        radial-gradient(circle at 0% 100%, rgba(39, 39, 42, .85), transparent 34rem),
        #09090b;
}

body.home-page .container {
    max-width: 1180px;
}

body.home-page .navbar-kj {
    background: rgba(9, 9, 11, .82);
    border-bottom: 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.home-page .navbar-kj.is-scrolled {
    background: rgba(9, 9, 11, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

body.home-page .navbar-kj .navbar {
    min-height: 80px;
}

body.home-page .navbar-kj .nav-link {
    color: #a1a1aa;
    font-size: .875rem;
    font-weight: 650;
    padding: .55rem .95rem;
    border-radius: 999px;
}

body.home-page .navbar-kj .nav-link:hover,
body.home-page .navbar-kj .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .035);
}

body.home-page .navbar-kj .btn-primary {
    min-height: 44px;
    padding-inline: 1.45rem;
    border: 0;
    border-radius: 999px;
    background: #2563eb;
    font-weight: 750;
    box-shadow: 0 18px 36px rgba(37, 99, 235, .22);
}

body.home-page .navbar-kj .btn-primary:hover {
    background: #3b82f6;
    box-shadow: 0 20px 44px rgba(59, 130, 246, .28);
}

.logo-kj {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .26);
}

.search-trigger {
    min-height: 42px;
    border-color: rgba(63, 63, 70, .85);
    background: rgba(39, 39, 42, .52);
}

/* Hero */
body.home-page .hero.home-hero {
    min-height: 100vh;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    background: #09090b;
}

body.home-page .hero__media::after {
    background:
        linear-gradient(180deg, rgba(9, 9, 11, .62) 0%, rgba(9, 9, 11, .42) 42%, #09090b 100%),
        linear-gradient(90deg, rgba(9, 9, 11, .88) 0%, rgba(9, 9, 11, .12) 50%, rgba(9, 9, 11, .88) 100%);
}

body.home-page .hero__media img {
    opacity: .20;
    filter: saturate(.85) contrast(1.05);
}

body.home-page .hero__container {
    flex: 1;
    padding-top: 2rem;
}

body.home-page .hero__availability {
    margin-bottom: 0;
    color: #a1a1aa;
    font-size: .73rem;
    letter-spacing: .17em;
}

body.home-page .hero__content {
    min-height: calc(100vh - 178px);
    padding: 2rem 0 3.5rem;
}

body.home-page .hero__eyebrow {
    color: #71717a;
    letter-spacing: .30em;
    margin-bottom: 2rem;
}

body.home-page .hero.home-hero .hero-title {
    font-size: clamp(3.6rem, 10vw, 8.85rem);
    line-height: .88;
    letter-spacing: -.01em;
    margin-bottom: 2rem;
}

body.home-page .hero__lead {
    max-width: 42.5rem;
    color: #a1a1aa;
    margin-bottom: 2.6rem;
}

body.home-page .btn-hero-primary,
body.home-page .btn-hero-secondary {
    min-height: 56px;
    padding: .9rem 1.95rem;
    border-radius: 999px;
}

body.home-page .hero__stats {
    width: min(100%, 34rem);
    margin-top: 4.65rem;
}

body.home-page .hero__marquee {
    margin-top: auto;
}

/* Shared home sections */
body.home-page .section-pad {
    padding: clamp(5.5rem, 8vw, 8rem) 0;
}

body.home-page .section-dark {
    background: #09090b;
}

body.home-page .section-alt {
    background: linear-gradient(180deg, #09090b 0%, #111113 100%);
}

body.home-page .section-heading {
    margin-bottom: 4.4rem;
}

body.home-page .section-heading--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

body.home-page .section-kicker {
    color: #71717a;
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.home-page .section-title {
    color: #fff;
    font-size: clamp(2.45rem, 5.2vw, 4.65rem);
    line-height: .98;
    letter-spacing: 0.02em;
    font-weight: 900;
}

body.home-page .section-title--xl {
    font-size: clamp(3.1rem, 6.8vw, 5.7rem);
}

body.home-page .section-description {
    color: #a1a1aa;
    line-height: 1.75;
}

body.home-page .badge-soft,
body.home-page .badge.bg-primary-subtle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: .45rem .95rem;
    border-radius: 999px;
    border: 1px solid rgba(63, 63, 70, .55);
    background: rgba(39, 39, 42, .86) !important;
    color: #60a5fa !important;
    font-size: .86rem;
    font-weight: 800;
}

.text-warning-gradient {
    background: linear-gradient(90deg, #fbbf24, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.text-primary-gradient {
    background: linear-gradient(90deg, #2563eb, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* Services */
body.home-page .services-section {
    background: #09090b;
}

body.home-page .service-list {
    border-top: 1px solid rgba(63, 63, 70, .55);
}

body.home-page .service-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.6rem;
    align-items: center;
    padding: 1.72rem 1rem;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(63, 63, 70, .55);
    border-radius: 1.1rem;
    color: #fff;
}

body.home-page .service-row:hover {
    color: #fff;
    background: rgba(24, 24, 27, .62);
    transform: translateY(-2px);
}

body.home-page .service-row__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.home-page .service-row__number {
    width: 1.75rem;
    color: #52525b;
    font-size: .76rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.home-page .icon-box,
body.home-page .service-row__icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid rgba(63, 63, 70, .75);
    background: rgba(24, 24, 27, .85);
    color: #60a5fa;
    font-size: 1.28rem;
}

body.home-page .service-row h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -.035em;
}

body.home-page .service-row p {
    max-width: 43rem;
    margin: 0;
    color: #71717a;
    line-height: 1.62;
}

body.home-page .service-tags {
    gap: .65rem;
}

body.home-page .service-tags span {
    color: #71717a;
    font-size: .76rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.home-page .service-row__arrow {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(63, 63, 70, .8);
    border-radius: 999px;
    color: #71717a;
}

body.home-page .service-row:hover .service-row__arrow {
    color: #fff;
    border-color: rgba(96, 165, 250, .5);
    transform: translate(2px, -2px);
}

/* Benefits */
body.home-page .benefits-section {
    background:
        radial-gradient(circle at 25% 5%, rgba(37, 99, 235, .07), transparent 32rem),
        radial-gradient(circle at 75% 95%, rgba(37, 99, 235, .06), transparent 30rem),
        #09090b;
}

body.home-page .feature-card {
    padding: 2rem;
    border-radius: 1.65rem;
    background: rgba(24, 24, 27, .80);
    border: 1px solid rgba(63, 63, 70, .72);
    box-shadow: none;
}

body.home-page .feature-card:hover {
    border-color: rgba(96, 165, 250, .36);
    transform: translateY(-5px);
}

body.home-page .feature-card .icon-box {
    border-color: rgba(96, 165, 250, .12);
    background: rgba(37, 99, 235, .11);
}

body.home-page .feature-card h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
}

body.home-page .feature-card__metric {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(63, 63, 70, .65);
}

body.home-page .feature-card__metric span:first-child {
    color: #60a5fa;
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -.04em;
}

body.home-page .feature-card__metric small {
    color: #71717a;
}

body.home-page .trust-strip {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 3.8rem auto 0;
    gap: 1.7rem;
    justify-content: center;
}

/* Process */
body.home-page .process-section {
    background:
        radial-gradient(circle at 25% 0%, rgba(245, 158, 11, .12), transparent 30rem),
        radial-gradient(circle at 75% 100%, rgba(249, 115, 22, .08), transparent 28rem),
        linear-gradient(180deg, #09090b, #111113);
}

body.home-page .process-line {
    position: absolute;
    top: 19.4rem;
    left: 13%;
    right: 13%;
    height: 2px;
    background: linear-gradient(90deg, rgba(59, 130, 246, .35), rgba(139, 92, 246, .35), rgba(16, 185, 129, .35), rgba(245, 158, 11, .35));
}

body.home-page .process-step {
    position: relative;
    text-align: center;
    padding: .5rem 1rem;
}

body.home-page .process-step__icon {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 1.25rem;
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .32);
}

body.home-page .process-step--blue .process-step__icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

body.home-page .process-step--violet .process-step__icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

body.home-page .process-step--emerald .process-step__icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

body.home-page .process-step--amber .process-step__icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

body.home-page .process-step__icon span {
    position: absolute;
    top: -.55rem;
    right: -.55rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .6rem;
    background: #fff;
    color: #2563eb;
    font-size: .78rem;
    font-weight: 900;
}

body.home-page .process-step h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
}

body.home-page .process-step p {
    color: #a1a1aa;
    line-height: 1.65;
}

body.home-page .stats-panel {
    margin-top: 5.5rem;
    padding: 2.1rem;
    border-radius: 1.6rem;
    background: rgba(39, 39, 42, .58);
    border: 1px solid rgba(63, 63, 70, .72);
}

body.home-page .stats-panel strong {
    display: block;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.05em;
    background: linear-gradient(90deg, #fbbf24, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.home-page .stats-panel span {
    display: block;
    margin-top: .55rem;
    color: #a1a1aa;
    font-weight: 650;
}

/* Diagnostic */
body.home-page .diagnostic-section {
    background: linear-gradient(135deg, #0f172a, #1e3a8a, #312e81);
    color: #fff;
}

body.home-page .diagnostic-section__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 10%, rgba(59, 130, 246, .25), transparent 26rem),
        radial-gradient(circle at 72% 95%, rgba(99, 102, 241, .22), transparent 24rem);
}

body.home-page .icon-box--glass {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .10);
    color: #bfdbfe;
}

body.home-page .diagnostic-section .lead {
    color: #dbeafe;
}

body.home-page .diagnostic-checks span {
    color: #dbeafe;
    font-weight: 650;
}

body.home-page .diagnostic-checks i {
    color: #34d399;
    margin-right: .35rem;
}

/* Portfolio */
body.home-page .portfolio-section {
    background:
        radial-gradient(circle at 88% 0%, rgba(191, 219, 254, .65), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(199, 210, 254, .55), transparent 30rem),
        #f8fafc;
    color: #0f172a;
}

body.home-page .portfolio-section .section-title,
body.home-page .portfolio-section .text-dark {
    color: #0f172a !important;
}

body.home-page .portfolio-section .section-description,
body.home-page .text-slate {
    color: #475569 !important;
}

body.home-page .portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
    margin-bottom: 3rem;
}

body.home-page .portfolio-filter {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1.05rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: .9rem;
    font-weight: 750;
    transition: .2s ease;
}

body.home-page .portfolio-filter:hover {
    background: #f1f5f9;
}

body.home-page .portfolio-filter.is-active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

body.home-page .portfolio-card {
    display: block;
    overflow: hidden;
    height: 100%;
    border-radius: 1.55rem;
    background: #fff;
    color: #0f172a;
    border: 0;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

body.home-page .portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
}

body.home-page .portfolio-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

body.home-page .portfolio-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

body.home-page .portfolio-card:hover .portfolio-card__image img {
    transform: scale(1.08);
}

body.home-page .portfolio-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .42rem .75rem;
    border-radius: 999px;
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
}

body.home-page .portfolio-card__badge--blue {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

body.home-page .portfolio-card__badge--violet {
    background: linear-gradient(90deg, #8b5cf6, #a855f7);
}

body.home-page .portfolio-card__badge--emerald {
    background: linear-gradient(90deg, #10b981, #14b8a6);
}

body.home-page .portfolio-card__badge--pink {
    background: linear-gradient(90deg, #ec4899, #f43f5e);
}

body.home-page .portfolio-card__badge--amber {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

body.home-page .portfolio-card__badge--indigo {
    background: linear-gradient(90deg, #6366f1, #3b82f6);
}

body.home-page .portfolio-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.2rem;
    color: #fff;
    opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .82));
    transition: opacity .3s ease;
}

body.home-page .portfolio-card:hover .portfolio-card__overlay {
    opacity: 1;
}

body.home-page .portfolio-card__overlay i {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
}

body.home-page .portfolio-card__body {
    padding: 1.45rem;
}

body.home-page .portfolio-card__body small {
    color: #2563eb;
    font-weight: 800;
}

body.home-page .portfolio-card__body h3 {
    margin: .45rem 0 .65rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 900;
}

body.home-page .portfolio-card__body p {
    color: #475569;
    line-height: 1.6;
}

body.home-page .portfolio-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

body.home-page .portfolio-card__tags span {
    padding: .35rem .55rem;
    border-radius: .55rem;
    background: #f1f5f9;
    color: #475569;
    font-size: .76rem;
    font-weight: 750;
}

/* Clients */
body.home-page .clients-section {
    background: #09090b !important;
    border-color: rgba(63, 63, 70, .55) !important;
}

body.home-page .clients-marquee {
    position: relative;
    overflow: hidden;
}

body.home-page .clients-marquee__track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: kjHomeClients 30s linear infinite;
}

body.home-page .client-pill {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-width: 15rem;
    padding: .9rem 1.35rem;
    border: 1px solid rgba(63, 63, 70, .55);
    border-radius: 1rem;
    background: rgba(39, 39, 42, .50);
    color: #d4d4d8;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

body.home-page a.client-pill:hover {
    background: rgba(39, 39, 42, .78);
    border-color: rgba(96, 165, 250, .35);
    transform: translateY(-2px);
}

body.home-page .client-pill span {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: .75rem;
    background: linear-gradient(135deg, #3f3f46, #27272a);
    color: #a1a1aa;
    font-weight: 900;
    flex: 0 0 auto;
    overflow: hidden;
}

body.home-page .client-pill span img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: .25rem;
}

body.home-page .client-pill strong {
    color: #d4d4d8;
    white-space: nowrap;
}

body.home-page .client-pill small {
    display: block;
    max-width: 12rem;
    color: #71717a;
    font-size: .75rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.home-page .clients-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 8rem;
    pointer-events: none;
}

body.home-page .clients-marquee__fade--left {
    left: 0;
    background: linear-gradient(90deg, #09090b, transparent);
}

body.home-page .clients-marquee__fade--right {
    right: 0;
    background: linear-gradient(270deg, #09090b, transparent);
}

@keyframes kjHomeClients {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Team */
body.home-page .team-section {
    background:
        radial-gradient(circle at 0% 30%, rgba(37, 99, 235, .06), transparent 28rem),
        #111113;
}

body.home-page .team-card {
    height: 100%;
    padding: 1.35rem;
    border: 1px solid rgba(63, 63, 70, .70);
    border-radius: 1.65rem;
    background: rgba(39, 39, 42, .48);
}

body.home-page .team-card:hover {
    border-color: rgba(96, 165, 250, .36);
    transform: translateY(-5px);
}

body.home-page .team-card__image {
    position: relative;
    overflow: hidden;
    border-radius: 1.15rem;
    aspect-ratio: 1 / 1;
}

body.home-page .team-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.home-page .team-card__image a {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translate(-50%, .5rem);
    opacity: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

body.home-page .team-card:hover .team-card__image a {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.home-page .team-card__body {
    text-align: center;
    padding: 1.25rem .35rem .25rem;
}

body.home-page .team-card__body h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
}

body.home-page .team-card__role {
    color: #60a5fa !important;
    font-weight: 800;
}

body.home-page .team-card__body p:not(.team-card__role) {
    color: #a1a1aa;
    line-height: 1.58;
}

body.home-page .mini-stat {
    padding: 1.4rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(63, 63, 70, .60);
    background: rgba(39, 39, 42, .34);
    text-align: center;
}

body.home-page .mini-stat strong {
    display: block;
    color: #60a5fa;
    font-size: 1.75rem;
    font-weight: 950;
}

body.home-page .mini-stat span {
    color: #71717a;
}

/* Testimonials */
body.home-page .testimonials-section {
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .07), transparent 32rem),
        linear-gradient(135deg, #111113, #18181b, #111113);
}

body.home-page .testimonial-main {
    position: relative;
    padding: 3rem;
    border-radius: 1.65rem;
    border: 1px solid rgba(63, 63, 70, .72);
    background: rgba(39, 39, 42, .50);
}

body.home-page .testimonial-main__quote {
    position: absolute;
    top: -1.35rem;
    left: 2rem;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
}

body.home-page .testimonial-main__stars {
    color: #60a5fa;
    letter-spacing: .12em;
    margin-bottom: 1.25rem;
}

body.home-page .testimonial-main>p {
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.55;
}

body.home-page .testimonial-main__author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.home-page .testimonial-main__author img,
body.home-page .testimonial-thumb img {
    object-fit: cover;
    border-radius: 999px;
}

body.home-page .testimonial-main__author img {
    width: 3.5rem;
    height: 3.5rem;
}

body.home-page .testimonial-main__author strong {
    color: #fff;
    display: block;
}

body.home-page .testimonial-main__author span {
    color: #a1a1aa;
    display: block;
}

body.home-page .testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

body.home-page .testimonial-controls>button {
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

body.home-page .testimonial-controls .carousel-indicators {
    position: static;
    margin: 0;
    gap: .45rem;
}

body.home-page .testimonial-controls .carousel-indicators button {
    width: .55rem;
    height: .55rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .30);
}

body.home-page .testimonial-controls .carousel-indicators button.active {
    width: 2rem;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

body.home-page .testimonial-thumb {
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 1.4rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(63, 63, 70, .70);
    background: rgba(39, 39, 42, .34);
    color: #fff;
}

body.home-page .testimonial-thumb.is-active,
body.home-page .testimonial-thumb:hover {
    background: rgba(39, 39, 42, .72);
    border-color: rgba(96, 165, 250, .35);
}

body.home-page .testimonial-thumb img {
    width: 2.5rem;
    height: 2.5rem;
}

body.home-page .testimonial-thumb strong {
    display: block;
    color: #fff;
}

body.home-page .testimonial-thumb span,
body.home-page .testimonial-thumb p {
    color: #a1a1aa;
}

body.home-page .testimonial-thumb p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* FAQ */
body.home-page .faq-section {
    background:
        radial-gradient(circle at 50% 38%, rgba(37, 99, 235, .08), transparent 24rem),
        #09090b;
}

body.home-page .faq-item {
    overflow: hidden;
    margin-bottom: .85rem;
    border: 1px solid rgba(63, 63, 70, .72);
    border-radius: 1rem;
    background: rgba(24, 24, 27, .82);
}

body.home-page .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    font-weight: 850;
}

body.home-page .faq-question i {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #27272a;
    color: #a1a1aa;
    transition: transform .2s ease;
}

body.home-page .faq-item.open .faq-question i,
body.home-page .faq-item.is-open .faq-question i {
    transform: rotate(45deg);
}

body.home-page .faq-answer {
    padding: 0 1.35rem 1.25rem;
    color: #a1a1aa;
    line-height: 1.7;
}

/* Products */
body.home-page .products-section {
    background:
        radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .06), transparent 34rem),
        #09090b;
}

body.home-page .product-card {
    position: relative;
    display: block;
    min-height: 100%;
    overflow: hidden;
    padding: 2rem;
    border-radius: 1.55rem;
    border: 1px solid rgba(63, 63, 70, .70);
    background: rgba(24, 24, 27, .60);
    color: #fff;
    text-decoration: none;
}

body.home-page .product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: .38rem;
}

body.home-page .product-card--purple::before {
    background: linear-gradient(90deg, #7c3aed, #9333ea);
}

body.home-page .product-card--emerald::before {
    background: linear-gradient(90deg, #059669, #0d9488);
}

body.home-page .product-card--orange::before {
    background: linear-gradient(90deg, #f97316, #dc2626);
}

body.home-page .product-card--blue::before {
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
}

body.home-page .product-card--rose::before {
    background: linear-gradient(90deg, #e11d48, #f472b6);
}

body.home-page .product-card--cyan::before {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
}

body.home-page .product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(96, 165, 250, .25);
    color: #fff;
}

body.home-page .product-card__icon {
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    margin-bottom: 1.4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.4rem;
    overflow: hidden;
}

body.home-page .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: .7rem;
}

body.home-page .product-card>span {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #a1a1aa;
    font-size: .78rem;
    font-weight: 850;
}

body.home-page .product-card h3 {
    font-size: 1.55rem;
    font-weight: 950;
}

body.home-page .product-card p {
    color: #a1a1aa;
    line-height: 1.65;
}

body.home-page .product-card strong {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #d4d4d8;
}

/* CTA + Footer */
body.home-page .cta-section {
    background:
        linear-gradient(135deg, rgba(24, 24, 27, .96), rgba(39, 39, 42, .90)),
        #111113;
}

body.home-page .cta-contact-list {
    display: grid;
    gap: 1rem;
}

body.home-page .cta-contact-list div {
    display: flex;
    align-items: center;
    gap: .9rem;
    color: #fff;
}

body.home-page .cta-contact-list i {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: .9rem;
    background: #18181b;
    border: 1px solid rgba(63, 63, 70, .75);
    color: #60a5fa;
}

body.home-page .cta-form-card {
    padding: 2rem;
    border-radius: 1.65rem;
    background: rgba(24, 24, 27, .90);
}

body.home-page .cta-section .form-control,
body.home-page .cta-section .form-select {
    min-height: 3.2rem;
    border-radius: .9rem;
    border-color: rgba(63, 63, 70, .9);
    background: #09090b;
    color: #fff;
}

body.home-page .cta-section textarea.form-control {
    min-height: 8rem;
}

body.home-page .footer {
    padding-top: 4.6rem;
    background: #09090b;
    border-top: 1px solid rgba(63, 63, 70, .55);
}

body.home-page .footer h6 {
    color: #fff;
    font-weight: 850;
}

body.home-page .footer .text-secondary,
body.home-page .footer a {
    color: #a1a1aa !important;
}

body.home-page .footer a:hover {
    color: #fff !important;
}

@media (max-width: 991.98px) {
    body.home-page .section-heading--split {
        display: block;
    }

    body.home-page .section-description.text-lg-end {
        text-align: left !important;
        margin-top: 1.25rem;
    }

    body.home-page .service-row {
        grid-template-columns: 1fr auto;
    }

    body.home-page .service-row__meta {
        grid-column: 1 / -1;
    }

    body.home-page .process-line {
        display: none;
    }
}

@media (max-width: 575.98px) {
    body.home-page .hero.home-hero {
        min-height: 100svh;
    }

    body.home-page .hero__content {
        min-height: calc(100svh - 150px);
    }

    body.home-page .hero.home-hero .hero-title {
        font-size: clamp(3rem, 17vw, 4.85rem);
    }

    body.home-page .hero__actions .btn {
        width: 100%;
    }

    body.home-page .hero__stats {
        gap: .5rem;
    }

    body.home-page .section-pad {
        padding: 4.6rem 0;
    }

    body.home-page .section-heading {
        margin-bottom: 2.8rem;
    }

    body.home-page .service-row {
        padding: 1.2rem .55rem;
    }

    body.home-page .feature-card,
    body.home-page .testimonial-main,
    body.home-page .product-card,
    body.home-page .cta-form-card {
        padding: 1.45rem;
    }

    body.home-page .clients-marquee__fade {
        width: 3rem;
    }
}

/* ==========================================================
   Site settings + services page polish
   ========================================================== */
.site-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    object-fit: contain;
    /* background: rgba(255, 255, 255, .08); */
    padding: .25rem;
}

.search-modal__body {
    scrollbar-width: thin;
    scrollbar-color: rgba(113, 113, 122, .55) transparent;
}

.search-modal__body::-webkit-scrollbar {
    width: 7px;
}

.search-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.search-modal__body::-webkit-scrollbar-thumb {
    background: rgba(113, 113, 122, .45);
    border-radius: 999px;
    border: 2px solid #18181b;
}

.search-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(161, 161, 170, .7);
}

.site-settings-card .nav-pills {
    gap: .6rem;
}

.site-settings-card .nav-pills .nav-link {
    color: #374151;
    border-radius: 999px;
    background: #f3f4f6;
    font-weight: 700;
}

.site-settings-card .nav-pills .nav-link.active {
    background: #111827;
    color: #fff;
}

.site-settings-preview {
    width: 100%;
    max-width: 260px;
    min-height: 110px;
    border: 1px dashed #d1d5db;
    border-radius: 1rem;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.site-settings-preview img {
    max-width: 100%;
    max-height: 170px;
    object-fit: contain;
}

body.services-page {
    background: #09090b;
    color: #fff;
}

body.services-page .navbar-kj {
    background: rgba(9, 9, 11, .82);
    border-bottom: 0;
    backdrop-filter: blur(14px);
}

.services-hero {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 5rem;
    background: linear-gradient(135deg, #09090b 0%, #18181b 48%, #09090b 100%);
}

.services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 86% 5%, rgba(37, 99, 235, .13), transparent 30rem),
        radial-gradient(circle at 0% 100%, rgba(79, 70, 229, .1), transparent 24rem);
    pointer-events: none;
}

.services-hero__content {
    max-width: 780px;
}

.services-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    margin-bottom: 1.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #93c5fd;
    font-size: .9rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.services-hero h1 {
    max-width: 760px;
    margin: 0 0 1.6rem;
    color: #fff;
    font-size: clamp(3.2rem, 7vw, 5.4rem);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.055em;
}

.services-hero h1 span {
    display: inline;
    background: linear-gradient(90deg, #60a5fa, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-hero p {
    max-width: 760px;
    margin: 0;
    color: #cbd5e1;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.55;
}

.services-showcase {
    padding: clamp(5rem, 7vw, 7rem) 0;
    background: #09090b;
}

.services-showcase__list {
    display: grid;
    gap: clamp(4rem, 6vw, 6rem);
}

.service-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.service-feature--reverse .service-feature__content {
    order: 2;
}

.service-feature--reverse .service-feature__visual {
    order: 1;
}

.service-feature__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.15rem;
    color: #fff;
    font-size: 2rem;
    box-shadow: 0 18px 42px rgba(37, 99, 235, .18);
}

.service-feature h2 {
    margin-bottom: 1rem;
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -.035em;
}

.service-feature p {
    margin-bottom: 1.55rem;
    color: #a1a1aa;
    font-size: 1.12rem;
    line-height: 1.65;
}

.service-feature__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1rem;
    margin-bottom: 2rem;
}

.service-feature__checks div {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    color: #d4d4d8;
    font-size: .95rem;
}

.service-feature__checks i {
    color: #60a5fa;
    flex-shrink: 0;
}

.service-feature__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-dark-soft {
    color: #fff;
    background: #27272a;
    border: 1px solid #3f3f46;
}

.btn-dark-soft:hover {
    color: #fff;
    background: #3f3f46;
}

.service-feature__visual {
    aspect-ratio: 4 / 3;
    border-radius: 1.65rem;
    padding: 4px;
}

.service-feature__visual-inner {
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    background: #18181b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-feature__visual i {
    color: #3f3f46;
    font-size: clamp(5rem, 9vw, 7rem);
}

.service-feature--blue-cyan .service-feature__icon,
.service-feature--blue-cyan .service-feature__visual {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.service-feature--violet-purple .service-feature__icon,
.service-feature--violet-purple .service-feature__visual {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.service-feature--amber-orange .service-feature__icon,
.service-feature--amber-orange .service-feature__visual {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.service-feature--emerald-teal .service-feature__icon,
.service-feature--emerald-teal .service-feature__visual {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.service-feature--pink-rose .service-feature__icon,
.service-feature--pink-rose .service-feature__visual {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
}

.service-feature--indigo-blue .service-feature__icon,
.service-feature--indigo-blue .service-feature__visual {
    background: linear-gradient(135deg, #6366f1, #3b82f6);
}

.services-final-cta {
    padding: 5rem 0;
    background: #18181b;
}

.services-final-cta h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: .9rem;
}

.services-final-cta p {
    max-width: 680px;
    margin: 0 auto 2rem;
    color: #a1a1aa;
    font-size: 1.1rem;
}

@media (max-width: 991.98px) {
    .services-hero {
        padding-top: 7rem;
    }

    .service-feature,
    .service-feature--reverse {
        grid-template-columns: 1fr;
    }

    .service-feature--reverse .service-feature__content,
    .service-feature--reverse .service-feature__visual {
        order: initial;
    }
}

@media (max-width: 575.98px) {
    .services-hero h1 {
        font-size: clamp(2.6rem, 14vw, 3.7rem);
    }

    .service-feature__checks {
        grid-template-columns: 1fr;
    }

    .service-feature__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================
   Admin color fixes
   Bootstrap headings use --bs-heading-color. The public site
   body is white text, so the admin must redefine Bootstrap
   text variables inside the admin shell.
   ========================================================== */
body.admin-shell {
    color: #111827;
    --bs-body-color: #111827;
    --bs-body-bg: #f3f4f6;
    --bs-heading-color: #0f172a;
    --bs-secondary-color: #6b7280;
    --bs-tertiary-color: #9ca3af;
    --bs-border-color: #e5e7eb;
    --bs-link-color: #2563eb;
    --bs-link-hover-color: #1d4ed8;
}

body.admin-shell h1,
body.admin-shell h2,
body.admin-shell h3,
body.admin-shell h4,
body.admin-shell h5,
body.admin-shell h6,
body.admin-shell .h1,
body.admin-shell .h2,
body.admin-shell .h3,
body.admin-shell .h4,
body.admin-shell .h5,
body.admin-shell .h6 {
    color: var(--bs-heading-color);
}

body.admin-shell .admin-card,
body.admin-shell .admin-top,
body.admin-shell .modal-content,
body.admin-shell .dropdown-menu {
    color: var(--bs-body-color);
}

body.admin-shell label,
body.admin-shell .form-label,
body.admin-shell .form-check-label,
body.admin-shell .col-form-label,
body.admin-shell .form-text,
body.admin-shell .table,
body.admin-shell .table th,
body.admin-shell .table td {
    color: var(--bs-body-color);
}

body.admin-shell .form-text,
body.admin-shell small.text-secondary,
body.admin-shell .text-secondary {
    color: var(--bs-secondary-color) !important;
}

body.admin-shell .form-control,
body.admin-shell .form-select {
    color: #111827;
    background-color: #fff;
    border-color: #d1d5db;
}

body.admin-shell .form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
}

body.admin-shell .form-control:focus,
body.admin-shell .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}

body.admin-shell .admin-sidebar,
body.admin-shell .admin-sidebar strong,
body.admin-shell .admin-sidebar .logo-kj {
    color: #fff;
}

body.admin-shell .admin-sidebar small,
body.admin-shell .admin-sidebar .text-secondary {
    color: #9ca3af !important;
}

body.admin-shell .badge.text-bg-primary,
body.admin-shell .badge.text-bg-success,
body.admin-shell .badge.text-bg-secondary,
body.admin-shell .badge.text-bg-danger,
body.admin-shell .badge.text-bg-warning,
body.admin-shell .badge.text-bg-info,
body.admin-shell .badge.text-bg-dark {
    color: var(--bs-badge-color, #fff) !important;
}

body.admin-shell .badge.text-bg-warning,
body.admin-shell .badge.text-bg-info {
    color: #111827 !important;
}

body.admin-shell .site-settings-card .nav-pills .nav-link {
    color: #374151;
}

body.admin-shell .site-settings-card .nav-pills .nav-link.active {
    color: #fff;
}

/* Consulting scheduler modal */
.kj-scheduler-modal .modal-content {
    background: #fff;
    color: #111827;
    border: 0;
    box-shadow: 0 32px 100px rgba(0, 0, 0, .5);
}

.kj-scheduler-modal .modal-dialog {
    max-width: 980px;
}

.kj-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}

.kj-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.consulting-step {
    display: none;
}

.consulting-step.is-active {
    display: block;
}

.scheduler-logo {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .9rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: -.04em;
}

.scheduler-kicker {
    font-size: .75rem;
    color: #9ca3af;
}

.scheduler-subtitle {
    font-size: .92rem;
    font-weight: 800;
    color: #1f2937;
}

.scheduler-title,
.scheduler-section-title {
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -.045em;
    color: #111827;
}

.scheduler-description {
    color: #6b7280;
}

.scheduler-type-card {
    width: 100%;
    height: 100%;
    padding: 1.55rem;
    border-radius: 1.35rem;
    border: 2px solid #e5e7eb;
    background: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.scheduler-type-card:hover {
    transform: translateY(-3px);
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 18px 40px rgba(37, 99, 235, .12);
}

.scheduler-type-card__icon {
    width: 3.15rem;
    height: 3.15rem;
    border-radius: 1rem;
    background: #dbeafe;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.scheduler-type-card strong {
    font-size: 1.05rem;
    color: #111827;
}

.scheduler-type-card small {
    color: #2563eb;
    font-weight: 900;
}

.scheduler-type-card span:not(.scheduler-type-card__icon) {
    color: #6b7280;
    font-size: .92rem;
    line-height: 1.55;
}

.scheduler-type-card em {
    margin-top: auto;
    color: #9ca3af;
    font-size: .82rem;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.scheduler-layout {
    min-height: 560px;
}

.scheduler-sidebar {
    background: #f9fafb;
    border-right: 1px solid #eef2f7;
    padding: 2rem;
}

.scheduler-main {
    padding: 2rem;
}

.scheduler-back {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: .9rem;
    font-weight: 800;
    padding: 0;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.scheduler-side-title {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.035em;
    color: #111827;
    margin-bottom: 1.5rem;
}

.scheduler-summary {
    display: grid;
    gap: .9rem;
    color: #4b5563;
    font-size: .92rem;
}

.scheduler-summary span {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}

.scheduler-summary i {
    color: #9ca3af;
}

.scheduler-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.scheduler-calendar-head button {
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4b5563;
}

.scheduler-calendar-head button:hover {
    background: #f3f4f6;
}

.scheduler-calendar-head strong {
    color: #1f2937;
    font-size: .98rem;
}

.scheduler-weekdays,
.scheduler-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .28rem;
}

.scheduler-weekdays span {
    text-align: center;
    color: #9ca3af;
    font-size: .68rem;
    font-weight: 900;
    padding-bottom: .4rem;
}

.scheduler-day {
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #d1d5db;
    font-weight: 750;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.scheduler-day.is-available {
    color: #2563eb;
    cursor: pointer;
}

.scheduler-day.is-available:hover {
    background: #dbeafe;
}

.scheduler-day.is-selected {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .28);
}

.scheduler-day--empty {
    aspect-ratio: 1;
}

.scheduler-timezone {
    margin-top: 1rem;
    color: #9ca3af;
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.scheduler-times p {
    font-size: .9rem;
    font-weight: 850;
    color: #374151;
    text-transform: capitalize;
    margin-bottom: .75rem;
}

.scheduler-times [data-time-slots] {
    display: grid;
    gap: .55rem;
    max-height: 19rem;
    overflow: auto;
    padding-right: .25rem;
}

.scheduler-time {
    border: 2px solid #bfdbfe;
    background: #fff;
    color: #2563eb;
    border-radius: .8rem;
    padding: .65rem .9rem;
    font-weight: 850;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.scheduler-time:hover,
.scheduler-time.is-selected {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.scheduler-form {
    max-width: 560px;
}

.scheduler-form .form-control {
    background: #fff;
    border-color: #e5e7eb;
    color: #111827;
}

.scheduler-form .form-control::placeholder {
    color: #9ca3af;
}

.scheduler-form .form-control:focus {
    background: #fff;
    color: #111827;
    border-color: #3b82f6;
    box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12);
}

.form-help {
    color: #9ca3af;
    font-size: .78rem;
    margin: .35rem 0 0;
}

.scheduler-success {
    text-align: center;
    max-width: 460px;
    margin: 2rem auto;
}

.scheduler-success__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    margin-bottom: 1.25rem;
}

.scheduler-success h2 {
    font-weight: 900;
    color: #111827;
}

.scheduler-success p {
    color: #6b7280;
}

.scheduler-success__box {
    text-align: left;
    background: #f9fafb;
    border-radius: 1.25rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    display: grid;
    gap: .65rem;
    color: #4b5563;
}

.scheduler-success__box strong {
    color: #1f2937;
}

.scheduler-success__box span {
    display: flex;
    gap: .55rem;
    align-items: center;
}

.scheduler-success .btn-outline-light {
    border-color: #d1d5db;
    color: #374151;
}

/* Diagnostic wizard */
.diagnostic-wizard .lead {
    max-width: 760px;
}

.diagnostic-card,
.diagnostic-result {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    color: #0f172a;
    border-radius: 1.8rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}

.diagnostic-progress {
    height: .55rem;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}

.diagnostic-progress span {
    display: block;
    height: 100%;
    width: 20%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #4f46e5);
    transition: width .25s ease;
}

.diagnostic-question {
    display: none;
    padding-top: 2rem;
}

.diagnostic-question.is-active {
    display: block;
}

.diagnostic-question__head {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.diagnostic-question__head span {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    background: #dbeafe;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.diagnostic-question__head h3 {
    margin: 0;
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -.035em;
}

.diagnostic-options {
    display: grid;
    gap: .8rem;
}

.diagnostic-options button {
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
    text-align: left;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    font-weight: 750;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.diagnostic-options button:hover,
.diagnostic-options button.is-selected {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
    transform: translateY(-1px);
}

.diagnostic-actions {
    border-top: 1px solid #f1f5f9;
    margin-top: 2rem;
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.diagnostic-result__icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.diagnostic-result h3 {
    font-weight: 900;
    letter-spacing: -.04em;
}

.diagnostic-score {
    width: 8rem;
    height: 8rem;
    margin: 1.3rem auto .7rem;
    border-radius: 50%;
    background: conic-gradient(#2563eb 0 75%, #e2e8f0 75% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.diagnostic-score::before {
    content: "";
    position: absolute;
    inset: .8rem;
    border-radius: 50%;
    background: #fff;
}

.diagnostic-score span {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: 950;
}

.diagnostic-result-box {
    height: 100%;
    border-radius: 1.25rem;
    padding: 1.4rem;
}

.diagnostic-result-box h4 {
    font-size: 1rem;
    font-weight: 900;
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.diagnostic-result-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .75rem;
}

.diagnostic-result-box li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .92rem;
    line-height: 1.5;
}

.diagnostic-result-box--good {
    background: #ecfdf5;
    color: #047857;
}

.diagnostic-result-box--warn {
    background: #fffbeb;
    color: #b45309;
}

.diagnostic-result-box--blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.diagnostic-recommendations {
    display: grid;
    gap: .8rem;
}

.diagnostic-recommendations div {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 1rem;
    padding: 1rem;
    display: grid;
    gap: .25rem;
}

.diagnostic-recommendations strong {
    color: #0f172a;
}

.diagnostic-recommendations span {
    color: #475569;
    font-size: .92rem;
}

.diagnostic-message {
    border-radius: 1.25rem;
    background: linear-gradient(90deg, #2563eb, #4f46e5);
    color: #fff;
    padding: 1.4rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Kit Digital page */
.kit-digital-hero {
    min-height: auto;
    padding: clamp(7rem, 11vw, 10rem) 0 clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(circle at 78% 18%, rgba(59, 130, 246, .22), transparent 30rem),
        radial-gradient(circle at 8% 90%, rgba(79, 70, 229, .18), transparent 28rem),
        #09090b;
    color: #fff;
}

.kit-digital-hero-title {
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    line-height: .98;
}

.kit-official-logos {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border-radius: 1.25rem;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
}

.kit-official-logos img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.kit-hero-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.7rem;
    padding: clamp(1.4rem, 4vw, 2rem);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
}

.kit-hero-card--informative {
    min-height: 100%;
}

.kit-hero-card__badge {
    display: inline-flex;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(96, 165, 250, .16);
    color: #bfdbfe;
    font-size: .78rem;
    font-weight: 850;
    margin-bottom: 1rem;
}

.kit-hero-card h2 {
    font-size: clamp(1.8rem, 4.2vw, 3rem);
    font-weight: 950;
    letter-spacing: -.06em;
}

.kit-hero-card p {
    color: #d4d4d8;
}

.kit-hero-card__items {
    display: grid;
    gap: .8rem;
    margin-top: 1.25rem;
}

.kit-hero-card__items span {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #e5e7eb;
}

.kit-hero-card__items i {
    color: #34d399;
}

.kit-intro-section,
.kit-amounts-section,
.kit-solutions-section,
.kit-video-section,
.kit-steps-section {
    background: #f8fafc;
    color: #0f172a;
}

.kit-info-card {
    height: 100%;
    border-radius: 1.45rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: clamp(1.35rem, 3vw, 2rem);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.kit-info-card h3 {
    margin-bottom: .8rem;
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
}

.kit-info-card p {
    color: #64748b;
    line-height: 1.7;
}

.kit-check-list {
    display: grid;
    gap: .7rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.kit-check-list li {
    display: flex;
    gap: .65rem;
    color: #475569;
    line-height: 1.55;
}

.kit-check-list i {
    color: #2563eb;
    flex: 0 0 auto;
}

.kit-amount-grid {
    display: grid;
    gap: 1rem;
}

.kit-amount-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kit-amount-card {
    border-radius: 1.35rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .65rem;
}

.kit-amount-card small {
    display: inline-flex;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 850;
}

.kit-amount-card span {
    color: #64748b;
    line-height: 1.55;
    font-weight: 650;
}

.kit-amount-card strong {
    margin-top: auto;
    font-size: 2.2rem;
    font-weight: 950;
    letter-spacing: -.05em;
    color: #2563eb;
}

.kit-requirement-card {
    height: 100%;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 1.25rem;
    display: flex;
    gap: .85rem;
    color: #e5e7eb;
}

.kit-requirement-card i {
    color: #34d399;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.kit-solution-card {
    height: 100%;
    border-radius: 1.45rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.kit-solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px rgba(15, 23, 42, .12);
}

.kit-solution-card__icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

.kit-solution-card h3 {
    font-size: 1.2rem;
    font-weight: 900;
    color: #0f172a;
}

.kit-solution-card p {
    margin-bottom: 0;
    color: #64748b;
    line-height: 1.65;
}

.kit-video-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1.45rem;
    border: 1px solid #e2e8f0;
    background: #020617;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}

.kit-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.kit-process-list {
    display: grid;
    gap: 1rem;
}

.kit-process-list div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 1.2rem;
}

.kit-process-list span {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .9rem;
    background: #0f172a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

.kit-process-list p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .kit-amount-grid--three {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .kit-digital-hero-title {
        font-size: clamp(2rem, 14vw, 3rem);
    }

    .kit-official-logos {
        border-radius: 1rem;
        padding: .75rem;
    }

    .kit-amount-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

.kit-solution-card strong {
    display: inline-flex;
    margin-top: 1rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .9rem;
    font-weight: 900;
}

/* ==========================================================
   Ajustes K&J - header, footer, cookies, testimonios y Kit Digital
   ========================================================== */
.navbar-kj .container-fluid {
    max-width: 1560px;
}

.navbar-kj .navbar {
    min-height: 88px;
}

.navbar-kj .navbar-brand {
    flex: 0 0 auto;
}

.navbar-kj .navbar-nav {
    align-items: center;
}

.navbar-kj .nav-link {
    white-space: nowrap;
}

.footer-logo-img {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.cookie-close {
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.cookie-close:hover {
    transform: rotate(90deg) scale(1.04);
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}

.cookie-close i {
    font-size: 1rem;
    line-height: 1;
}

.testimonial-main,
body.home-page .testimonial-main {
    overflow: visible;
}

.testimonial-main__quote,
body.home-page .testimonial-main__quote {
    
    top: -2.35rem;
    z-index: 9999!important;
    left: 1.35rem;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .85rem;
    font-size: 1.18rem;
    line-height: 1;
    overflow: hidden;
}

.testimonial-main__quote i,
body.home-page .testimonial-main__quote i {
    display: block;
    line-height: 1;
    transform: translateY(1px);
}

.kit-digital-page .kit-digital-hero-title,
.kit-digital-page .section-title {
    letter-spacing: .015em;
}

.kit-digital-page .badge-soft,
.kit-digital-page .kit-hero-card__badge {
    color: #f8fafc;
    background: rgba(37, 99, 235, .92);
    border-color: rgba(191, 219, 254, .42);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

@media (max-width: 1399.98px) {
    .navbar-kj .navbar {
        min-height: 82px;
    }

    .navbar-kj .navbar-collapse {
        padding: 1rem 0 1.25rem;
    }

    .navbar-kj .navbar-nav {
        align-items: stretch;
        gap: .35rem;
    }

    .navbar-kj .nav-link {
        padding: .85rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .navbar-kj .navbar {
        min-height: 76px;
    }

    .site-logo-img {
        width: 44px;
        height: 44px;
    }

    .logo-kj {
        width: 44px;
        height: 44px;
    }

    .cookie-close {
        position: absolute;
        top: .9rem;
        right: .9rem;
    }

    .cookie-body h3 {
        padding-right: 2.5rem;
    }
}

/* =========================================================
   Products home cards - Internal products hover colors
   Añadido para cards de productos propios con color dinámico
   ========================================================= */
body.home-page .products-section {
    background:
        radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .06), transparent 34rem),
        #09090b;
}

body.home-page .product-card {
    --product-color-start: #7c3aed;
    --product-color-end: #9333ea;

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    padding: 1.85rem;
    border-radius: 1.45rem;
    border: 1px solid color-mix(in srgb, var(--product-color-start) 34%, transparent);
    background:
        linear-gradient(180deg, rgba(24, 24, 27, .66), rgba(9, 9, 11, .82)),
        #09090b;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .26);
    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

body.home-page .product-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: .38rem;
    background: linear-gradient(90deg, var(--product-color-start), var(--product-color-end));
}

body.home-page .product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--product-color-start) 30%, transparent), transparent 18rem),
        linear-gradient(135deg, color-mix(in srgb, var(--product-color-start) 16%, transparent), color-mix(in srgb, var(--product-color-end) 10%, transparent));
    transition: opacity .28s ease;
    pointer-events: none;
}

body.home-page .product-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--product-color-start) 72%, transparent);
    box-shadow:
        0 1.4rem 3.4rem rgba(0, 0, 0, .34),
        0 0 0 1px color-mix(in srgb, var(--product-color-start) 16%, transparent);
    color: #fff;
}

body.home-page .product-card:hover::after {
    opacity: 1;
}

body.home-page .product-card>* {
    position: relative;
    z-index: 1;
}

body.home-page .product-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.45rem;
}

body.home-page .product-card__icon {
    width: 3.05rem;
    height: 3.05rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--product-color-start), var(--product-color-end));
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 .85rem 1.6rem color-mix(in srgb, var(--product-color-start) 24%, transparent);
}

body.home-page .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .32rem;
    border-radius: .8rem;
}

body.home-page .product-card__badge {
    display: inline-flex;
    align-items: center;
    max-width: 58%;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--product-color-start) 16%, transparent);
    color: color-mix(in srgb, var(--product-color-end) 82%, #fff);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

body.home-page .product-card__body {
    flex: 1;
}

body.home-page .product-card__name {
    margin: 0;
    color: #fff;
    font-size: 1.48rem;
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.05;
}

body.home-page .product-card__domain {
    margin-top: .25rem;
    color: #71717a;
    font-size: .84rem;
    font-weight: 600;
}

body.home-page .product-card__title {
    margin: 1.1rem 0 .7rem;
    color: #f4f4f5;
    font-size: .96rem;
    font-weight: 850;
    line-height: 1.45;
}

body.home-page .product-card__description {
    margin: 0;
    color: #8f8f99;
    font-size: .94rem;
    line-height: 1.75;
}

body.home-page .product-card__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1.8rem;
    color: #d4d4d8;
    font-size: .88rem;
    font-weight: 850;
    transition: color .22s ease;
}

body.home-page .product-card:hover .product-card__link {
    color: #fff;
}

body.home-page .product-card:hover .product-card__icon {
    box-shadow:
        0 .95rem 1.9rem color-mix(in srgb, var(--product-color-start) 32%, transparent),
        0 0 0 4px color-mix(in srgb, var(--product-color-start) 12%, transparent);
}

@media (max-width: 767.98px) {
    body.home-page .product-card {
        padding: 1.5rem;
    }

    body.home-page .product-card__badge {
        max-width: 64%;
    }
}

/* Clients carousel - manual/slow version */
body.home-page .clients-section__title {
    color: #f8fafc;
    font-size: clamp(1.45rem, 3vw, 2.3rem);
    font-weight: 950;
    letter-spacing: -.045em;
}

body.home-page .clients-carousel {
    position: relative;
    padding-bottom: 2.8rem;
}

body.home-page .clients-carousel .carousel-inner {
    overflow: hidden;
}

body.home-page .client-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 8.25rem;
    height: 100%;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(63, 63, 70, .6);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 10% 10%, rgba(59, 130, 246, .08), transparent 12rem),
        rgba(24, 24, 27, .56);
    color: #d4d4d8;
    text-decoration: none;
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .18);
    transition:
        transform .24s ease,
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease;
}

body.home-page a.client-card:hover {
    transform: translateY(-4px);
    border-color: rgba(96, 165, 250, .42);
    background:
        radial-gradient(circle at 10% 10%, rgba(59, 130, 246, .16), transparent 13rem),
        rgba(39, 39, 42, .82);
    box-shadow: 0 1.35rem 2.8rem rgba(0, 0, 0, .28);
    color: #fff;
}

body.home-page .client-card__logo {
    width: 3.8rem;
    height: 3.8rem;
    display: grid;
    place-items: center;
    border-radius: 1.05rem;
    background: linear-gradient(135deg, #3f3f46, #27272a);
    color: #e4e4e7;
    font-weight: 950;
    letter-spacing: -.04em;
    flex: 0 0 auto;
    overflow: hidden;
}

body.home-page .client-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: .45rem;
}

body.home-page .client-card__content {
    min-width: 0;
    display: block;
}

body.home-page .client-card__content strong {
    display: block;
    color: #f4f4f5;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .4rem;
}

body.home-page .client-card__content small {
    display: -webkit-box;
    color: #8f8f99;
    font-size: .84rem;
    line-height: 1.45;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.home-page .client-card__arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #71717a;
    font-size: .9rem;
    transition: color .2s ease, transform .2s ease;
}

body.home-page a.client-card:hover .client-card__arrow {
    color: #fff;
    transform: translate(2px, -2px);
}

body.home-page .clients-carousel__controls {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

body.home-page .clients-carousel__controls button {
    width: 2.65rem;
    height: 2.65rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(63, 63, 70, .75);
    border-radius: 999px;
    background: rgba(24, 24, 27, .78);
    color: #f4f4f5;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

body.home-page .clients-carousel__controls button:hover {
    transform: translateY(-2px);
    background: rgba(37, 99, 235, .18);
    border-color: rgba(96, 165, 250, .45);
}

body.home-page .clients-carousel__indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    gap: .45rem;
}

body.home-page .clients-carousel__indicators button {
    width: .62rem;
    height: .62rem;
    border: 0;
    border-radius: 999px;
    background: rgba(113, 113, 122, .65);
    opacity: 1;
    transition: width .2s ease, background .2s ease;
}

body.home-page .clients-carousel__indicators button.active {
    width: 1.7rem;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

@media (max-width: 991.98px) {
    body.home-page .clients-carousel {
        padding-bottom: 3rem;
    }
}

@media (max-width: 767.98px) {
    body.home-page .client-card {
        min-height: auto;
        padding: 1.1rem;
    }
}

/* Admin WYSIWYG */
.admin-rich-editor {
    min-height: 360px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 0 1rem 1rem;
}

.ql-toolbar.ql-snow {
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 1rem 1rem 0 0;
    background: rgba(255, 255, 255, 0.05);
}

.ql-container.ql-snow {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc;
    font-size: 1rem;
}

.ql-editor {
    min-height: 320px;
}

.ql-editor.ql-blank::before {
    color: rgba(248, 250, 252, 0.45) !important;
}

.ql-snow .ql-stroke {
    stroke: rgba(248, 250, 252, 0.85) !important;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: rgba(248, 250, 252, 0.85) !important;
}

.ql-snow .ql-picker,
.ql-snow .ql-picker-label {
    color: rgba(248, 250, 252, 0.85) !important;
}

.ql-snow .ql-picker-options {
    background: #101827 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.legal-page-content {
    color: rgba(226, 232, 240, 0.86);
    font-size: 1.075rem;
    line-height: 1.85;
}

.legal-page-content h2,
.legal-page-content h3 {
    color: #fff;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

.legal-page-content a {
    color: #7dd3fc;
}

.legal-page-content ul,
.legal-page-content ol {
    padding-left: 1.35rem;
}

/* Admin reusable index component */
body.admin-shell {
    --admin-primary: #174174;
    --admin-primary-soft: #eaf2ff;
    --admin-border: #dfe5ee;
    --admin-muted: #667085;
    --admin-table-head: #1f2430;
}

.admin-index-card {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    padding: 1rem;
}

.admin-index-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem 0 1rem;
}

.admin-index-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: #111827;
}

.admin-index-card__description {
    color: var(--admin-muted);
    margin: 0;
}

.admin-index-card__add {
    border-radius: .6rem;
    font-weight: 600;
    white-space: nowrap;
}

.admin-index-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem 0 1rem;
}

.admin-index-toolbar__left,
.admin-index-toolbar__right {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.admin-index-toolbar__right {
    margin-left: auto;
}

.admin-index-toolbar__filter-btn {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-index-toolbar__filter-count {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: .7rem;
    display: grid;
    place-items: center;
}

.admin-index-per-page,
.admin-index-search {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.admin-index-per-page label,
.admin-index-per-page span {
    font-size: .95rem;
    color: #111827;
    white-space: nowrap;
}

.admin-index-per-page .form-select {
    width: 4.5rem;
    min-height: 2.4rem;
    border-radius: .4rem;
}

.admin-index-search .form-control {
    min-width: 15rem;
    min-height: 2.4rem;
    border-radius: .4rem;
}

.admin-index-search .btn,
.admin-index-filters .btn {
    min-height: 2.4rem;
    border-radius: .4rem;
}

.admin-index-filters {
    border: 1px solid var(--admin-border);
    border-radius: .8rem;
    padding: 1rem;
    margin: 0 0 1rem;
    background: #fbfcff;
}

.admin-index-filters__actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: 1rem;
}

.admin-index-card__body {
    overflow: visible;
}

.admin-index-table-wrap {
    border-radius: .35rem;
    overflow-x: auto;
}

body.admin-shell .admin-table {
    margin: 0;
    width: 100%;
    color: #111827;
    border-collapse: separate;
    border-spacing: 0;
}

body.admin-shell .admin-table thead th {
    background: var(--admin-table-head);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    text-transform: uppercase;
    border-bottom: 0;
    padding: .95rem 1rem;
    white-space: nowrap;
}

body.admin-shell .admin-table thead th:first-child {
    border-top-left-radius: .25rem;
}

body.admin-shell .admin-table thead th:last-child {
    border-top-right-radius: .25rem;
}

body.admin-shell .admin-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
}

body.admin-shell .admin-table tbody tr:hover td {
    background: #f8fafc;
}

body.admin-shell .admin-table code {
    color: #174174;
    background: #eef4ff;
    border-radius: .35rem;
    padding: .2rem .4rem;
}

.admin-actions-dropdown .btn {
    background: var(--admin-primary);
    border-color: var(--admin-primary);
    border-radius: .35rem;
    font-weight: 600;
}

.admin-actions-dropdown .dropdown-menu {
    border-radius: .65rem;
    border: 1px solid var(--admin-border);
    box-shadow: 0 14px 35px rgba(15, 23, 42, .15);
    min-width: 11rem;
}

.admin-actions-dropdown .dropdown-item {
    font-size: .92rem;
    padding: .55rem .85rem;
}

.admin-index-pagination {
    padding-top: 1rem;
}

.admin-index-empty {
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--admin-muted);
    text-align: center;
    border: 1px dashed var(--admin-border);
    border-radius: .75rem;
    background: #fbfcff;
}

.admin-index-empty i {
    font-size: 2rem;
    color: #98a2b3;
}

.admin-static-page-card {
    border: 1px solid var(--admin-border);
    border-radius: 1rem;
    padding: 1rem;
    background: #fbfcff;
}

@media (max-width: 991.98px) {

    .admin-index-card__header,
    .admin-index-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-index-toolbar__right,
    .admin-index-per-page,
    .admin-index-search {
        width: 100%;
    }

    .admin-index-search .form-control {
        min-width: 0;
        flex: 1;
    }

    .admin-index-card__add {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================
   Fixes 2026-05-15: admin editor, table dropdowns, logos and home polish
   ========================================================== */
body.admin-shell textarea.rich-editor.admin-rich-editor__source {
    display: none !important;
}

body.admin-shell .admin-rich-editor {
    min-height: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: .9rem;
    overflow: hidden;
}

body.admin-shell .admin-rich-editor__toolbar {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

body.admin-shell .admin-rich-editor__content {
    min-height: 320px;
    background: #fff;
    color: #111827;
    font-size: 1rem;
    line-height: 1.75;
}

body.admin-shell .admin-rich-editor__content h1,
body.admin-shell .admin-rich-editor__content h2,
body.admin-shell .admin-rich-editor__content h3 {
    color: #0f172a;
    letter-spacing: -.025em;
}

body.admin-shell .admin-index-card,
body.admin-shell .admin-index-card__body,
body.admin-shell .admin-table,
body.admin-shell .admin-table tbody,
body.admin-shell .admin-table tr,
body.admin-shell .admin-table td {
    overflow: visible;
}

.admin-index-table-wrap {
    overflow: visible;
    position: relative;
    z-index: 1;
}

.admin-actions-dropdown {
    position: relative;
    z-index: 30;
}

.admin-actions-dropdown .dropdown-menu.show {
    z-index: 1080;
}

@media (max-width: 991.98px) {
    .admin-index-table-wrap {
        overflow-x: auto;
        overflow-y: visible;
    }
}

.site-logo-img,
.site-logo-img--header {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    padding: .2rem;
}

.footer-logo-img {
    width: 64px;
    height: 64px;
}

.navbar-kj .navbar-brand {
    min-height: 58px;
}

body.home-page .clients-section,
body.home-page .clients-carousel,
body.home-page .clients-carousel .carousel-inner,
body.home-page .clients-carousel .carousel-item,
body.home-page .clients-carousel .row,
body.home-page .clients-carousel [class*="col-"] {
    overflow: visible;
}

body.home-page .clients-section .reveal-on-scroll.is-visible {
    position: relative;
    z-index: 2;
}

body.home-page a.client-card:hover,
body.home-page .client-card:hover {
    position: relative;
    z-index: 40;
}

body.home-page .product-card {
    background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--product-color-start) 13%, transparent), transparent 14rem),
        linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--product-color-start) 4%, #ffffff));
    color: #111827;
    border-color: color-mix(in srgb, var(--product-color-start) 18%, #e5e7eb);
    box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, .10);
}

body.home-page .product-card:hover {
    color: #0f172a;
    border-color: color-mix(in srgb, var(--product-color-start) 42%, #d1d5db);
    box-shadow:
        0 1.5rem 3.2rem rgba(15, 23, 42, .16),
        0 0 0 1px color-mix(in srgb, var(--product-color-start) 10%, transparent);
}

body.home-page .product-card::after {
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--product-color-start) 16%, transparent), transparent 18rem),
        linear-gradient(135deg, color-mix(in srgb, var(--product-color-start) 7%, transparent), color-mix(in srgb, var(--product-color-end) 5%, transparent));
}

body.home-page .product-card__name,
body.home-page .product-card__title {
    color: #111827;
}

body.home-page .product-card__domain,
body.home-page .product-card__description {
    color: #667085;
}

body.home-page .product-card__badge {
    background: color-mix(in srgb, var(--product-color-start) 10%, #ffffff);
    color: color-mix(in srgb, var(--product-color-start) 78%, #111827);
    border: 1px solid color-mix(in srgb, var(--product-color-start) 14%, transparent);
}

body.home-page .product-card__link,
body.home-page .product-card:hover .product-card__link {
    color: color-mix(in srgb, var(--product-color-start) 72%, #111827);
}

body.home-page .product-card__icon {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--product-color-start) 8%, #ffffff), color-mix(in srgb, var(--product-color-end) 10%, #ffffff));
    color: color-mix(in srgb, var(--product-color-start) 78%, #111827);
    border: 1px solid color-mix(in srgb, var(--product-color-start) 16%, #e5e7eb);
    box-shadow: 0 .85rem 1.6rem rgba(15, 23, 42, .08);
}

body.home-page .product-card__media img {
    background: rgba(255, 255, 255, .78);
}

.hero-title,
.section-title,
.section-title--xl,
.blog-hero h1,
.portfolio-page-hero h1,
.project-detail-hero h1,
.services-hero h1,
.kit-hero h1 {
    letter-spacing: -.045em;
}

.section-title--xl {
    font-size: clamp(2.25rem, 5.2vw, 5.4rem);
}

.hero-title {
    font-size: clamp(3rem, 8vw, 7.5rem);
}

body.home-page .product-card__name,
body.home-page .clients-section__title,
.service-row h3,
.feature-card h3,
.process-step h3,
.portfolio-card h3,
.blog-card h3,
.product-card h3 {
    letter-spacing: -.025em;
}

/* =========================================================
   FIX DROPDOWN ACCIONES EN TABLAS ADMIN
   Evita que el menu quede por debajo del boton o cortado
   ========================================================= */

/* El contenedor general de las tablas debe permitir que el dropdown sobresalga */
.admin-index-card,
.admin-index-table-wrapper,
.admin-index-table-scroll,
.admin-table-wrapper,
.card,
.card-body {
    overflow: visible;
}

/* Si la tabla esta dentro de table-responsive, permitir overflow vertical */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

/* Cuando haya un dropdown abierto, quitamos el clipping del wrapper */
.table-responsive:has(.dropdown.show),
.admin-index-table-wrapper:has(.dropdown.show),
.admin-index-table-scroll:has(.dropdown.show),
.card-body:has(.dropdown.show) {
    overflow: visible !important;
}

/* Las celdas deben poder posicionar bien el dropdown */
.admin-index-table td,
.admin-index-table th,
.table td,
.table th {
    position: relative;
}

/* La celda de acciones queda por encima del resto cuando abre dropdown */
.admin-index-table td:has(.dropdown.show),
.table td:has(.dropdown.show) {
    z-index: 1080;
}

/* El dropdown completo queda por encima de filas, botones y cabeceras */
.admin-index-table .dropdown,
.table .dropdown {
    position: relative;
}

.admin-index-table .dropdown.show,
.table .dropdown.show {
    z-index: 1090;
}

/* El boton no debe tapar el menu */
.admin-index-table .dropdown-toggle,
.table .dropdown-toggle {
    position: relative;
    z-index: 1;
}

/* Cuando esta abierto, el boton queda por debajo del menu */
.admin-index-table .dropdown.show .dropdown-toggle,
.table .dropdown.show .dropdown-toggle {
    z-index: 2;
}

/* El menu siempre por encima */
.admin-index-table .dropdown-menu,
.table .dropdown-menu {
    position: absolute;
    z-index: 1100 !important;
}

/* Si Bootstrap usa popper, reforzamos igualmente */
.dropdown-menu.show {
    z-index: 1100 !important;
}

/* Evita que el dropdown quede pegado al borde derecho */
.admin-index-table td:last-child .dropdown-menu,
.table td:last-child .dropdown-menu {
    right: 0;
    left: auto;
}

/* Separacion visual del menu */
.admin-index-table .dropdown-menu,
.table .dropdown-menu {
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    padding: 8px;
}

/* Items del dropdown */
.admin-index-table .dropdown-menu .dropdown-item,
.table .dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hover limpio */
.admin-index-table .dropdown-menu .dropdown-item:hover,
.table .dropdown-menu .dropdown-item:hover {
    background: rgba(13, 110, 253, 0.08);
}

/* Accion eliminar */
.admin-index-table .dropdown-menu .dropdown-item.text-danger:hover,
.table .dropdown-menu .dropdown-item.text-danger:hover {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545 !important;
}

/* =========================================================
   FIX FINAL DROPDOWN ACCIONES TABLAS ADMIN
   Mantiene el dropdown por encima de botones/filas inferiores
   ========================================================= */
body.admin-shell .admin-index-card,
body.admin-shell .admin-index-card__body,
body.admin-shell .admin-index-table-outer {
    position: relative;
    overflow: visible !important;
}

body.admin-shell .admin-index-table-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: visible !important;
    z-index: 1;
}

body.admin-shell .admin-index-table-wrap.admin-index-table-wrap--dropdown-open {
    overflow: visible !important;
    z-index: 5000;
}

body.admin-shell .admin-table {
    overflow: visible !important;
}

body.admin-shell .admin-table thead,
body.admin-shell .admin-table tbody,
body.admin-shell .admin-table tr,
body.admin-shell .admin-table th,
body.admin-shell .admin-table td {
    overflow: visible !important;
}

body.admin-shell .admin-table tbody tr {
    position: relative;
    z-index: 1;
}

body.admin-shell .admin-table tbody tr:hover {
    z-index: 2;
}

body.admin-shell .admin-table tbody tr.admin-dropdown-row-open {
    position: relative;
    z-index: 6000 !important;
}

body.admin-shell .admin-table td.admin-dropdown-cell-open {
    position: relative;
    z-index: 6100 !important;
}

body.admin-shell .admin-actions-dropdown {
    position: relative;
    z-index: auto !important;
    display: inline-block;
}

body.admin-shell .admin-actions-dropdown.admin-actions-dropdown--open,
body.admin-shell .admin-actions-dropdown.show {
    z-index: 6200 !important;
}

body.admin-shell .admin-actions-dropdown .dropdown-toggle {
    position: relative;
    z-index: 1 !important;
}

body.admin-shell .admin-actions-dropdown.admin-actions-dropdown--open .dropdown-toggle,
body.admin-shell .admin-actions-dropdown.show .dropdown-toggle {
    z-index: 1 !important;
}

body.admin-shell .admin-actions-dropdown .dropdown-menu,
body.admin-shell .admin-actions-dropdown .dropdown-menu.show {
    z-index: 6300 !important;
    position: absolute !important;
    inset: auto 0 auto auto !important;
    transform: translate3d(0, 1px, 0) !important;
    min-width: 12rem;
}

body.admin-shell .admin-actions-dropdown.dropup .dropdown-menu,
body.admin-shell .admin-actions-dropdown.dropup .dropdown-menu.show {
    transform: translate3d(0, -100%, 0) !important;
}

body.admin-shell .admin-actions-dropdown .dropdown-menu.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

body.admin-shell .admin-actions-dropdown .dropdown-menu .dropdown-item {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   AJUSTES FINALES HOME + TESTIMONIOS + HEADER
   ========================================================== */
.testimonials-section,
body.home-page .testimonials-section,
.testimonials-section .container,
body.home-page .testimonials-section .container,
.testimonial-main .carousel,
.testimonial-main .carousel-inner,
.testimonial-main .carousel-item,
body.home-page .testimonial-main .carousel,
body.home-page .testimonial-main .carousel-inner,
body.home-page .testimonial-main .carousel-item {
    overflow: visible !important;
}

.testimonial-main,
body.home-page .testimonial-main {
    position: relative;
    overflow: visible !important;
    margin-top: 2rem;
    padding-top: 3.6rem;
    z-index: 1;
}

.testimonial-main__quote,
body.home-page .testimonial-main__quote {
    position: absolute;
    top: -1.55rem;
    left: 2.25rem;
    z-index: 20;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    box-shadow: 0 18px 42px rgba(37, 99, 235, .35);
    pointer-events: none;
}

.testimonial-main__quote i,
body.home-page .testimonial-main__quote i {
    display: block;
    line-height: 1;
}

.navbar-kj .nav-link,
body.home-page .navbar-kj .nav-link {
    font-size: .975rem;
}

.search-trigger,
body.home-page .navbar-kj .btn-primary,
.navbar-kj .btn-primary.btn-pill {
    min-height: 42px;
    padding-top: .45rem;
    padding-bottom: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-logo-img.site-logo-img--header {
    /* width: 52px;
    height: 52px; */
    width: 100px;
    height: 100px;
    border-radius: 16px;
}

.logo-kj {
    width: 48px;
    height: 48px;
    border-radius: 16px;
}

@media (max-width: 575.98px) {
    .testimonial-main,
    body.home-page .testimonial-main {
        margin-top: 1.75rem;
        padding-top: 3.3rem;
    }

    .testimonial-main__quote,
    body.home-page .testimonial-main__quote {
        top: -1.35rem;
        left: 1.4rem;
        width: 3rem;
        height: 3rem;
        font-size: 1.55rem;
        border-radius: .9rem;
    }

    .site-logo-img.site-logo-img--header {
        width: 48px;
        height: 48px;
    }
}

/* ==========================================================
   FINAL FIX - Header logo scroll, cookies compactas, GA consent y captcha
   ========================================================== */
.grecaptcha-badge {
    visibility: hidden !important;
}

.navbar-kj .nav-link,
body.home-page .navbar-kj .nav-link {
    font-size: .975rem;
}

.search-trigger,
body.home-page .navbar-kj .btn-primary,
.navbar-kj .btn-primary.btn-pill {
    min-height: 42px;
    padding-top: .45rem;
    padding-bottom: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-logo-img.site-logo-img--header {
    width: 100px;
    height: 100px;
    max-height: 100px;
    object-fit: contain;
    transition: width .22s ease, height .22s ease, max-height .22s ease, border-radius .22s ease;
}

.navbar-kj.is-scrolled .site-logo-img.site-logo-img--header {
    width: 60px;
    height: 60px;
    max-height: 60px;
    border-radius: 16px;
}

.navbar-kj.is-scrolled .logo-kj {
    width: 60px;
    height: 60px;
}

@media (max-width: 575.98px) {
    .site-logo-img.site-logo-img--header {
        width: 76px;
        height: 76px;
        max-height: 76px;
    }

    .navbar-kj.is-scrolled .site-logo-img.site-logo-img--header {
        width: 52px;
        height: 52px;
        max-height: 52px;
    }
}

.cookie-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: none;
    padding: .75rem 1rem;
    background: rgba(9, 9, 11, .76);
    border-top: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.cookie-card {
    width: min(100%, 1180px);
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(63, 63, 70, .9);
    border-radius: 1rem;
    background: #18181b;
    color: #fff;
    box-shadow: 0 18px 52px rgba(0, 0, 0, .45);
}

.cookie-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, .12);
    color: #facc15;
    font-size: 1.25rem;
}

.cookie-body {
    flex: 1;
    min-width: 0;
}

.cookie-body h3 {
    margin: 0 0 .18rem;
    color: #fff;
    font-size: .98rem;
    font-weight: 850;
    line-height: 1.2;
}

.cookie-body p {
    max-width: none;
    margin: 0;
    color: #a1a1aa;
    font-size: .86rem;
    line-height: 1.45;
}

.cookie-body a {
    color: #93c5fd;
    font-weight: 800;
}

.cookie-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.cookie-actions .btn {
    min-height: 38px;
    border-radius: 999px;
    padding: .45rem .95rem;
    font-size: .86rem;
    font-weight: 800;
    white-space: nowrap;
}

.cookie-action--reject {
    color: #a1a1aa !important;
    text-decoration: none;
}

.cookie-action--reject:hover {
    color: #fff !important;
}

.cookie-preferences-modal {
    z-index: 2070;
}

.cookie-preferences-modal + .modal-backdrop,
.modal-backdrop.show {
    z-index: 2060;
}

.cookie-preferences-modal .modal-content {
    border: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    color: #111827;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.cookie-preferences-modal .modal-header,
.cookie-preferences-modal .modal-footer {
    border-color: #eef2f7;
}

.cookie-preference-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eef2f7;
}

.cookie-preference-item:last-child {
    border-bottom: 0;
}

.cookie-preference-item strong {
    display: block;
    color: #111827;
    font-size: .98rem;
    margin-bottom: .2rem;
}

.cookie-preference-item p {
    margin: 0;
    color: #6b7280;
    font-size: .88rem;
    line-height: 1.45;
}

.footer-cookie-settings {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.footer-cookie-settings:hover {
    color: #fff !important;
}

@media (max-width: 767.98px) {
    .cookie-card {
        align-items: flex-start;
        flex-direction: column;
        gap: .7rem;
        padding: .95rem;
    }

    .cookie-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cookie-actions .btn {
        flex: 1 1 auto;
    }
}


/* ==========================================================
   FIX MODAL CONSULTORIA - BACKDROP POR DEBAJO DEL MODAL
   ========================================================== */
body.consulting-modal-open #consultingModal,
body.consulting-modal-open .kj-scheduler-modal,
#consultingModal.show,
.kj-scheduler-modal.show {
    z-index: 2085 !important;
}

body.consulting-modal-open .modal-backdrop.show {
    z-index: 2070 !important;
    opacity: .72;
}

body.consulting-modal-open #consultingModal .modal-dialog,
body.consulting-modal-open #consultingModal .modal-content,
body.consulting-modal-open .kj-scheduler-modal .modal-dialog,
body.consulting-modal-open .kj-scheduler-modal .modal-content {
    position: relative;
    z-index: 2090 !important;
    pointer-events: auto !important;
    filter: none !important;
}

body.consulting-modal-open #consultingModal,
body.consulting-modal-open #consultingModal *,
body.consulting-modal-open .kj-scheduler-modal,
body.consulting-modal-open .kj-scheduler-modal * {
    filter: none !important;
}

body.consulting-modal-open main,
body.consulting-modal-open footer,
body.consulting-modal-open .navbar-kj,
body.consulting-modal-open .floating-support,
body.consulting-modal-open .cookie-panel {
    filter: none !important;
}