@import url("design-system/utpl-design-system.css");

/* Legacy public-site aliases → enterprise design tokens (Phase 33.3) */
:root {
    --utpl-brand: var(--utpl-color-primary);
    --utpl-brand-dark: var(--utpl-blue-600);
    --utpl-brand-light: var(--utpl-purple-400);
    --utpl-primary: var(--utpl-color-primary);
    --utpl-primary-dark: var(--utpl-blue-600);
    --utpl-accent: var(--utpl-color-accent);
    --utpl-ink: var(--utpl-color-text);
    --utpl-ink-muted: var(--utpl-color-text-secondary);
    --utpl-gray-50: var(--utpl-brand-gray-50);
    --utpl-gray-100: var(--utpl-slate-100);
    --utpl-gray-200: var(--utpl-slate-200);
    --utpl-gray-300: var(--utpl-slate-300);
    --utpl-gray-400: var(--utpl-slate-400);
    --utpl-gray-500: var(--utpl-slate-500);
    --utpl-surface: var(--utpl-color-surface);
    --utpl-surface-muted: var(--utpl-color-surface-muted);
    --utpl-border: var(--utpl-color-border);
    --utpl-shadow-soft: var(--utpl-shadow-sm);
    --utpl-shadow-medium: var(--utpl-shadow);
    --utpl-shadow-strong: var(--utpl-shadow-brand);
    --utpl-shadow: var(--utpl-shadow);
    --utpl-shadow-lg: var(--utpl-shadow-lg);
    --utpl-radius-btn: var(--utpl-radius);
    --utpl-space-30: 7.5rem;
    --utpl-transition: var(--utpl-duration-moderate) var(--utpl-ease-default);
    --utpl-font: var(--utpl-font-sans);
    --utpl-text-body: var(--utpl-text-md);
    --utpl-leading-body: var(--utpl-leading-relaxed);
    --utpl-leading-heading: var(--utpl-leading-tight);
    --utpl-muted: var(--utpl-color-text-muted);
}



*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: var(--utpl-font);

    font-size: var(--utpl-text-body);

    line-height: var(--utpl-leading-body);

    color: var(--utpl-ink);

    background: var(--utpl-surface);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* ─── Typography system ─── */

h1, .utpl-h1, .utpl-hero-title {

    font-size: clamp(2.5rem, 4.5vw, 3.5rem);

    font-weight: 700;

    letter-spacing: -0.03em;

    line-height: var(--utpl-leading-heading);

    color: var(--utpl-ink);

}



h2, .utpl-h2, .utpl-section-title, .utpl-final-cta-title {

    font-size: clamp(1.75rem, 3vw, 2.5rem);

    font-weight: 700;

    letter-spacing: -0.025em;

    line-height: 1.2;

    color: var(--utpl-ink);

}



h3, .utpl-h3 {

    font-size: clamp(1.25rem, 2vw, 1.75rem);

    font-weight: 600;

    letter-spacing: -0.02em;

    line-height: 1.3;

    color: var(--utpl-ink);

}



p, .lead {

    font-size: var(--utpl-text-body);

    line-height: var(--utpl-leading-body);

}



.utpl-hero-title {

    color: #fff;

}



.utpl-final-cta-title {

    color: #fff;

}



/* ─── Button system ─── */

.btn {

    border-radius: var(--utpl-radius-btn);

    font-weight: 600;

    transition: background-color var(--utpl-transition), border-color var(--utpl-transition), color var(--utpl-transition), transform var(--utpl-transition), box-shadow var(--utpl-transition);

}



.btn-lg {

    padding: 0.75rem 1.5rem;

    font-size: 1rem;

}



.utpl-btn-primary,

.btn-primary.utpl-btn-primary,

.utpl-section-cta-btn {

    border-radius: var(--utpl-radius-btn);

    font-weight: 600;

    box-shadow: var(--utpl-shadow-soft);

}



.bg-primary {

    background-color: var(--utpl-brand) !important;

}



.btn-primary {

    --bs-btn-bg: var(--utpl-brand);

    --bs-btn-border-color: var(--utpl-brand);

    --bs-btn-hover-bg: var(--utpl-brand-dark);

    --bs-btn-hover-border-color: var(--utpl-brand-dark);

    --bs-btn-active-bg: var(--utpl-brand-dark);

    --bs-btn-active-border-color: var(--utpl-brand-dark);

    border-radius: var(--utpl-radius-btn);

    font-weight: 600;

}



.btn-primary:hover {

    transform: scale(1.02);

}



.btn-outline-primary {

    --bs-btn-color: var(--utpl-brand);

    --bs-btn-border-color: var(--utpl-gray-200);

    --bs-btn-hover-bg: var(--utpl-color-primary-muted);

    --bs-btn-hover-border-color: var(--utpl-brand);

    --bs-btn-hover-color: var(--utpl-brand-dark);

    border-radius: var(--utpl-radius-btn);

    font-weight: 600;

}



/* ─── Header ─── */

.utpl-header {

    z-index: 1030;

    transition: background-color var(--utpl-transition), box-shadow var(--utpl-transition), backdrop-filter var(--utpl-transition);

}



.utpl-header.sticky-top {

    position: sticky;

    top: 0;

}



.utpl-navbar {

    transition: background-color var(--utpl-transition), box-shadow var(--utpl-transition), backdrop-filter var(--utpl-transition);

}



.utpl-header--standard .utpl-navbar--standard {

    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: var(--utpl-glass-blur);

    -webkit-backdrop-filter: var(--utpl-glass-blur);

    border-bottom: 1px solid transparent;

    box-shadow: none;

}



.utpl-header--standard.is-scrolled .utpl-navbar--standard {

    border-bottom-color: var(--utpl-border);

    box-shadow: var(--utpl-shadow-soft);

}



.utpl-header--standard .utpl-brand,

.utpl-header--standard .utpl-nav-link {

    color: var(--utpl-ink) !important;

}



.utpl-header--standard .navbar-toggler-icon {

    filter: none;

}



.utpl-header--standard .utpl-nav-link:hover {

    color: var(--utpl-brand) !important;

}



.utpl-header--landing .utpl-navbar {

    background: var(--utpl-glass-bg-dark);

    backdrop-filter: var(--utpl-glass-blur);

    -webkit-backdrop-filter: var(--utpl-glass-blur);

}



.utpl-header--landing.is-scrolled .utpl-navbar {

    background: rgba(255, 255, 255, 0.92);

    box-shadow: 0 1px 0 var(--utpl-border);

}



.utpl-header--landing.is-scrolled .utpl-brand,

.utpl-header--landing.is-scrolled .utpl-nav-link {

    color: var(--utpl-ink) !important;

}



.utpl-header--landing.is-scrolled .navbar-toggler-icon {

    filter: invert(1);

}



.utpl-brand {

    font-size: 1.25rem;

    letter-spacing: -0.02em;

    color: #fff;

    display: inline-flex;

    align-items: center;

}



.utpl-brand-logo {

    display: block;

    height: 2rem;

    width: auto;

    max-width: 10rem;

    object-fit: contain;

}



.utpl-brand-logo--footer {

    height: 2.25rem;

}



.utpl-header--landing .utpl-brand-logo--dark {

    display: none;

}



.utpl-header--landing.is-scrolled .utpl-brand-logo--light {

    display: none;

}



.utpl-header--landing.is-scrolled .utpl-brand-logo--dark {

    display: block;

}



.utpl-nav-link {

    color: rgba(255, 255, 255, 0.88) !important;

    font-weight: 500;

    font-size: 0.9375rem;

    padding: var(--utpl-space-2) var(--utpl-space-4) !important;

    transition: color var(--utpl-transition);

}



.utpl-nav-links {

    gap: var(--utpl-space-1);

}



.utpl-nav-link:hover {

    color: #fff !important;

}



.utpl-header--landing.is-scrolled .utpl-nav-link:hover {

    color: var(--utpl-brand) !important;

}



.utpl-nav-cta {

    border-radius: var(--utpl-radius-btn);

    font-weight: 600;

    box-shadow: var(--utpl-shadow-soft);

}



.utpl-nav-cta-outline {

    border-radius: var(--utpl-radius-btn);

    font-weight: 600;

    border-color: rgba(255, 255, 255, 0.35) !important;

    color: #fff !important;

}



.utpl-header--landing.is-scrolled .utpl-nav-cta-outline {

    border-color: var(--utpl-border) !important;

    color: var(--utpl-ink) !important;

}



.utpl-mega-nav-item {

    position: static;

}



.utpl-mega-menu {

    width: min(1100px, calc(100vw - 2rem));

    left: 50% !important;

    transform: translateX(-50%);

    border-radius: 1rem;

    margin-top: 0.75rem;

}



.utpl-mega-link,

.utpl-mega-child-link,

.utpl-mobile-nav__link,

.utpl-mobile-nav__sublink {

    color: var(--utpl-ink);

    text-decoration: none;

}



.utpl-mega-link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 600;

}



.utpl-mega-link__icon {

    color: var(--utpl-brand);

}



.utpl-mega-link__description {

    margin-top: 0.5rem;

    color: var(--utpl-muted);

    font-size: 0.9375rem;

}



.utpl-mega-child-link {

    font-weight: 500;

}



.utpl-mega-featured-stack {

    display: grid;

    gap: 1rem;

}



.utpl-mega-featured-card {

    display: block;

    padding: 1rem;

    border: 1px solid var(--utpl-border);

    border-radius: 1rem;

    background: var(--utpl-surface);

    color: var(--utpl-ink);

    text-decoration: none;

}



.utpl-mega-featured-card__image {

    width: 100%;

    max-height: 10rem;

    object-fit: cover;

    border-radius: 0.75rem;

    margin-bottom: 0.75rem;

}



.utpl-mega-badge {

    margin-left: 0.5rem;

}



.utpl-mobile-nav .accordion-button {

    font-weight: 600;

    padding-left: 0;

    padding-right: 0;

    background: transparent;

}



.utpl-mobile-nav .accordion-item,

.utpl-mobile-nav .accordion-button:not(.collapsed) {

    background: transparent;

}



.utpl-mobile-nav__link {

    font-weight: 600;

}



.utpl-mobile-nav__sublink {

    font-size: 0.9375rem;

}



@media (max-width: 991.98px) {

    .utpl-nav-links--desktop {

        display: none !important;

    }
}



/* ─── Hero ─── */

.utpl-landing-hero {

    background: var(--utpl-gradient-hero);

    color: #fff;

    padding: var(--utpl-space-30) 0;

    min-height: auto;

}



.min-vh-75 {

    min-height: 75vh;

}



.utpl-hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    opacity: 0.45;

    pointer-events: none;

}



.utpl-hero-glow--1 {

    width: 480px;

    height: 480px;

    background: var(--utpl-brand);

    top: -120px;

    right: -80px;

}



.utpl-hero-glow--2 {

    width: 320px;

    height: 320px;

    background: #00d4ff;

    bottom: 10%;

    left: -60px;

    opacity: 0.25;

}



.utpl-hero-title {

    letter-spacing: -0.03em;

    line-height: var(--utpl-leading-heading);

}



.utpl-hero-lead {

    color: rgba(255, 255, 255, 0.78);

    font-size: 1.2rem;

    max-width: 540px;

    line-height: 1.65;

}



.utpl-badge {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: var(--utpl-radius-full);

    padding: 0.45rem 1rem;

    font-size: 0.8125rem;

    font-weight: 500;

    color: rgba(255, 255, 255, 0.92);

}



.utpl-badge-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #3ecf8e;

    box-shadow: 0 0 8px #3ecf8e;

}



.utpl-btn-primary {

    border-radius: var(--utpl-radius-btn);

    font-weight: 600;

    transition: transform var(--utpl-transition), box-shadow var(--utpl-transition), background-color var(--utpl-transition);

}



.utpl-btn-primary:hover {

    transform: scale(1.02);

    box-shadow: var(--utpl-shadow-strong);

}



.utpl-btn-ghost {

    border-radius: var(--utpl-radius-btn);

    border-color: rgba(255, 255, 255, 0.35) !important;

    color: #fff !important;

    font-weight: 600;

}



.utpl-btn-ghost:hover {

    background: rgba(255, 255, 255, 0.1) !important;

    color: #fff !important;

}



.utpl-hero-visual {

    position: relative;

    height: 380px;

}



.utpl-hero-orb {

    position: absolute;

    border-radius: var(--utpl-radius-lg);

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(8px);

    animation: utpl-float 6s ease-in-out infinite;

}



.utpl-hero-orb--1 {

    width: 220px;

    height: 220px;

    top: 20%;

    right: 10%;

}



.utpl-hero-orb--2 {

    width: 160px;

    height: 160px;

    bottom: 15%;

    left: 5%;

    animation-delay: -2s;

}



.utpl-hero-orb--3 {

    width: 120px;

    height: 120px;

    top: 10%;

    left: 30%;

    animation-delay: -4s;

}



@keyframes utpl-float {

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

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

}



/* ─── Sections ─── */

.utpl-section {

    padding: var(--utpl-space-20) 0;

}



.utpl-section--white {

    background: var(--utpl-surface);

}



.utpl-section--muted {

    background: var(--utpl-surface-muted);

}



.utpl-section-header {

    max-width: 680px;

}



.utpl-section-title {

    letter-spacing: -0.025em;

    color: var(--utpl-ink);

}



.utpl-section-subtitle {

    font-size: 1.0625rem;

    line-height: var(--utpl-leading-body);

    color: var(--utpl-ink-muted);

}



/* ─── Cards ─── */

.utpl-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius-lg);

    padding: var(--utpl-space-6);

    box-shadow: var(--utpl-shadow-soft);

    transition: transform var(--utpl-transition), box-shadow var(--utpl-transition), border-color var(--utpl-transition);

}



.utpl-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow-medium);

    border-color: rgba(37, 99, 235, 0.2);

}



.utpl-card--service {

    color: inherit;

    display: flex;

    flex-direction: column;

}



.utpl-card-icon {

    width: 52px;

    height: 52px;

    border-radius: var(--utpl-radius-lg);

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04));

    color: var(--utpl-brand);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.35rem;

    margin-bottom: 1.25rem;

}



.utpl-card-link {

    color: var(--utpl-brand);

    font-weight: 600;

    font-size: 0.9375rem;

    margin-top: auto;

}



.utpl-card--pricing {

    text-align: left;

}



.utpl-card--demo {

    border: 1px solid var(--utpl-border);

    box-shadow: var(--utpl-shadow);

}



.utpl-price {

    font-size: 2.25rem;

    font-weight: 700;

    letter-spacing: -0.03em;

    color: var(--utpl-ink);

}



.utpl-price span {

    font-size: 0.875rem;

    font-weight: 500;

    color: var(--utpl-ink-muted);

}



.utpl-checklist {

    list-style: none;

    padding: 0;

    margin: 0;

}



.utpl-checklist li {

    position: relative;

    padding-left: 1.5rem;

    margin-bottom: 0.65rem;

    font-size: 0.9375rem;

    color: var(--utpl-ink-muted);

}



.utpl-checklist li::before {

    content: "\F26E";

    font-family: "bootstrap-icons";

    position: absolute;

    left: 0;

    color: var(--utpl-brand);

    font-size: 0.875rem;

}



.utpl-feature-list-card {

    background: var(--utpl-surface-muted);

    border-radius: var(--utpl-radius);

    padding: 2rem;

    border: 1px solid var(--utpl-border);

}



.utpl-feature-list-card li {

    padding: 0.75rem 0;

    border-bottom: 1px solid var(--utpl-border);

    font-weight: 500;

    color: var(--utpl-ink);

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.utpl-feature-list-card li:last-child {

    border-bottom: none;

}



.utpl-feature-list-card li i {

    color: var(--utpl-brand);

    font-size: 1.1rem;

}



.utpl-highlight-box {

    background: rgba(37, 99, 235, 0.08);

    border-left: 3px solid var(--utpl-brand);

    padding: 1rem 1.25rem;

    border-radius: 0 12px 12px 0;

    font-size: 0.9375rem;

    color: var(--utpl-ink-muted);

}



/* ─── CTA strip ─── */

.utpl-cta-strip {

    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(0, 212, 255, 0.06));

    border-block: 1px solid var(--utpl-border);

    padding: 3rem 0;

}



/* ─── Pricing tabs ─── */

.utpl-pricing-tabs .nav-link {

    border-radius: var(--utpl-radius-full);

    padding: 0.55rem 1.25rem;

    font-weight: 600;

    font-size: 0.875rem;

    color: var(--utpl-ink-muted);

    border: 1px solid transparent;

    transition: all 0.2s ease;

}



.utpl-pricing-tabs .nav-link.active {

    background: var(--utpl-brand);

    color: #fff;

    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);

}



/* ─── Testimonials carousel ─── */

.utpl-testimonials-carousel {

    background: var(--utpl-surface-muted);

}



.utpl-testimonial-slide {

    max-width: 720px;

    padding: 2rem 3rem 3rem;

}



.utpl-stars {

    color: #f5a623;

    font-size: 1.1rem;

    letter-spacing: 0.15em;

}



.utpl-quote {

    font-size: clamp(1.125rem, 2.5vw, 1.5rem);

    line-height: 1.65;

    color: var(--utpl-ink);

    font-weight: 400;

    border: none;

    margin: 0;

}



.utpl-carousel-control {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    top: 50%;

    transform: translateY(-50%);

    opacity: 1;

}



.utpl-carousel .carousel-control-prev {

    left: -12px;

}



.utpl-carousel .carousel-control-next {

    right: -12px;

}



.utpl-carousel .carousel-indicators [data-bs-target] {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: var(--utpl-brand);

    opacity: 0.35;

}



.utpl-carousel .carousel-indicators .active {

    opacity: 1;

}



/* ─── Industries & tech ─── */

.utpl-industry-chip {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1rem 1.25rem;

    text-align: center;

    font-weight: 600;

    font-size: 0.875rem;

    color: var(--utpl-ink);

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}



.utpl-industry-chip:hover {

    transform: translateY(-3px);

    box-shadow: var(--utpl-shadow);

    border-color: rgba(37, 99, 235, 0.3);

}



.utpl-tech-icon {

    padding: 1.25rem 0.5rem;

    border-radius: var(--utpl-radius);

    transition: transform 0.2s ease, background 0.2s ease;

}



.utpl-tech-icon i {

    display: block;

    font-size: 2rem;

    color: var(--utpl-brand);

    margin-bottom: 0.5rem;

}



.utpl-tech-icon span {

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--utpl-ink-muted);

}



.utpl-tech-icon:hover {

    transform: translateY(-4px);

    background: var(--utpl-surface-muted);

}



/* ─── Final CTA ─── */

.utpl-final-cta {

    background: linear-gradient(135deg, var(--utpl-brand) 0%, var(--utpl-brand-dark) 50%, var(--utpl-ink) 100%);

    color: #fff;

    padding: var(--utpl-space-20) 0;

}



.utpl-final-cta-inner {

    max-width: 640px;

}



/* ─── Tags ─── */

.utpl-tag {

    display: inline-block;

    background: var(--utpl-surface-muted);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius-full);

    padding: 0.35rem 0.9rem;

    font-size: 0.8125rem;

    font-weight: 600;

    color: var(--utpl-ink-muted);

}



/* ─── WhatsApp float ─── */

.utpl-whatsapp-float {

    position: fixed;

    bottom: 24px;

    right: 24px;

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: #25d366;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.75rem;

    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);

    z-index: 1040;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    text-decoration: none;

}



.utpl-whatsapp-float:hover {

    transform: scale(1.08);

    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);

    color: #fff;

}



/* ─── Footer ─── */

.utpl-footer {

    border-top: 1px solid var(--utpl-border);

}



/* ─── Legacy / other pages ─── */

.utpl-hero {

    background: var(--utpl-gradient-hero);

    color: #fff;

    padding: var(--utpl-space-30) 0;

}



.utpl-hero-image {

    max-height: 420px;

    object-fit: cover;

}



.utpl-cta {

    padding: var(--utpl-space-20) 0;

}



.utpl-cta-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border) !important;

    border-radius: var(--utpl-radius-lg);

    box-shadow: var(--utpl-shadow-soft) !important;

}



.utpl-cta-text {

    max-width: 640px;

}



.form-control,
.form-select {

    border-radius: var(--utpl-radius-sm);

    border-color: var(--utpl-gray-200);

    padding: 0.625rem 0.875rem;

    transition: border-color var(--utpl-transition), box-shadow var(--utpl-transition);

}



.form-control:focus,
.form-select:focus {

    border-color: var(--utpl-brand);

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

}



.card.utpl-card:hover,
.utpl-pricing-card.utpl-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow-medium) !important;

}



.py-lg-6 {

    padding-top: 5rem !important;

    padding-bottom: 5rem !important;

}



@media (min-width: 992px) {

    .py-lg-6 {

        padding-top: 6rem !important;

        padding-bottom: 6rem !important;

    }



    .utpl-section {

        padding: 6rem 0;

    }



    .utpl-carousel .carousel-control-prev {

        left: -24px;

    }



    .utpl-carousel .carousel-control-next {

        right: -24px;

    }

}



@media (max-width: 991.98px) {

    .utpl-landing-hero {

        min-height: auto;

    }



    .utpl-testimonial-slide {

        padding: 1rem 1rem 2.5rem;

    }



    .utpl-carousel-control {

        display: none;

    }

}



@media (max-width: 575.98px) {

    .utpl-section {

        padding: 3.5rem 0;

    }



    .utpl-card {

        padding: 1.5rem;

    }

}



/* Unified card variants */

.utpl-industry-card,

.utpl-channel-card,

.utpl-outcome-card,

.utpl-pain-card,

.utpl-process-card,

.utpl-compliance-card,

.utpl-engagement-card,

.utpl-case-study-card,

.utpl-talent-chip,

.utpl-tech-icon--card {

    border-radius: var(--utpl-radius-lg);

    box-shadow: var(--utpl-shadow-soft);

    transition: transform var(--utpl-transition), box-shadow var(--utpl-transition), border-color var(--utpl-transition);

}



.utpl-industry-card:hover,

.utpl-channel-card:hover,

.utpl-outcome-card:hover,

.utpl-pain-card:hover,

.utpl-process-card:hover,

.utpl-compliance-card:hover,

.utpl-engagement-card:hover,

.utpl-case-study-card:hover,

.utpl-talent-chip:hover,

.utpl-tech-icon--card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow-medium);

}

.utpl-trust-strip {

    background: var(--utpl-surface-muted);

    border-top: 1px solid var(--utpl-border);

    border-bottom: 1px solid var(--utpl-border);

    padding: 1.75rem 0;

}



.utpl-trust-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    color: var(--utpl-ink-muted);

    font-size: 0.875rem;

    font-weight: 600;

}



.utpl-trust-item i {

    font-size: 1.35rem;

    color: var(--utpl-brand);

}



.utpl-process-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1.75rem;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.utpl-process-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow);

}



.utpl-process-step {

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--utpl-brand);

    margin-bottom: 0.75rem;

}



.utpl-process-icon {

    width: 44px;

    height: 44px;

    border-radius: var(--utpl-radius);

    background: rgba(37, 99, 235, 0.1);

    color: var(--utpl-brand);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    margin-bottom: 1rem;

}



.utpl-capability-group {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 2rem;

    transition: border-color 0.25s ease, box-shadow 0.25s ease;

}



.utpl-capability-group:hover {

    border-color: rgba(37, 99, 235, 0.25);

    box-shadow: var(--utpl-shadow);

}



.utpl-case-study-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 2rem;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.utpl-case-study-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--utpl-shadow-lg);

}



.utpl-case-study-metric {

    display: inline-block;

    font-size: 0.8125rem;

    font-weight: 700;

    color: var(--utpl-brand);

    background: rgba(37, 99, 235, 0.1);

    border-radius: var(--utpl-radius-full);

    padding: 0.35rem 0.85rem;

    margin-bottom: 1rem;

}



/* ─── IT Conversion Engine v2 ─── */

.utpl-services-it-page .utpl-section--spacious {

    padding: var(--utpl-space-20) 0;

}



.utpl-services-it-page .utpl-section-title {

    letter-spacing: -0.03em;

    line-height: 1.15;

}



.utpl-eyebrow {

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--utpl-brand);

}



.utpl-hero--conversion .utpl-hero-title {

    line-height: 1.08;

    max-width: 18ch;

}



.utpl-hero--conversion .utpl-hero-lead {

    max-width: 52ch;

    font-size: 1.2rem;

    line-height: 1.65;

}



.utpl-pain-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1.75rem;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.utpl-pain-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow);

    border-color: rgba(220, 53, 69, 0.2);

}



.utpl-pain-icon {

    width: 48px;

    height: 48px;

    border-radius: var(--utpl-radius);

    background: rgba(220, 53, 69, 0.08);

    color: #dc3545;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    margin-bottom: 1rem;

}



.utpl-outcome-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius-lg);

    padding: 2rem;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.utpl-outcome-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--utpl-shadow-lg);

    border-color: rgba(37, 99, 235, 0.3);

}



.utpl-outcome-icon {

    width: 52px;

    height: 52px;

    border-radius: var(--utpl-radius-lg);

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.04));

    color: var(--utpl-brand);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.35rem;

    margin-bottom: 1.25rem;

}



.utpl-outcome-metric {

    font-size: 0.9375rem;

    font-weight: 700;

    color: var(--utpl-brand);

}



.utpl-card--elevated {

    box-shadow: var(--utpl-shadow);

}



.utpl-industry-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1.5rem 1.75rem;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.utpl-industry-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow);

    border-color: rgba(37, 99, 235, 0.25);

}



.utpl-tech-icon--card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1.25rem 0.75rem;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.utpl-tech-icon--card:hover {

    transform: translateY(-3px);

    box-shadow: var(--utpl-shadow);

}



.utpl-case-study-card--psr {

    margin-bottom: 0;

}



.utpl-case-study-industry {

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--utpl-ink-muted);

}



.utpl-case-study-card--psr .utpl-case-study-metric {

    margin-bottom: 0;

    flex-shrink: 0;

}



.utpl-psr-block {

    padding: 0.85rem 0;

    border-top: 1px solid var(--utpl-border);

}



.utpl-psr-block--result {

    border-top-color: rgba(37, 99, 235, 0.2);

    background: rgba(37, 99, 235, 0.04);

    margin: 0 -2rem -2rem;

    padding: 1rem 2rem 1.5rem;

    border-radius: 0 0 var(--utpl-radius) var(--utpl-radius);

}



.utpl-psr-label {

    display: block;

    font-size: 0.6875rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--utpl-brand);

    margin-bottom: 0.35rem;

}



.utpl-section-cta {

    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), rgba(0, 212, 255, 0.04));

    border-block: 1px solid var(--utpl-border);

    padding: 2rem 0;

}



.utpl-section-cta-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    text-align: center;

}



@media (min-width: 768px) {

    .utpl-section-cta-inner {

        flex-direction: row;

        justify-content: space-between;

        text-align: left;

    }

}



.utpl-section-cta-label {

    font-weight: 600;

    color: var(--utpl-ink);

    font-size: 1.0625rem;

}



.utpl-section-cta-btn {

    white-space: nowrap;

    padding: 0.75rem 1.5rem;

    font-weight: 600;

}



@media (max-width: 767.98px) {

    .utpl-services-it-page .utpl-section--spacious,
    .utpl-section {

        padding: var(--utpl-space-16) 0;

    }



    .utpl-landing-hero,
    .utpl-hero {

        padding: var(--utpl-space-20) 0;

    }

}



/* ─── Digital Marketing Conversion Engine v2 ─── */

.utpl-hero--marketing .utpl-hero-glow--1 {

    background: radial-gradient(circle, rgba(0, 212, 255, 0.18) 0%, transparent 70%);

}



.utpl-pain-icon--marketing {

    background: rgba(255, 107, 53, 0.1) !important;

    color: #ff6b35 !important;

}



.utpl-pain-card--marketing:hover {

    border-color: rgba(255, 107, 53, 0.25) !important;

}



.utpl-outcome-card--marketing .utpl-outcome-icon {

    background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(37, 99, 235, 0.06));

}



.utpl-card--conversion {

  position: relative;

}



.utpl-conversion-metric {

    display: inline-block;

    font-size: 0.75rem;

    font-weight: 700;

    color: var(--utpl-brand);

    background: rgba(37, 99, 235, 0.1);

    border-radius: var(--utpl-radius-full);

    padding: 0.3rem 0.75rem;

    margin-bottom: 0.75rem;

}



.utpl-conversion-outcome {

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--utpl-ink);

}



.utpl-channel-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius-lg);

    padding: 2rem;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.utpl-channel-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--utpl-shadow-lg);

    border-color: rgba(37, 99, 235, 0.25);

}



.utpl-channel-icon {

    width: 56px;

    height: 56px;

    border-radius: var(--utpl-radius-lg);

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(0, 212, 255, 0.08));

    color: var(--utpl-brand);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    margin-bottom: 1.25rem;

}



.utpl-process-card--marketing {

    text-align: center;

}



.utpl-process-card--marketing .utpl-process-icon {

    margin-left: auto;

    margin-right: auto;

}



.utpl-engagement-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1.75rem;

    text-align: center;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.utpl-engagement-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow);

    border-color: rgba(37, 99, 235, 0.25);

}



.utpl-engagement-icon {

    width: 48px;

    height: 48px;

    border-radius: var(--utpl-radius);

    background: rgba(37, 99, 235, 0.1);

    color: var(--utpl-brand);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    margin: 0 auto 1rem;

}



/* ─── Staffing Conversion Engine v2 ─── */

.utpl-hero--staffing .utpl-hero-glow--2 {

    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);

}



.utpl-pain-icon--staffing {

    background: rgba(16, 185, 129, 0.1) !important;

    color: #10b981 !important;

}



.utpl-pain-card--staffing:hover {

    border-color: rgba(16, 185, 129, 0.25) !important;

}



.utpl-outcome-card--staffing .utpl-outcome-icon {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(37, 99, 235, 0.06));

}



.utpl-process-card--staffing {

    text-align: center;

}



.utpl-process-card--staffing .utpl-process-icon {

    margin-left: auto;

    margin-right: auto;

}



.utpl-talent-chip {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1rem 1.25rem;

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--utpl-ink);

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}



.utpl-talent-chip i {

    color: var(--utpl-brand);

    font-size: 1.1rem;

}



.utpl-talent-chip:hover {

    transform: translateY(-3px);

    box-shadow: var(--utpl-shadow);

    border-color: rgba(37, 99, 235, 0.25);

}



.utpl-compliance-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius);

    padding: 1.75rem;

    text-align: center;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.utpl-compliance-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--utpl-shadow);

    border-color: rgba(16, 185, 129, 0.25);

}



.utpl-compliance-icon {

    width: 48px;

    height: 48px;

    border-radius: var(--utpl-radius);

    background: rgba(16, 185, 129, 0.1);

    color: #10b981;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    margin: 0 auto 1rem;

}



/* ─── Marketing funnel v2 ─── */

.utpl-trust-pills {

    font-size: 0.875rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.75);

    letter-spacing: 0.02em;

}



.utpl-trust-pills-sep {

    margin: 0 0.5rem;

    opacity: 0.5;

}



.utpl-system-card .utpl-outcome-icon {

    margin-bottom: var(--utpl-space-4);

}



.utpl-result-metrics {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.utpl-result-metric {

    font-size: 0.9375rem;

    font-weight: 700;

    color: var(--utpl-brand);

}



.utpl-industry-target-card strong {

    color: var(--utpl-ink);

    font-weight: 600;

}



.utpl-package-card {

    position: relative;

}



.utpl-package-card--featured {

    border-color: rgba(37, 99, 235, 0.35);

    box-shadow: var(--utpl-shadow-medium);

}



.utpl-package-badge {

    position: absolute;

    top: var(--utpl-space-4);

    right: var(--utpl-space-4);

    font-size: 0.6875rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--utpl-brand);

    background: rgba(37, 99, 235, 0.1);

    border-radius: var(--utpl-radius-pill);

    padding: 0.25rem 0.65rem;

}



.utpl-logo-row {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: var(--utpl-space-6);

}



.utpl-logo-placeholder {

    font-size: 0.9375rem;

    font-weight: 700;

    color: var(--utpl-gray-400);

    letter-spacing: -0.02em;

    padding: var(--utpl-space-3) var(--utpl-space-5);

    border: 1px dashed var(--utpl-gray-200);

    border-radius: var(--utpl-radius-sm);

}



.utpl-metric-strip-card {

    background: var(--utpl-surface);

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius-lg);

    padding: var(--utpl-space-6);

    box-shadow: var(--utpl-shadow-soft);

}



.utpl-metric-strip-value {

    font-size: clamp(1.75rem, 3vw, 2.25rem);

    font-weight: 700;

    color: var(--utpl-brand);

    letter-spacing: -0.03em;

    line-height: 1.1;

}



.utpl-metric-strip-label {

    font-size: 0.875rem;

    color: var(--utpl-ink-muted);

    margin-top: var(--utpl-space-2);

}



/* ─── Staffing funnel v2 ─── */

.utpl-hiring-timeline {

    display: grid;

    gap: var(--utpl-space-4);

    max-width: 720px;

    margin: 0 auto;

}



.utpl-hiring-timeline-step {

    display: grid;

    grid-template-columns: 56px 1fr;

    gap: var(--utpl-space-4);

    align-items: start;

}



.utpl-hiring-timeline-marker {

    width: 56px;

    height: 56px;

    border-radius: var(--utpl-radius-lg);

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(37, 99, 235, 0.1));

    color: #10b981;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

}



.utpl-hiring-timeline-content {

    margin-bottom: 0;

}



.utpl-hiring-timeline-day {

    display: inline-block;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--utpl-brand);

    margin-bottom: var(--utpl-space-2);

}



@media (min-width: 768px) {

    .utpl-hiring-timeline {

        position: relative;

        padding-left: 28px;

    }



    .utpl-hiring-timeline::before {

        content: "";

        position: absolute;

        left: 27px;

        top: 28px;

        bottom: 28px;

        width: 2px;

        background: linear-gradient(180deg, var(--utpl-brand), rgba(16, 185, 129, 0.5));

        opacity: 0.35;

    }



    .utpl-hiring-timeline-step {

        grid-template-columns: 56px 1fr;

    }

}



/* Pricing Hub — Revenue Conversion Engine v2 */

.utpl-pricing-hub {

    padding-top: var(--utpl-space-10);

}



.utpl-pricing-tabs {

    gap: var(--utpl-space-2);

    flex-wrap: wrap;

    padding: 4px;

    border-radius: var(--utpl-radius-full);

    background: var(--utpl-surface-muted);

    border: 1px solid var(--utpl-border);

    display: inline-flex;

}



.utpl-pricing-tab {

    border: 0;

    background: transparent;

    color: var(--utpl-muted);

    font-weight: 600;

    font-size: 0.9375rem;

    padding: 0.625rem 1.25rem;

    border-radius: var(--utpl-radius-full);

    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

}



.utpl-pricing-tab:hover {

    color: var(--utpl-ink);

}



.utpl-pricing-tab.active {

    background: #fff;

    color: var(--utpl-brand);

    box-shadow: var(--utpl-shadow-soft);

}



.utpl-pricing-panel {

    display: none;

}



.utpl-pricing-panel.active {

    display: block;

    animation: utpl-fade-in 0.25s ease;

}



.utpl-pricing-mobile-select .form-select {

    border-radius: var(--utpl-radius);

    border-color: var(--utpl-border);

    padding: 0.75rem 1rem;

    font-weight: 500;

}



.utpl-pricing-compare-wrap {

    border: 1px solid var(--utpl-border);

    border-radius: var(--utpl-radius-lg);

    padding: var(--utpl-space-6);

    background: var(--utpl-surface-muted);

}



.utpl-pricing-compare-table {

    --bs-table-bg: transparent;

    margin-bottom: 0;

}



.utpl-pricing-compare-table thead th {

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--utpl-ink);

    border-bottom-width: 1px;

    white-space: nowrap;

}



.utpl-pricing-compare-table tbody th,

.utpl-pricing-compare-table tbody td {

    font-size: 0.9375rem;

    vertical-align: middle;

    padding: 0.875rem 1rem;

}



.utpl-compare-feature-col {

    min-width: 180px;

    font-weight: 500;

    color: var(--utpl-ink);

}



.utpl-compare-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1.5rem;

    height: 1.5rem;

    border-radius: var(--utpl-radius-full);

    font-size: 0.75rem;

    font-weight: 700;

}



.utpl-compare-icon--yes {

    color: var(--utpl-brand);

    background: rgba(16, 185, 129, 0.12);

}



.utpl-compare-icon--no {

    color: #94a3b8;

    background: rgba(148, 163, 184, 0.15);

}



.utpl-pricing-cta-banner {

    padding: var(--utpl-space-8) var(--utpl-space-6);

    border-radius: var(--utpl-radius-lg);

    border: 1px solid var(--utpl-border);

    background: linear-gradient(180deg, #fff 0%, var(--utpl-surface-muted) 100%);

    box-shadow: var(--utpl-shadow);

}



@media (max-width: 767.98px) {

    .utpl-pricing-compare-wrap {

        padding: var(--utpl-space-4);

    }



    .utpl-pricing-compare-table thead th,

    .utpl-pricing-compare-table tbody th,

    .utpl-pricing-compare-table tbody td {

        font-size: 0.8125rem;

        padding: 0.625rem 0.5rem;

    }

}



/* About — Trust & Enterprise Credibility Engine v2 */

.utpl-about-page .utpl-hero--about {

    position: relative;

    overflow: hidden;

    padding: var(--utpl-space-30) 0 var(--utpl-space-20);

    background: linear-gradient(180deg, var(--utpl-gray-50) 0%, #fff 100%);

}



.utpl-about-eyebrow {

    font-size: 0.8125rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--utpl-brand);

}



.utpl-card--trust-badge {

    padding: var(--utpl-space-5);

    border: 1px solid var(--utpl-border);

    box-shadow: var(--utpl-shadow-soft);

    transition: transform var(--utpl-transition), box-shadow var(--utpl-transition);

}



.utpl-card--trust-badge:hover {

    transform: translateY(-2px);

    box-shadow: var(--utpl-shadow);

}



.utpl-trust-icon {

    font-size: 1.5rem;

    color: var(--utpl-brand);

    margin-bottom: var(--utpl-space-2);

    display: block;

}



.utpl-trust-value {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--utpl-ink);

    letter-spacing: -0.02em;

}



.utpl-trust-label {

    font-size: 0.875rem;

    color: var(--utpl-gray-500);

    margin-top: var(--utpl-space-1);

}



.utpl-about-story-visual {

    min-height: 320px;

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.06));

}



.utpl-about-visual-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    padding: var(--utpl-space-8);

}



.utpl-about-visual-grid span {

    aspect-ratio: 1;

    border-radius: var(--utpl-radius);

    background: rgba(255, 255, 255, 0.7);

    border: 1px solid var(--utpl-border);

}



.utpl-about-visual-caption {

    border-top: 1px solid var(--utpl-border);

    background: rgba(255, 255, 255, 0.85);

}



.utpl-mvv-icon {

    font-size: 1.5rem;

    color: var(--utpl-brand);

    margin-bottom: var(--utpl-space-3);

    display: block;

}



.utpl-card--value {

    padding: var(--utpl-space-5);

}



.utpl-card--leadership {

    padding: var(--utpl-space-6);

}



.utpl-leader-photo {

    width: 96px;

    height: 96px;

    border-radius: 50%;

    object-fit: cover;

    margin-left: auto;

    margin-right: auto;

    border: 3px solid #fff;

    box-shadow: var(--utpl-shadow-soft);

}



.utpl-leader-photo--placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--utpl-brand);

    color: #fff;

    font-size: 2rem;

    font-weight: 600;

}



.utpl-about-map-visual {

    position: relative;

    height: 180px;

    border-radius: var(--utpl-radius-lg);

    background: linear-gradient(135deg, #0a2540 0%, #1a3a5c 100%);

    overflow: hidden;

}



.utpl-map-node {

    position: absolute;

    padding: 0.375rem 0.75rem;

    border-radius: var(--utpl-radius-pill);

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    font-size: 0.75rem;

    font-weight: 600;

    backdrop-filter: blur(4px);

}



.utpl-map-node--us { top: 30%; left: 18%; }

.utpl-map-node--in { top: 45%; right: 22%; }

.utpl-map-node--remote { bottom: 20%; left: 42%; }



.utpl-about-timeline {

    display: flex;

    flex-direction: column;

    gap: var(--utpl-space-4);

}



.utpl-about-timeline-item {

    display: grid;

    grid-template-columns: 72px 1fr;

    gap: var(--utpl-space-4);

    align-items: start;

}



.utpl-about-timeline-year {

    font-size: 0.875rem;

    font-weight: 700;

    color: var(--utpl-brand);

    padding-top: 2px;

}



.utpl-about-timeline-content {

    padding: var(--utpl-space-4);

    border-radius: var(--utpl-radius);

    background: #fff;

    border: 1px solid var(--utpl-border);

    box-shadow: var(--utpl-shadow-soft);

}



.utpl-card--case-study {

    padding: var(--utpl-space-6);

}



.utpl-case-industry {

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--utpl-brand);

    margin-bottom: var(--utpl-space-2);

    display: block;

}



.utpl-case-metric {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--utpl-brand);

    letter-spacing: -0.02em;

}



/* Case Studies Engine */
.utpl-hero--case-studies,
.utpl-hero--case-study-detail {
    padding: var(--utpl-space-16) 0 var(--utpl-space-12);
}

.utpl-case-filters .form-select {
    border-radius: var(--utpl-radius-md);
}

.utpl-case-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--utpl-radius-md);
}

.utpl-case-studies-page .utpl-card--case-study,
.utpl-case-study-detail-page .utpl-card--case-study {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.utpl-case-studies-page .utpl-card--case-study:hover {
    transform: translateY(-2px);
    box-shadow: var(--utpl-shadow-md);
}



@media (max-width: 767.98px) {

    .utpl-about-page .utpl-hero--about {

        padding: var(--utpl-space-20) 0 var(--utpl-space-12);

    }

}



/* Industries hub + detail */

.utpl-industries-page .utpl-hero--industries {

    position: relative;

    overflow: hidden;

    padding: var(--utpl-space-30) 0 var(--utpl-space-20);

    background: linear-gradient(180deg, var(--utpl-gray-50) 0%, #fff 100%);

}



.utpl-card--industry {

    padding: var(--utpl-space-6);

    transition: transform var(--utpl-transition), box-shadow var(--utpl-transition);

}



.utpl-card--industry:hover {

    transform: translateY(-3px);

    box-shadow: var(--utpl-shadow);

}



.utpl-industry-icon {

    font-size: 1.75rem;

    color: var(--utpl-brand);

    margin-bottom: var(--utpl-space-3);

    display: block;

}



.utpl-card--service-link,

.utpl-card--solution {

    padding: var(--utpl-space-6);

}



.utpl-breadcrumb .breadcrumb-item a {

    color: var(--utpl-brand);

    text-decoration: none;

}



.utpl-breadcrumb .breadcrumb-item.active {

    color: var(--utpl-gray-500);

}



.utpl-industry-links {

    border-top: 1px solid var(--utpl-border);

}



@media (max-width: 767.98px) {
    .utpl-industries-page .utpl-hero--industries {
        padding: var(--utpl-space-20) 0 var(--utpl-space-12);
    }
}

/* About trust engine */
.utpl-client-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--utpl-space-4);
    align-items: center;
}

.utpl-client-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--utpl-space-3) var(--utpl-space-4);
    border-radius: var(--utpl-radius);
    background: #fff;
    border: 1px solid var(--utpl-border);
}

.utpl-client-logo-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--utpl-text-muted);
    letter-spacing: 0.02em;
}

.utpl-client-logo-img {
    max-height: 36px;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.85;
}

.utpl-card--delivery-hub .utpl-delivery-hub-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--utpl-primary);
    background: rgba(37, 99, 235, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: var(--utpl-radius-full);
}

.utpl-methodology-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--utpl-space-4);
    position: relative;
}

.utpl-methodology-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--utpl-border);
    border-radius: var(--utpl-radius);
    padding: var(--utpl-space-5);
    box-shadow: var(--utpl-shadow-soft);
}

.utpl-methodology-step-number {
    position: absolute;
    top: -12px;
    left: var(--utpl-space-4);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--utpl-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.utpl-card--trust-pillar .utpl-trust-pillar-category {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--utpl-text-muted);
    margin-bottom: var(--utpl-space-2);
}

/* ═══════════════════════════════════════════════════════════
   Phase 33.3 — Public website enterprise migration
   ═══════════════════════════════════════════════════════════ */

body.utpl-marketing-shell {
    background: var(--utpl-color-bg);
    color: var(--utpl-color-text);
}

.utpl-header--standard .utpl-navbar--standard {
    background: var(--utpl-glass-bg-strong);
    border-bottom: var(--utpl-glass-border-light);
}

.utpl-header--landing .utpl-navbar {
    background: var(--utpl-glass-bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.utpl-card {
    border-radius: var(--utpl-radius-xl);
    border: 1px solid var(--utpl-color-border);
    box-shadow: var(--utpl-elevation-2);
    transition: var(--utpl-transition-shadow), var(--utpl-transition-transform);
}

.utpl-card:hover {
    box-shadow: var(--utpl-elevation-4);
}

.utpl-card--pricing {
    border-radius: var(--utpl-radius-2xl);
    padding: var(--utpl-space-6);
}

.utpl-card--pricing:hover {
    transform: translateY(-4px);
    border-color: var(--utpl-color-primary);
    box-shadow: var(--utpl-shadow-brand);
}

.utpl-card--service:hover {
    transform: translateY(-3px);
    border-color: var(--utpl-color-primary);
}

.utpl-testimonial-slide {
    background: var(--utpl-color-surface);
    border: 1px solid var(--utpl-color-border);
    border-radius: var(--utpl-radius-2xl);
    box-shadow: var(--utpl-elevation-3);
    padding: var(--utpl-space-10) var(--utpl-space-8);
    max-width: 720px;
}

.utpl-quote {
    font-size: var(--utpl-text-lg);
    line-height: var(--utpl-leading-relaxed);
    color: var(--utpl-color-text-secondary);
}

.utpl-stars {
    color: var(--utpl-color-cta);
}

.utpl-footer {
    background: var(--utpl-color-bg-inverse);
    color: var(--utpl-color-text-inverse);
    padding: var(--utpl-space-16) 0 var(--utpl-space-8);
    margin-top: auto;
}

.utpl-footer__brand {
    display: inline-block;
    font-size: var(--utpl-text-xl);
    font-weight: var(--utpl-font-bold);
    color: var(--utpl-color-text-inverse);
    text-decoration: none;
    margin-bottom: var(--utpl-space-3);
}

.utpl-footer__tagline {
    color: var(--utpl-slate-400);
    font-size: var(--utpl-text-base);
    line-height: var(--utpl-leading-relaxed);
    max-width: 320px;
    margin: 0;
}

.utpl-footer__heading {
    font-size: var(--utpl-text-sm);
    font-weight: var(--utpl-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--utpl-tracking-wider);
    color: var(--utpl-slate-300);
    margin-bottom: var(--utpl-space-4);
}

.utpl-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.utpl-footer__links li + li {
    margin-top: var(--utpl-space-2);
}

.utpl-footer__links a {
    color: var(--utpl-slate-300);
    text-decoration: none;
    font-size: var(--utpl-text-base);
    transition: color var(--utpl-duration-normal) var(--utpl-ease-default);
}

.utpl-footer__links a:hover {
    color: var(--utpl-color-text-inverse);
}

.utpl-footer__bottom {
    margin-top: var(--utpl-space-12);
    padding-top: var(--utpl-space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.utpl-footer__copy {
    margin: 0;
    font-size: var(--utpl-text-sm);
    color: var(--utpl-slate-500);
}

.utpl-contact-form .form-label {
    font-size: var(--utpl-text-sm);
    font-weight: var(--utpl-font-medium);
    color: var(--utpl-color-text);
}

.utpl-contact-form .form-control,
.utpl-contact-form .form-select {
    border-radius: var(--utpl-radius-sm);
    border-color: var(--utpl-color-border-strong);
    padding: var(--utpl-space-2-5) var(--utpl-space-3);
    transition: var(--utpl-transition-colors), box-shadow var(--utpl-duration-normal) var(--utpl-ease-default);
}

.utpl-contact-form .form-control:focus,
.utpl-contact-form .form-select:focus {
    border-color: var(--utpl-color-border-focus);
    box-shadow: var(--utpl-shadow-focus);
}

#contactFormAlert.alert-success,
#contactFormAlert.utpl-alert--success {
    background: var(--utpl-color-success-soft);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--utpl-color-success-text);
    border-radius: var(--utpl-radius);
    padding: var(--utpl-space-3) var(--utpl-space-4);
}

#contactFormAlert.alert-danger,
#contactFormAlert.utpl-alert--danger {
    background: var(--utpl-color-danger-soft);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--utpl-color-danger-text);
    border-radius: var(--utpl-radius);
    padding: var(--utpl-space-3) var(--utpl-space-4);
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

.utpl-blog-hub-page .utpl-hero--compact,
.utpl-about-page .utpl-hero,
.utpl-industries-page .utpl-hero,
.utpl-case-studies-page .utpl-hero {
    background: var(--utpl-gradient-subtle);
    color: var(--utpl-color-text);
}

.utpl-blog-hub-page .utpl-hero-title,
.utpl-about-page .utpl-hero-title,
.utpl-industries-page .utpl-hero-title,
.utpl-case-studies-page .utpl-hero-title {
    color: var(--utpl-color-text);
}

.utpl-blog-hub-page .utpl-hero-lead,
.utpl-about-page .utpl-hero-lead,
.utpl-industries-page .utpl-hero-lead,
.utpl-case-studies-page .utpl-hero-lead {
    color: var(--utpl-color-text-muted);
}

.utpl-final-cta {
    background: var(--utpl-gradient-brand);
    border-radius: var(--utpl-radius-2xl);
    padding: var(--utpl-space-12);
    box-shadow: var(--utpl-shadow-purple);
}

.utpl-hero-glow--1 {
    background: var(--utpl-color-primary);
}

.utpl-hero-glow--2 {
    background: var(--utpl-color-accent);
}

.utpl-hero-orb--1 { background: var(--utpl-blue-400); }
.utpl-hero-orb--2 { background: var(--utpl-purple-400); }
.utpl-hero-orb--3 { background: var(--utpl-orange-400); }

.utpl-nav-cta.utpl-btn--cta,
a.utpl-btn--cta {
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
}

.utpl-pricing-tab.active,
.utpl-pricing-tabs .nav-link.active {
    background: var(--utpl-color-primary-soft);
    color: var(--utpl-color-primary);
    border-color: var(--utpl-color-primary);
}

.utpl-blog-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--utpl-radius-xl) var(--utpl-radius-xl) 0 0;
}

.utpl-card--interactive .utpl-card__body {
    padding: var(--utpl-space-5);
}

@media (max-width: 767.98px) {
    .utpl-footer {
        padding: var(--utpl-space-12) 0 var(--utpl-space-6);
    }

    .utpl-testimonial-slide {
        padding: var(--utpl-space-6) var(--utpl-space-4);
    }
}

/* ═══════════════════════════════════════════════════════════
   Phase 33.7 — Enterprise UX polish (public website)
   ═══════════════════════════════════════════════════════════ */

.utpl-marketing-shell section {
    margin-bottom: var(--utpl-space-12);
}

.utpl-hero,
.utpl-smart-hero {
    margin-bottom: var(--utpl-space-16);
}

.utpl-pricing-card,
.utpl-service-card,
.utpl-blog-card {
    will-change: transform;
}

.utpl-contact-form .utpl-card {
    box-shadow: var(--utpl-elevation-4);
}