/* ==========================================================================
   UNICORN CASE STUDIES - CSS
   ========================================================================== */

:root {
    --ucs-primary: #020B60;
    --ucs-primary-light: #2D61F0;
    --ucs-accent: #A6D30F;
    --ucs-highlight: #e2a9f1;
    --ucs-white: #FFF;
    --ucs-gray: #ECF0F9;
    --ucs-border: #E2E8F0;
    --ucs-text: #000;
    --ucs-text-light: #818DAF;
    --ucs-radius: 12px;
    --ucs-success: #0F9D58;
    --ucs-danger: #EF4444;
}

/* ==========================================================================
   BASE
   ========================================================================== */

.single-case_study,
.post-type-archive-case_study {
    background-color: var(--ucs-white);
    color: var(--ucs-text);
    line-height: 1.6;
}

.single-case_study h1,
.single-case_study h2,
.single-case_study h3,
.single-case_study h4 {
    color: var(--ucs-primary);
    line-height: 1.3 !important;
}

/* White headings in dark boxes */
.ucs-hero h1,
.ucs-hero h2,
.ucs-hero h3,
.ucs-cta-box h1,
.ucs-cta-box h2,
.ucs-cta-box h3,
.ucs-testimonial h1,
.ucs-testimonial h2,
.ucs-testimonial h3,
.ucs-archive-hero h1,
.ucs-archive-hero h2,
.ucs-archive-hero h3 {
    color: var(--ucs-white) !important;
}

.ucs-container {
    max-width: var(--content-width, 1140px);
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 1024px) {
    .ucs-container {
        padding: 0 20px;
    }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.ucs-hero {
    background: var(--ucs-primary);
    color: var(--ucs-white);
    padding: 80px 0 0 0;
    overflow: hidden;
}

/* Nur Padding unten wenn Visual rechts ist (für absolute positioned elements) */
.ucs-hero:has(.ucs-hero-visual) {
    padding-bottom: 120px;
}

.ucs-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.ucs-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.ucs-hero h1 {
    color: var(--ucs-white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 20px;
}

.ucs-hero h1 span {
    color: var(--ucs-highlight);
    font-style: italic;
}

.ucs-hero-teaser {
    font-size: 1.1rem;
    opacity: 0.85;
    margin-bottom: 30px;
    max-width: 550px;
}

.ucs-hero-metrics {
    display: flex;
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.ucs-metric {
    text-align: center;
}

.ucs-metric-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ucs-highlight);
}

.ucs-metric-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.ucs-hero-visual {
    position: relative;
    margin-bottom: -80px;
}

.ucs-hero-visual--graph,
.ucs-hero-visual--mockup {
    margin-bottom: 0;
}

.ucs-client-logo {
    display: block;
    max-width: 100px;
    max-height: 45px;
    object-fit: contain;
    padding: 12px 18px;
    background: var(--ucs-white);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    margin: 0 auto 20px;
}

.ucs-hero-image {
    height: 400px;
    background-size: cover;
    background-position: top center;
    border-radius: var(--ucs-radius) var(--ucs-radius) 0 0;
    transition: background-position 6s ease;
}

.ucs-hero-image:hover {
    background-position: bottom center;
}

/* Mockup Style */
.ucs-hero-visual--mockup {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ucs-hero-visual--mockup .ucs-client-logo {
    position: relative;
    margin-bottom: 20px;
}

.ucs-hero-mockup {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    border-radius: var(--ucs-radius);
}

/* Line Graph Style */
.ucs-hero-visual--graph {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ucs-hero-visual--graph .ucs-client-logo {
    position: relative;
    margin-bottom: 20px;
}

.ucs-line-graph {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--ucs-radius);
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ucs-line-graph-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ucs-white) !important;
    margin: 0 0 20px 0;
    text-align: center;
}

.ucs-line-graph-container {
    position: relative;
    height: 200px;
    margin-bottom: 30px;
}

.ucs-line-graph-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ucs-line-graph-line {
    fill: none;
    stroke: var(--ucs-highlight);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 2s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.ucs-line-graph-fill {
    fill: url(#graph-gradient);
    opacity: 1;
}

.ucs-hero-graph-group {
    /* Maske auf die gesamte Gruppe anwenden */
    mask: url(#hero-graph-mask);
}

.ucs-hero-graph-fill {
    /* Kein extra CSS nötig, wird durch Gruppen-Maske animiert */
}

.ucs-graph-point {
    opacity: 0;
    animation: popIn 0.4s ease-out forwards;
}

.ucs-graph-point:nth-child(1) { animation-delay: 0.5s; }
.ucs-graph-point:nth-child(2) { animation-delay: 0.7s; }
.ucs-graph-point:nth-child(3) { animation-delay: 0.9s; }
.ucs-graph-point:nth-child(4) { animation-delay: 1.1s; }
.ucs-graph-point:nth-child(5) { animation-delay: 1.3s; }
.ucs-graph-point:nth-child(6) { animation-delay: 1.5s; }
.ucs-graph-point:nth-child(7) { animation-delay: 1.7s; }
.ucs-graph-point:nth-child(8) { animation-delay: 1.9s; }
.ucs-graph-point:nth-child(9) { animation-delay: 2.1s; }
.ucs-graph-point:nth-child(10) { animation-delay: 2.3s; }
.ucs-graph-point:nth-child(11) { animation-delay: 2.5s; }
.ucs-graph-point:nth-child(12) { animation-delay: 2.7s; }

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    70% {
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.ucs-line-graph-points {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ucs-graph-point {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--ucs-highlight);
    border: 3px solid var(--ucs-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ucs-graph-point:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 20px rgba(226, 169, 241, 0.5);
}

.ucs-graph-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ucs-white);
    color: var(--ucs-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ucs-graph-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ucs-white);
}

.ucs-graph-point:hover .ucs-graph-tooltip {
    transform: translateX(-50%) scale(1.1);
}

/* Hero Graph: Tooltips nur bei Hover anzeigen */
.ucs-hero-visual--graph .ucs-graph-tooltip {
    opacity: 0;
    visibility: hidden;
}

.ucs-hero-visual--graph .ucs-graph-point:hover .ucs-graph-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1.1);
}

/* Hero Graph: Before/After segments */
.ucs-hero-graph-line-before,
.ucs-hero-graph-line-after {
    fill: none;
    stroke: var(--ucs-border);
    stroke-width: 3;
    stroke-dasharray: 8, 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.4;
}

.ucs-graph-point--before {
    opacity: 0.5;
}

.ucs-label-before {
    opacity: 0.5;
}

/* Start Point Marker */
.ucs-graph-point--start {
    background: var(--ucs-primary-light);
    width: 18px;
    height: 18px;
    border-width: 4px;
}

.ucs-graph-point--start:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 25px rgba(45, 97, 240, 0.6);
}

.ucs-graph-start-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, var(--ucs-primary-light) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    animation: fadeInLine 0.5s ease-out forwards;
    animation-delay: 2s;
}

@keyframes fadeInLine {
    to {
        opacity: 1;
    }
}

.ucs-graph-start-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(10px);
    margin-top: 15px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ucs-primary-light);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ucs-line-graph-labels {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
}

.ucs-line-graph-labels span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.ucs-main {
    padding: 60px 0 100px;
}

.ucs-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 60px;
}

.ucs-content {
    min-width: 0;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.ucs-sidebar {
    border-left: 1px solid var(--ucs-border);
    padding-left: 40px;
}

.ucs-nav {
    position: sticky;
    top: 120px;
}

.ucs-nav-title {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ucs-text-light);
    margin-bottom: 15px;
    font-weight: 700;
}

.ucs-nav-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.ucs-nav-list li {
    margin-bottom: 0;
}

.ucs-nav-list a {
    display: block;
    padding: 15px 18px;
    color: var(--ucs-text);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--ucs-border);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    margin-left: -18px;
}

.ucs-nav-list li:last-child a {
    border-bottom: none;
}

.ucs-nav-list a:hover,
.ucs-nav-list a.active {
    color: var(--ucs-primary);
    border-left-color: var(--ucs-primary-light);
    background: rgba(45, 97, 240, 0.1);
}

.ucs-nav-num {
    display: inline-block;
    color: var(--ucs-primary-light);
    font-weight: 700;
    font-style: italic;
    min-width: 28px;
    font-size: 1.1rem;
}

.ucs-nav-num svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.ucs-project-info {
    padding-top: 20px;
    border-top: 1px solid var(--ucs-border);
}

.ucs-info-item {
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.ucs-info-item a {
    color: var(--ucs-primary-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.ucs-info-item a:hover {
    color: var(--ucs-primary);
    transform: translateX(3px);
}

.ucs-info-update {
    color: var(--ucs-primary-light);
    font-weight: 600;
}

.ucs-external-link svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Author Box */
.ucs-author-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.ucs-author-box:hover {
    background: var(--ucs-primary-light);
}

.ucs-author-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ucs-author-box:hover .ucs-author-avatar {
    transform: scale(1.1);
}

.ucs-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ucs-author-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ucs-text-light);
    transition: color 0.3s ease;
}

.ucs-author-box:hover .ucs-author-label {
    color: rgba(255, 255, 255, 0.8);
}

.ucs-author-name {
    font-size: 0.9rem;
    color: var(--ucs-primary);
    font-weight: 600;
    transition: color 0.3s ease;
}

.ucs-author-box:hover .ucs-author-name {
    color: var(--ucs-white);
}

.ucs-author-role {
    font-size: 0.75rem;
    color: var(--ucs-text-light);
    transition: color 0.3s ease;
}

.ucs-author-box:hover .ucs-author-role {
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.ucs-section {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--ucs-border);
}

.ucs-section:last-of-type {
    border-bottom: none;
}

.ucs-section h2 {
    margin-bottom: 20px;
}

.ucs-section-num {
    display: inline-flex;
    align-items: center;
    color: var(--ucs-primary-light);
    font-weight: 700;
    font-style: italic;
    margin-right: 12px;
    font-family: "PlayfairDisplay", Sans-serif;
}

.ucs-section-num svg {
    width: 32px;
    height: 32px;
    stroke: var(--ucs-primary-light);
}

.ucs-subsection {
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 0;
    border-bottom: none !important;
}

.ucs-subsection:first-of-type {
    margin-top: 40px;
}

.ucs-subsection h3 {
    margin-bottom: 20px;
    color: var(--ucs-primary);
    font-weight: 700;
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */

.ucs-testimonial {
    background: linear-gradient(135deg, var(--ucs-primary) 0%, var(--ucs-primary-light) 100%);
    padding: 50px;
    border-radius: var(--ucs-radius);
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.ucs-testimonial::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 8rem;
    color: var(--ucs-highlight);
    opacity: 0.2;
    line-height: 1;
    font-family: Georgia, serif;
}

.ucs-testimonial blockquote {
    margin: 0;
    position: relative;
    z-index: 1;
}

.ucs-testimonial p {
    font-size: 1.4rem;
    font-style: italic;
    color: var(--ucs-white);
    line-height: 1.6;
    margin: 0 0 30px;
}

.ucs-testimonial footer {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ucs-testimonial-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ucs-highlight);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ucs-testimonial-img:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.ucs-testimonial strong {
    display: block;
    color: var(--ucs-white);
    font-size: 1rem;
}

.ucs-testimonial span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   AUSGANGSLAGE
   ========================================================================== */

.ucs-context {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.ucs-challenge {
    padding: 20px;
    border-radius: var(--ucs-radius);
    margin-bottom: 30px;
    border: 1px solid var(--ucs-border);
}

.ucs-problems {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .ucs-problems {
        grid-template-columns: 1fr;
    }
}

.ucs-problem {
    background: var(--ucs-white);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    transition: all 0.2s ease;
}

.ucs-problem-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #dc3545;
    color: var(--ucs-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.ucs-problem:hover {
    background: #dc3545;
    border-color: #dc3545;
}

.ucs-problem:hover h3,
.ucs-problem:hover p {
    color: var(--ucs-white);
}

.ucs-problem:hover .ucs-problem-icon {
    transform: scale(1.15);
    background: var(--ucs-white);
    color: #dc3545;
}

.ucs-problem h3 {
    margin: 0 0 5px 0;
    color: var(--ucs-primary);
    font-size: 1.1rem;
}

.ucs-problem p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--ucs-text-light);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .ucs-problem {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ==========================================================================
   AUFGABE
   ========================================================================== */

.ucs-main-goal {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ucs-primary);
    margin-bottom: 20px;
}

.ucs-goals {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ucs-goals li {
    padding: 10px 0 10px 30px;
    position: relative;
    border-bottom: 1px solid var(--ucs-border);
    transition: all 0.3s ease;
}

.ucs-goals li:last-child {
    border-bottom: none;
}

.ucs-goals li:hover {
    padding-left: 35px;
    color: var(--ucs-primary);
}

.ucs-goals li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ucs-highlight);
    font-weight: bold;
    transition: all 0.3s ease;
}

.ucs-goals li:hover::before {
    transform: scale(1.2);
    color: var(--ucs-primary-light);
}

/* ==========================================================================
   MASSNAHMEN (4-Säulen)
   ========================================================================== */

.ucs-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 30px;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    overflow: hidden;
}

.ucs-pillar {
    display: flex;
    align-items: flex-start;
    padding: 40px 30px;
    border-bottom: 1px solid var(--ucs-border);
    border-right: 1px solid var(--ucs-border);
    position: relative;
    overflow: hidden;
    background: var(--ucs-white);
}

.ucs-pillar:nth-child(2n) {
    border-right: none;
}

.ucs-pillar:nth-last-child(-n+2) {
    border-bottom: none;
}

@media (max-width: 768px) {
    .ucs-pillars {
        grid-template-columns: 1fr;
    }

    .ucs-pillar {
        border-right: none;
    }

    .ucs-pillar:last-child {
        border-bottom: none;
    }
}

.ucs-pillar-bg-letter {
    position: absolute;
    bottom: -80px;
    right: -50px;
    font-size: 20rem;
    font-weight: 900;
    color: var(--ucs-highlight);
    line-height: 1;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    font-family: "PlayfairDisplay", Sans-serif;
}

.ucs-pillar-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.ucs-pillar h3 {
    margin: 0 0 12px 0;
    color: var(--ucs-primary);
}

.ucs-pillar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ucs-pillar li {
    font-size: 0.9rem;
    padding: 6px 0;
    color: var(--ucs-text-light);
    position: relative;
    padding-left: 15px;
}

.ucs-pillar li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--ucs-highlight);
}

/* ==========================================================================
   GOOGLE BUSINESS
   ========================================================================== */

/* GBP Comparison - VS Style */
.ucs-gbp-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 30px;
    margin-top: 30px;
}

.ucs-gbp-card {
    padding: 25px;
    padding-top: 40px;
    border-radius: var(--ucs-radius);
    transition: all 0.3s ease;
    position: relative;
}

.ucs-gbp-card:hover {
    transform: translateY(-3px);
}

.ucs-gbp-before {
    background: var(--ucs-gray);
    border: 1px solid var(--ucs-border);
}

.ucs-gbp-before::before {
    content: '✕';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ucs-primary);
    background: var(--ucs-white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ucs-gbp-after {
    background: var(--ucs-white);
    border: 1px solid var(--ucs-border);
}

.ucs-gbp-after::before {
    content: '✓';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ucs-highlight);
    background: var(--ucs-white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ucs-gbp-card > * {
    position: relative;
    z-index: 1;
}

.ucs-gbp-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.ucs-gbp-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ucs-gbp-icon-bad {
    background: var(--ucs-text-light);
    color: white;
}

.ucs-gbp-icon-good {
    background: var(--ucs-primary-light);
    color: white;
}

.ucs-gbp-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.ucs-gbp-before .ucs-gbp-label { color: var(--ucs-text-light); }
.ucs-gbp-after .ucs-gbp-label { color: var(--ucs-primary-light); }

.ucs-gbp-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ucs-text);
    margin: 0;
}

.ucs-gbp-image {
    width: 100%;
    margin-top: 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}

.ucs-gbp-image:hover {
    transform: scale(1.02);
}

.ucs-gbp-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: block;
}

/* VS Divider */
.ucs-gbp-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
}

.ucs-gbp-vs-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ucs-gray);
    color: var(--ucs-primary);
    font-weight: 900;
    font-size: 1.3rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--ucs-border);
}

/* Hide the decorative elements - they are not used */
.ucs-gbp-vs-decor {
    display: none;
}

/* Achievement Badge */
.ucs-gbp-achievement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--ucs-primary) 0%, var(--ucs-primary-light) 100%);
    color: var(--ucs-white);
    padding: 18px 25px;
    border-radius: var(--ucs-radius);
    font-weight: 700;
    font-size: 1rem;
}

.ucs-gbp-achievement-icon {
    color: var(--ucs-highlight);
    display: flex;
}

/* Legacy support */
.ucs-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ucs-gbp-image {
    width: 100%;
    border-radius: var(--ucs-radius);
    border: 1px solid var(--ucs-border);
}

/* ==========================================================================
   TECH STACK
   ========================================================================== */

.ucs-tech-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    overflow: hidden;
    margin-top: 20px;
}

.ucs-tech-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto 1.5fr;
    gap: 15px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--ucs-border);
    transition: background 0.2s ease;
}

.ucs-tech-row:last-child {
    border-bottom: none;
}

.ucs-tech-row:hover {
    background: var(--ucs-gray);
}

.ucs-tech-label {
    font-weight: 600;
    color: var(--ucs-primary);
}

.ucs-tech-before {
    color: var(--ucs-text-light);
    padding: 6px 12px;
    background: var(--ucs-gray);
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
}

.ucs-tech-arrow {
    color: var(--ucs-highlight);
    font-weight: bold;
    font-size: 1.2rem;
}

.ucs-tech-after {
    color: var(--ucs-primary);
    padding: 6px 12px;
    background: rgba(45, 97, 240, 0.1);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 768px) {
    .ucs-tech-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }

    .ucs-tech-arrow {
        transform: rotate(90deg);
    }
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.ucs-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ucs-timeline-item {
    position: relative;
    padding: 25px;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    transition: all 0.3s ease;
    overflow: hidden;
}

.ucs-timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--ucs-primary-light);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.ucs-timeline-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--ucs-primary-light);
}

.ucs-timeline-item:hover::before {
    transform: scaleY(1);
}

.ucs-timeline-marker {
    margin-bottom: 15px;
}

.ucs-timeline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--ucs-primary) 0%, var(--ucs-primary-light) 100%);
    color: var(--ucs-white);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    transition: transform 0.3s ease;
}

.ucs-timeline-item:hover .ucs-timeline-num {
    transform: scale(1.1);
}

.ucs-timeline-content {
    flex: 1;
}

.ucs-timeline-phase {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ucs-highlight);
    font-weight: 600;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgba(226, 169, 241, 0.15);
    border-radius: 4px;
}

.ucs-timeline-phase::before {
    content: '★ ';
}

.ucs-timeline-content h4 {
    font-size: 1.05rem;
    margin: 0 0 10px 0;
    color: var(--ucs-primary);
    line-height: 1.3;
}

.ucs-timeline-content p {
    font-size: 0.85rem;
    color: var(--ucs-text-light);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .ucs-timeline-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .ucs-timeline-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SCREENSHOTS
   ========================================================================== */

.ucs-screenshots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.ucs-screenshot-card {
    position: relative;
    border-radius: var(--ucs-radius);
    overflow: hidden;
    border: 1px solid var(--ucs-border);
}

.ucs-screenshot-label {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--ucs-primary);
    color: var(--ucs-white);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
}

.ucs-screenshot-before .ucs-screenshot-label {
    background: var(--ucs-text-light);
}

.ucs-screenshot-after .ucs-screenshot-label {
    background: var(--ucs-highlight);
}

.ucs-screenshot-after .ucs-screenshot-label::before {
    content: '★ ';
}

.ucs-screenshot-card img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.ucs-screenshot-card:hover img {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .ucs-screenshots-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MIGRATION
   ========================================================================== */

.ucs-migration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin: 20px 0 30px;
}

.ucs-migration-item {
    text-align: center;
    padding: 25px 15px;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    transition: all 0.3s ease;
}

.ucs-migration-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.ucs-migration-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ucs-highlight);
    line-height: 1.2;
}

.ucs-migration-label {
    font-size: 0.8rem;
    color: var(--ucs-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ucs-migration-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--ucs-primary) 0%, var(--ucs-primary-light) 100%);
    color: var(--ucs-white);
    padding: 18px 25px;
    border-radius: var(--ucs-radius);
    font-weight: 700;
    font-size: 1rem;
}

.ucs-migration-highlight-icon {
    color: var(--ucs-accent);
    display: flex;
}

/* ==========================================================================
   ERGEBNISSE
   ========================================================================== */

.ucs-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ucs-results-header h2 {
    margin-bottom: 0;
}

.ucs-results-date {
    font-size: 0.8rem;
    color: var(--ucs-text-light);
    background: var(--ucs-gray);
    padding: 6px 12px;
    border-radius: 6px;
}

.ucs-results-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    margin-bottom: 30px;
}

.ucs-results-before,
.ucs-results-after {
    text-align: center;
}

.ucs-results-main .ucs-label {
    margin-bottom: 5px;
}

.ucs-results-main .ucs-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.ucs-results-before .ucs-value { color: var(--ucs-text-light); }
.ucs-results-after .ucs-value { color: var(--ucs-primary-light); }

.ucs-arrow {
    font-size: 2rem;
    color: var(--ucs-highlight);
}

.ucs-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.ucs-metric-card {
    background: transparent;
    color: var(--ucs-text);
    padding: 20px;
    border-radius: var(--ucs-radius);
    text-align: center;
    border: 1px solid var(--ucs-border);
}

.ucs-metric-card .ucs-metric-value {
    font-size: 1.8rem;
    color: var(--ucs-highlight);
    font-family: "PlayfairDisplay", Sans-serif;
}

.ucs-metric-card .ucs-metric-label {
    font-size: 0.75rem;
    color: var(--ucs-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Keywords Grid */
.ucs-keywords {
    margin-bottom: 30px;
}

.ucs-keywords h4 {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.ucs-keywords-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ucs-keyword-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--ucs-gray);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ucs-keyword-row:hover {
    background: var(--ucs-border);
}

.ucs-keyword-name {
    font-weight: 600;
    color: var(--ucs-primary);
}

.ucs-keyword-ranks {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ucs-rank-old {
    color: var(--ucs-text-light);
    padding: 4px 10px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    font-size: 0.85rem;
}

.ucs-rank-arrow {
    color: var(--ucs-text-light);
    font-weight: bold;
}

.ucs-rank-new {
    display: inline-block;
    background: var(--ucs-primary-light);
    color: var(--ucs-white);
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Results Block (shared wrapper) */
.ucs-results-block {
    margin-bottom: 30px;
}

.ucs-results-block h4 {
    margin-bottom: 20px;
}

/* Chart */
.ucs-chart {
    padding: 50px 25px 45px 25px;
    border-radius: var(--ucs-radius);
    border: 1px solid var(--ucs-border);
}

.ucs-chart-bars {
    display: flex;
    align-items: flex-end;
    height: 150px;
    gap: 8px;
    padding-bottom: 0;
}

.ucs-chart-labels {
    position: relative;
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid var(--ucs-border);
    height: 60px;
}

.ucs-chart-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    transform: translateX(-50%);
    align-items: center;
    gap: 4px;
    text-align: center;
}

.ucs-chart-label-empty {
    flex: 1;
}

.ucs-chart-label-projected {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    opacity: 0.4;
}

.ucs-bar {
    flex: 1;
    background: var(--ucs-border);
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 10px;
    transition: all 0.3s ease;
}

.ucs-bar:hover {
    background: var(--ucs-gray);
    transform: scaleY(1.05);
    transform-origin: bottom;
}

.ucs-bar.active {
    background: var(--ucs-highlight);
    opacity: 1;
}

.ucs-bar.active:hover {
    opacity: 1;
    transform: scaleY(1.05);
}

.ucs-bar.projected,
.ucs-bar.before {
    background: repeating-linear-gradient(
        135deg,
        var(--ucs-border) 0px,
        var(--ucs-border) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.3;
    border-radius: 4px 4px 0 0;
}

.ucs-bar.projected:hover,
.ucs-bar.before:hover {
    opacity: 0.5;
    transform: scaleY(1.05);
    transform-origin: bottom;
}

.ucs-chart-label-before {
    opacity: 0.5;
}

.ucs-bar-value {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ucs-primary);
}

.ucs-bar-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ucs-text);
}

.ucs-bar-year {
    font-size: 0.7rem;
    color: var(--ucs-text-light);
    opacity: 0.8;
}

.ucs-bar-start-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ucs-white);
    background: var(--ucs-primary-light);
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
}

/* ==========================================================================
   FAZIT
   ========================================================================== */

.ucs-outlook {
    padding: 20px;
    border-radius: var(--ucs-radius);
    margin-top: 20px;
    border: 1px solid var(--ucs-border);
}

/* ==========================================================================
   CTA
   ========================================================================== */

/* Wrapper für Aufgabe + CTA nebeneinander */
.ucs-task-cta-wrapper {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 30px;
    align-items: start;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--ucs-border);
}

.ucs-task-cta-wrapper .ucs-section {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Wrapper für Avatar + Box */
.ucs-mid-cta-wrapper {
    position: relative;
    align-self: start;
    position: sticky;
    top: 140px;
}

/* Daniel Avatar oben */
.ucs-mid-cta-avatar {
    position: absolute;
    top: -30px;
    left: 30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid var(--ucs-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.ucs-mid-cta-wrapper:hover .ucs-mid-cta-avatar {
    transform: scale(1.1);
}

/* Zwischen-CTA Box */
.ucs-mid-cta {
    background: var(--ucs-gray);
    color: var(--ucs-primary);
    border-radius: var(--ucs-radius);
    border: 1px solid var(--ucs-border);
    padding: 40px;
    padding-top: 60px;
    position: relative;
    overflow: hidden;
}

/* Schwebende Kreise */
.ucs-mid-cta::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: rgba(163, 217, 0, 0.1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.ucs-mid-cta::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    background: rgba(45, 97, 240, 0.08);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.ucs-mid-cta-content {
    position: relative;
    z-index: 1;
}

.ucs-mid-cta h3 {
    color: var(--ucs-primary) !important;
    margin-bottom: 15px;
    font-size: 1.5rem;
    margin-top: 30px;
}

.ucs-mid-cta p {
    color: var(--ucs-text-light);
    margin-bottom: 25px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Haupt-CTA Box (mit Contact) */
.ucs-cta-box {
    background: var(--ucs-gray);
    color: var(--ucs-primary);
    border-radius: var(--ucs-radius);
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 340px;
    overflow: hidden;
    border: 1px solid var(--ucs-border);
}

.ucs-cta-content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ucs-cta-box h3 {
    color: var(--ucs-primary) !important;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.ucs-cta-content p {
    color: var(--ucs-text-light);
    margin-bottom: 25px;
    font-size: 1rem;
    max-width: 500px;
}

.ucs-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ucs-accent);
    color: var(--ucs-primary);
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(163, 217, 0, 0.3);
    width: fit-content;
}

.ucs-cta-button::after {
    content: '→';
    transition: transform 0.3s ease;
}

.ucs-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(163, 217, 0, 0.4);
}

.ucs-cta-button:hover::after {
    transform: translateX(5px);
}

.ucs-cta-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 40px 50px 40px 90px;
    background: var(--ucs-primary-light);
    text-align: center;
    position: relative;
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -80px;
    overflow: hidden;
}

.ucs-cta-contact::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.ucs-cta-contact::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 20px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.ucs-cta-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ucs-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.ucs-cta-contact:hover .ucs-cta-avatar {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.ucs-cta-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ucs-cta-info strong {
    font-size: 1.1rem;
    color: var(--ucs-white);
}

.ucs-cta-info > span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.ucs-cta-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ucs-cta-links a {
    font-size: 0.8rem;
    color: var(--ucs-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ucs-cta-links a:hover {
    color: var(--ucs-highlight);
}

@media (max-width: 900px) {
    .ucs-task-cta-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ucs-mid-cta {
        position: static;
    }

    .ucs-cta-box {
        grid-template-columns: 1fr;
    }

    .ucs-cta-content {
        text-align: center;
        align-items: center;
    }

    .ucs-cta-content p {
        max-width: none;
    }

    .ucs-cta-contact {
        border-left: none;
        border-top: 1px solid var(--ucs-border);
    }
}

/* ==========================================================================
   ARCHIVE
   ========================================================================== */

.ucs-archive {
    background: var(--ucs-white);
}

/* Archive Hero */
.ucs-archive-hero {
    position: relative;
    background: var(--ucs-primary);
    color: var(--ucs-white);
    padding: 100px 0 120px;
    overflow: hidden;
}

.ucs-archive-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(163, 217, 0, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(163, 217, 0, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.ucs-archive-hero-content {
    position: relative;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.ucs-archive-badge {
    display: inline-block;
    background: rgba(163, 217, 0, 0.2);
    color: var(--ucs-highlight);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    border: 1px solid rgba(163, 217, 0, 0.3);
}

.ucs-archive-hero h1 {
    color: var(--ucs-white);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 20px;
    line-height: 1.2 !important;
}

.ucs-archive-hero h1 span {
    background: linear-gradient(135deg, var(--ucs-highlight) 0%, var(--ucs-highlight) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ucs-archive-hero > .ucs-container > .ucs-archive-hero-content > p {
    font-size: 1.2rem;
    opacity: 0.85;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Archive Stats */
.ucs-archive-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ucs-archive-stat {
    text-align: center;
}

.ucs-archive-stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ucs-highlight);
    line-height: 1.2;
    font-family: "PlayfairDisplay", Sans-serif;
}

.ucs-archive-stat-label {
    font-size: 0.9rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Archive Main Content */
.ucs-archive-main {
    padding: 80px 0;
    margin-top: -60px;
    position: relative;
}

.ucs-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

/* ==========================================================================
   SHORTCODE GRID
   ========================================================================== */

.ucs-shortcode-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
}

.ucs-shortcode-grid .ucs-card {
    flex: 0 0 calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important;
    width: calc(33.333% - 20px) !important;
}

.ucs-shortcode-cols-2 .ucs-card {
    flex: 0 0 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
    width: calc(50% - 15px) !important;
}

.ucs-shortcode-cols-4 .ucs-card {
    flex: 0 0 calc(25% - 22.5px) !important;
    max-width: calc(25% - 22.5px) !important;
    width: calc(25% - 22.5px) !important;
}

@media (max-width: 1024px) {
    .ucs-shortcode-grid .ucs-card,
    .ucs-shortcode-cols-4 .ucs-card {
        flex: 0 0 calc(50% - 15px) !important;
        max-width: calc(50% - 15px) !important;
        width: calc(50% - 15px) !important;
    }
}

@media (max-width: 768px) {
    .ucs-shortcode-grid .ucs-card,
    .ucs-shortcode-cols-2 .ucs-card,
    .ucs-shortcode-cols-4 .ucs-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

.ucs-card {
    background: var(--ucs-white);
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.ucs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ucs-highlight) 0%, var(--ucs-highlight) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.ucs-card:hover::before {
    transform: scaleX(1);
}

.ucs-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.ucs-card-link {
    display: flex;
    flex-direction: column;
    padding: 35px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.ucs-card-badge-top {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ucs-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ucs-border);
}

.ucs-card-logo {
    margin-bottom: 25px;
    height: 50px;
    display: flex;
    align-items: center;
}

.ucs-card-logo img {
    max-height: 45px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.ucs-card:hover .ucs-card-logo img {
    filter: grayscale(0%);
    opacity: 1;
}

.ucs-card-metric {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ucs-highlight) 0%, var(--ucs-highlight) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "PlayfairDisplay", Sans-serif;
    background-clip: text;
    margin-bottom: 8px;
}

.ucs-card-tagline {
    font-size: 1.15rem;
    margin-bottom: 20px;
    color: var(--ucs-primary);
    font-weight: 600;
    line-height: 1.4 !important;
}

.ucs-card-meta {
    margin-bottom: 25px;
    margin-top: auto;
}

.ucs-card-badge,
.ucs-card-industry {
    display: inline-block;
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 6px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.ucs-card-badge {
    background: var(--ucs-gray);
    color: var(--ucs-text);
}

.ucs-card-industry {
    background: var(--ucs-primary);
    color: var(--ucs-white);
}

.ucs-card-cta {
    color: var(--ucs-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.ucs-card:hover .ucs-card-cta {
    color: var(--ucs-highlight);
    gap: 12px;
}

/* Archive Responsive */
@media (max-width: 768px) {
    .ucs-archive-hero {
        padding: 60px 0 80px;
    }

    .ucs-archive-stats {
        flex-direction: column;
        gap: 30px;
    }

    .ucs-archive-main {
        padding: 60px 0;
        margin-top: -40px;
    }

    .ucs-archive-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ANIMATIONS (Hover only)
   ========================================================================== */

/* Hover animations */
.ucs-pillar:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.ucs-metric-card:hover {
    transform: scale(1.03);
}

.ucs-keyword-row:hover {
    transform: translateX(5px);
}

.ucs-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ucs-gbp-before:hover,
.ucs-gbp-after:hover {
    transform: scale(1.02);
}

/* Add transitions to elements */
.ucs-problem,
.ucs-pillar,
.ucs-metric-card,
.ucs-keyword-row,
.ucs-gbp-before,
.ucs-gbp-after,
.ucs-card {
    transition: all 0.3s ease;
}

/* ==========================================================================
   UPDATES SEKTION
   ========================================================================== */

.ucs-updates {
    margin-top: 60px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ucs-update-item {
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid var(--ucs-border);
    border-radius: var(--ucs-radius);
    background: var(--ucs-gray);
}

.ucs-update-item:last-child {
    margin-bottom: 0;
}

.ucs-update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--ucs-primary-light);
}

.ucs-update-header h3 {
    color: var(--ucs-primary);
    margin: 0;
    font-size: 1.3rem;
}

.ucs-update-timeframe {
    font-size: 0.85rem;
    color: var(--ucs-text-light);
    background: var(--ucs-white);
    padding: 6px 12px;
    border-radius: 6px;
}

.ucs-update-content {
    margin-bottom: 25px;
    line-height: 1.7;
}

.ucs-update-content p {
    margin-bottom: 15px;
}

.ucs-update-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.ucs-update-metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
    background: var(--ucs-white);
    border-radius: var(--ucs-radius);
    text-align: center;
    border: 1px solid var(--ucs-border);
}

.ucs-update-metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ucs-primary-light);
}

.ucs-update-metric-label {
    font-size: 0.85rem;
    color: var(--ucs-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .ucs-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ucs-hero-metrics {
        justify-content: center;
    }

    .ucs-hero-visual {
        margin-bottom: -60px;
    }

    .ucs-hero-visual--graph,
    .ucs-hero-visual--mockup {
        margin-bottom: 20px;
    }

    .ucs-hero-image {
        height: 300px;
    }

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

    .ucs-sidebar {
        display: none;
    }

    .ucs-pillars {
        grid-template-columns: 1fr 1fr;
    }

    .ucs-gbp-comparison {
        grid-template-columns: 1fr;
    }

    .ucs-gbp-vs {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    .ucs-results-main {
        flex-direction: column;
        gap: 15px;
    }

    .ucs-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 600px) {
    .ucs-hero {
        padding: 60px 0;
    }

    .ucs-hero h1 {
        font-size: 1.8rem;
    }

    .ucs-hero-metrics {
        flex-direction: column;
        gap: 20px;
    }

    .ucs-pillars {
        grid-template-columns: 1fr;
    }

    .ucs-problems {
        grid-template-columns: 1fr;
    }

    .ucs-testimonial {
        padding: 25px;
    }

    .ucs-testimonial p {
        font-size: 1.1rem;
    }

    .ucs-cta-box {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   NEW HERO VISUAL VARIANTS
   ========================================================================== */

/* Video Hero */
.ucs-hero-visual--video {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ucs-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: var(--ucs-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: rgba(226, 169, 241, 0.15); /* var(--ucs-highlight) with transparency */
}

.ucs-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Before/After Slider */
.ucs-hero-visual--before-after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ucs-before-after-slider {
    width: 100%;
    border-radius: var(--ucs-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ucs-ba-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

.ucs-ba-after,
.ucs-ba-before {
    display: block;
    width: 100%;
    height: auto;
}

.ucs-ba-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

.ucs-ba-slider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ucs-white);
    cursor: ew-resize;
    z-index: 10;
}

.ucs-ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--ucs-white);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ucs-ba-arrow {
    font-size: 1.2rem;
    color: var(--ucs-primary);
    font-weight: bold;
}

.ucs-ba-divider {
    width: 2px;
    height: 20px;
    background: var(--ucs-border);
}

.ucs-ba-label {
    position: absolute;
    top: 20px;
    padding: 8px 16px;
    background: var(--ucs-white);
    color: var(--ucs-primary);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ucs-ba-label-before {
    left: 20px;
}

.ucs-ba-label-after {
    right: 20px;
}

/* Carousel */
.ucs-hero-visual--carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ucs-carousel {
    position: relative;
    width: 100%;
    border-radius: var(--ucs-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ucs-carousel-track {
    position: relative;
    width: 100%;
}

.ucs-carousel-slide {
    display: none;
    width: 100%;
}

.ucs-carousel-slide.active {
    display: block;
}

.ucs-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.ucs-carousel-prev,
.ucs-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ucs-white);
    color: var(--ucs-primary);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ucs-carousel-prev {
    left: 20px;
}

.ucs-carousel-next {
    right: 20px;
}

.ucs-carousel-prev:hover,
.ucs-carousel-next:hover {
    background: var(--ucs-primary);
    color: var(--ucs-white);
    transform: translateY(-50%) scale(1.1);
}

.ucs-carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.ucs-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.ucs-carousel-dot.active,
.ucs-carousel-dot:hover {
    background: var(--ucs-white);
    transform: scale(1.2);
}

/* Logo Only */
.ucs-hero-visual--logo-only {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.ucs-logo-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: var(--ucs-gray);
    border-radius: var(--ucs-radius);
    border: 1px solid var(--ucs-border);
}

.ucs-client-logo-large {
    max-width: 300px;
    max-height: 200px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}

/* Responsive */
@media (max-width: 768px) {
    .ucs-ba-handle {
        width: 50px;
        height: 50px;
    }

    .ucs-ba-arrow {
        font-size: 1rem;
    }

    .ucs-ba-label {
        font-size: 0.7rem;
        padding: 6px 12px;
        top: 10px;
    }

    .ucs-ba-label-before {
        left: 10px;
    }

    .ucs-ba-label-after {
        right: 10px;
    }

    .ucs-carousel-prev,
    .ucs-carousel-next {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .ucs-carousel-prev {
        left: 10px;
    }

    .ucs-carousel-next {
        right: 10px;
    }

    .ucs-client-logo-large {
        max-width: 200px;
        max-height: 150px;
    }
}

/* Section Intro Text */
.ucs-section-intro {
    font-size: 1rem;
    color: var(--ucs-text-light);
    margin-bottom: 30px;
    line-height: 1.6;
}

/* ==========================================================================
   GBP LIGHTBOX
   ========================================================================== */

.ucs-gbp-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
}

.ucs-gbp-lightbox.active {
    display: block;
}

.ucs-gbp-lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ucs-gbp-lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: var(--ucs-white);
    font-size: 50px;
    font-weight: 700;
    transition: color 0.3s ease;
    cursor: pointer;
    line-height: 1;
}

.ucs-gbp-lightbox-close:hover,
.ucs-gbp-lightbox-close:focus {
    color: var(--ucs-highlight);
}

.ucs-gbp-lightbox-caption {
    margin: 15px auto;
    display: block;
    max-width: 80%;
    text-align: center;
    color: var(--ucs-white);
    padding: 10px 0;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .ucs-gbp-lightbox-content {
        max-width: 95%;
    }

    .ucs-gbp-lightbox-close {
        top: 10px;
        right: 20px;
        font-size: 40px;
    }
}