@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

.koha-page {
    --koha-green: #256c32;
    --koha-green-soft: #e9f5ec;
    --koha-green-dark: #184b22;
    --koha-plum: #5d355f;
    --koha-ink: #173047;
    --koha-sand: #f8f5ef;
    --koha-border: rgba(23, 48, 71, 0.12);
    --koha-shadow: 0 24px 55px rgba(23, 48, 71, 0.12);
    background:
        radial-gradient(circle at top right, rgba(37, 108, 50, 0.12), transparent 28%),
        linear-gradient(180deg, #fcfdfb 0%, #f7faf8 42%, #ffffff 100%);
    color: var(--koha-ink);
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
}

.omp-page {
    --omp-primary: #4f1787;
    --omp-primary-accent: #6320a8;
    --omp-primary-soft: #f3f0fa;
    --omp-ink: #111827;
    --omp-muted: #64748b;
    --omp-border: rgba(226, 232, 240, 0.9);
    background:
        radial-gradient(circle at 78% 10%, rgba(99, 32, 168, 0.12), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #fafbfe 100%);
    color: var(--omp-ink);
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
}

.omp-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.omp-breadcrumbs {
    padding: 34px 0 18px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.omp-breadcrumbs a {
    color: var(--omp-primary);
}

.omp-breadcrumbs span {
    display: inline-block;
    margin: 0 8px;
}

.omp-hero {
    padding: 8px 0 48px;
}

.omp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
    gap: 54px;
    align-items: center;
}

.omp-copy {
    max-width: 500px;
}

.omp-brand h1 {
    margin: 0;
    font-family: 'Merriweather', serif;
    font-size: clamp(58px, 9vw, 88px);
    line-height: 0.88;
    font-weight: 900;
    color: #111827;
}

.omp-brand p {
    margin: 10px 0 0;
    color: #374151;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.omp-copy h2 {
    margin: 16px 0 0;
    font-size: clamp(42px, 6vw, 62px);
    line-height: 0.98;
    font-weight: 800;
    color: #111827;
}

.omp-copy h2 span {
    display: block;
    color: var(--omp-primary);
}

.omp-lead {
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.75;
    color: #475569;
    max-width: 500px;
}

.omp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
}

.omp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.omp-btn:hover {
    transform: translateY(-2px);
}

.omp-btn-primary {
    background: linear-gradient(135deg, #4f1787 0%, #6320a8 100%);
    box-shadow: 0 18px 30px rgba(79, 23, 135, 0.25);
}

.omp-btn-secondary {
    color: var(--omp-primary);
}

.omp-visual {
    position: relative;
    min-height: 450px;
}

.omp-note {
    position: absolute;
    top: -18px;
    right: 18px;
    z-index: 3;
    display: grid;
    gap: 0;
    text-align: right;
    color: var(--omp-primary-accent);
    font-family: 'Caveat', cursive;
    transform: rotate(-4deg);
}

.omp-note span,
.omp-note small {
    display: block;
    font-weight: 700;
    line-height: 0.95;
}

.omp-note span {
    font-size: 38px;
}

.omp-note small {
    font-size: 26px;
    color: #475569;
}

.omp-laptop {
    position: absolute;
    inset: 46px 38px 34px 0;
    background: #0f172a;
    border: 8px solid #1f2937;
    border-bottom-width: 2px;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.omp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    font-size: 10px;
}

.omp-mini-brand,
.omp-mini-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.omp-mini-brand {
    font-weight: 800;
    color: #334155;
}

.omp-mini-brand span:first-child {
    color: var(--omp-primary);
}

.omp-mini-brand i {
    width: 1px;
    height: 10px;
    background: #cbd5e1;
}

.omp-mini-nav {
    color: #64748b;
    font-weight: 700;
}

.omp-screen {
    position: relative;
    min-height: 268px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, #020617 0%, #111827 100%);
    overflow: hidden;
}

.omp-screen-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.36) 1px, transparent 1px);
    background-size: 12px 12px;
    opacity: 0.2;
}

.omp-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(120, 53, 15, 0.28), rgba(79, 70, 229, 0.12), rgba(15, 23, 42, 0.1));
}

.omp-screen-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    text-align: center;
    color: #fff;
}

.omp-screen-copy h3 {
    margin: 0;
    font-size: 33px;
    line-height: 1.08;
    font-weight: 800;
}

.omp-search {
    display: flex;
    align-items: center;
    margin-top: 16px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.omp-search span {
    flex: 1 1 auto;
    padding: 11px 14px;
    text-align: left;
    color: #94a3b8;
    font-size: 11px;
}

.omp-search button {
    width: 42px;
    height: 38px;
    border: 0;
    background: var(--omp-primary);
    color: #fff;
}

.omp-categories {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    padding: 12px 8px 10px;
    background: #fff;
    border-top: 1px solid rgba(241, 245, 249, 1);
}

.omp-categories div {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: #475569;
    font-size: 9px;
    font-weight: 700;
}

.omp-categories i {
    color: var(--omp-primary);
    font-size: 13px;
}

.omp-base {
    position: absolute;
    left: -3%;
    right: -3%;
    bottom: -14px;
    height: 14px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 100%);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.omp-base::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #6b7280;
    border-radius: 0 0 4px 4px;
}

.omp-spines {
    position: absolute;
    top: 118px;
    right: -8px;
    z-index: 2;
    display: grid;
    gap: 8px;
}

.omp-spine {
    display: inline-block;
    padding: 9px 14px;
    border-left: 2px solid transparent;
    border-radius: 8px 0 0 8px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.omp-spine-blue {
    background: linear-gradient(90deg, #164e63 0%, #0369a1 100%);
    border-left-color: #67e8f9;
    color: #fff;
}

.omp-spine-slate {
    background: linear-gradient(90deg, #d1d5db 0%, #e5e7eb 100%);
    border-left-color: #94a3b8;
    color: #1f2937;
}

.omp-spine-gold {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border-left-color: #f59e0b;
    color: #92400e;
}

.omp-spine-amber {
    background: linear-gradient(90deg, #92400e 0%, #451a03 100%);
    border-left-color: #d97706;
    color: #fef3c7;
}

.omp-spine-stone {
    background: linear-gradient(90deg, #d6d3d1 0%, #a8a29e 100%);
    border-left-color: #78716c;
    color: #292524;
}

.omp-pillars {
    padding: 34px 0;
    background: #fafbfe;
    border-top: 1px solid rgba(241, 245, 249, 1);
    border-bottom: 1px solid rgba(241, 245, 249, 1);
}

.omp-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.omp-pillar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.omp-pillar-icon,
.omp-card-icon,
.omp-benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f5f3ff;
    color: var(--omp-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 auto;
}

.omp-pillar h3,
.omp-card h3,
.omp-benefit h3 {
    margin: 0;
    color: #111827;
    font-weight: 800;
}

.omp-pillar h3 {
    font-size: 16px;
}

.omp-pillar p,
.omp-card p,
.omp-benefit p {
    margin: 7px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.omp-pillar p {
    font-size: 13px;
}

.omp-section {
    padding: 72px 0;
}

.omp-section-soft {
    background: #fafbfe;
    border-top: 1px solid rgba(241, 245, 249, 1);
}

.omp-section-head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.omp-section-head span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--omp-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.omp-section-head h2 {
    margin: 0;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    color: #111827;
}

.omp-section-head p {
    margin: 14px auto 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.75;
    color: #64748b;
}

.omp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.omp-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid rgba(241, 245, 249, 1);
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
}

.omp-card-icon {
    border-radius: 14px;
    margin-bottom: 18px;
}

.omp-card h3 {
    font-size: 22px;
    line-height: 1.12;
}

.omp-card p {
    font-size: 14px;
}

.omp-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--omp-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.omp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(226, 232, 240, 0.85);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.omp-benefit {
    padding: 18px 18px 10px;
    text-align: center;
    border-right: 1px solid rgba(226, 232, 240, 0.85);
}

.omp-benefit:last-child {
    border-right: 0;
}

.omp-benefit-icon {
    margin: 0 auto 16px;
    background: transparent;
}

.omp-benefit h3 {
    font-size: 17px;
    line-height: 1.2;
}

.omp-benefit p {
    font-size: 13px;
}

.omp-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1.1fr;
    gap: 24px;
    align-items: center;
    padding: 28px 30px;
    background: #f2effb;
    border-radius: 24px;
}

.omp-metric {
    text-align: left;
}

.omp-metric strong {
    display: block;
    color: var(--omp-primary);
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1;
    font-weight: 800;
}

.omp-metric-wide strong {
    font-size: clamp(24px, 2.3vw, 33px);
    color: #111827;
    line-height: 1.15;
}

.omp-metric span {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.omp-map {
    position: relative;
    min-height: 116px;
}

.omp-map-dots {
    position: absolute;
    inset: 18px 16px;
    background:
        radial-gradient(circle at 14% 42%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 23% 35%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 31% 44%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 43% 31%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 54% 38%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 66% 40%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 77% 49%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 83% 61%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px),
        radial-gradient(circle at 27% 66%, rgba(79, 23, 135, 0.32) 0 2px, transparent 3px);
    opacity: 0.85;
}

.omp-map-dots::before,
.omp-map-dots::after {
    content: '';
    position: absolute;
    border: 1px dashed rgba(79, 23, 135, 0.35);
    border-radius: 999px;
}

.omp-map-dots::before {
    inset: 10px auto 10px 8px;
    width: 74px;
}

.omp-map-dots::after {
    inset: 6px 18px 12px auto;
    width: 88px;
}

.omp-map-note {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    text-align: right;
    color: var(--omp-primary);
    font-family: 'Caveat', cursive;
    font-size: 38px;
    line-height: 0.9;
    font-weight: 700;
    transform: rotate(-6deg);
}

.omp-section-cta {
    padding-top: 24px;
    padding-bottom: 80px;
}

.omp-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    border-radius: 24px;
    background: linear-gradient(135deg, #3e1473 0%, #4f1787 55%, #5b2a8c 100%);
    color: #fff;
    box-shadow: 0 20px 36px rgba(79, 23, 135, 0.24);
    overflow: hidden;
}

.omp-cta-copy {
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    z-index: 1;
}

.omp-cta-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex: 0 0 auto;
}

.omp-cta h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
    font-weight: 800;
}

.omp-cta p {
    margin: 8px 0 0;
    color: rgba(243, 232, 255, 0.92);
    font-size: 14px;
}

.omp-cta-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--omp-primary);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.omp-cta-pages {
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 140px;
    display: grid;
    gap: 6px;
    opacity: 0.2;
    transform: rotate(12deg);
}

.omp-cta-pages span {
    height: 14px;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

@media (max-width: 1199px) {
    .omp-hero-grid,
    .omp-pillars-grid,
    .omp-features-grid,
    .omp-benefits-grid,
    .omp-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .omp-benefit:nth-child(2n) {
        border-right: 0;
    }

    .omp-benefit:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    }

    .omp-laptop {
        right: 22px;
    }
}

@media (max-width: 991px) {
    .omp-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .omp-copy {
        max-width: none;
        text-align: center;
    }

    .omp-actions {
        justify-content: center;
    }

    .omp-visual {
        max-width: 740px;
        margin: 0 auto;
    }

    .omp-note {
        right: 36px;
    }

    .omp-benefits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .omp-benefit:nth-child(3n) {
        border-right: 0;
    }

    .omp-benefit:nth-child(-n + 3) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    }

    .omp-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .omp-cta-copy {
        flex-direction: column;
    }

    .omp-cta-link {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .omp-shell {
        width: min(100% - 24px, 100%);
    }

    .omp-breadcrumbs {
        padding-top: 24px;
        font-size: 11px;
    }

    .omp-copy h2 {
        font-size: clamp(36px, 11vw, 52px);
    }

    .omp-lead,
    .omp-section-head p {
        font-size: 16px;
    }

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

    .omp-visual {
        min-height: 420px;
    }

    .omp-note {
        position: static;
        margin-bottom: 12px;
        text-align: center;
        transform: none;
    }

    .omp-laptop {
        position: relative;
        inset: auto;
    }

    .omp-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .omp-mini-nav {
        flex-wrap: wrap;
        gap: 8px;
    }

    .omp-screen-copy h3 {
        font-size: 24px;
    }

    .omp-search span {
        font-size: 10px;
    }

    .omp-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 10px;
    }

    .omp-spines {
        position: static;
        margin-top: 20px;
        justify-items: end;
    }

    .omp-pillars-grid,
    .omp-features-grid,
    .omp-benefits-grid,
    .omp-metrics {
        grid-template-columns: 1fr;
    }

    .omp-benefit {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    }

    .omp-benefit:last-child {
        border-bottom: 0;
    }

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

    .omp-map {
        min-height: 130px;
    }

    .omp-map-note {
        right: 50%;
        transform: translateX(50%) rotate(-6deg);
        text-align: center;
    }

    .omp-cta {
        padding: 24px 22px;
    }
}

.koha-page h1,
.koha-page h2,
.koha-page h3,
.koha-page .koha-wordmark {
    font-family: 'Cormorant Garamond', serif;
}

.koha-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 75px auto;
}

.koha-hero {
    padding: 25px 0 10px;
    position: relative;
}

.koha-breadcrumb {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding: 10px 16px;
    border: 1px solid var(--koha-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(23, 48, 71, 0.06);
}

.koha-breadcrumb a {
    color: var(--koha-green);
}

.koha-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
    gap: 34px;
    align-items: center;
}

.koha-copy-panel,
.koha-visual-panel,
.koha-card,
.koha-metric,
.koha-media-tile,
.koha-cta {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--koha-border);
    box-shadow: var(--koha-shadow);
}

.koha-copy-panel {
    border-radius: 34px;
    padding: 38px;
    position: relative;
    backdrop-filter: blur(8px);
}

.koha-copy-panel:before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 26px;
    border: 1px dashed rgba(37, 108, 50, 0.18);
    pointer-events: none;
}

.koha-brandline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.koha-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--koha-green-soft);
    color: var(--koha-green-dark);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.koha-wordmark {
    font-size: clamp(52px, 7vw, 86px);
    line-height: 0.9;
    font-style: italic;
    color: var(--koha-green);
    margin: 0;
}

.koha-tagline {
    margin: 8px 0 0;
    color: #5f6f7e;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}

.koha-title {
    font-size: clamp(40px, 5vw, 62px);
    line-height: 0.96;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    color: #0e2235;
}

.koha-description,
.koha-description p {
    font-size: 17px;
    line-height: 1.85;
    color: #445566;
    margin: 0;
}

.koha-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.koha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.koha-btn:hover,
.koha-btn:focus {
    transform: translateY(-2px);
}

.koha-btn-primary {
    background: linear-gradient(135deg, var(--koha-green) 0%, #329043 100%);
    box-shadow: 0 16px 28px rgba(37, 108, 50, 0.26);
}

.koha-btn-secondary {
    background: #fff;
    color: var(--koha-ink);
    border: 1px solid var(--koha-border);
}

.koha-highlights {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.koha-metric {
    border-radius: 22px;
    padding: 18px 18px 16px;
}

.koha-metric strong {
    display: block;
    font-size: 28px;
    color: var(--koha-green);
    line-height: 1;
}

.koha-metric span {
    display: block;
    margin-top: 7px;
    color: #526371;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.koha-visual-panel {
    border-radius: 34px;
    padding: 26px;
    position: relative;
}

.koha-handwritten-badge {
    position: absolute;
    top: -18px;
    right: 34px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    font-weight: 700;
    pointer-events: none;
}

.koha-handwritten-primary,
.koha-handwritten-muted,
.koha-handwritten-secondary {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

.koha-handwritten-primary {
    color: #5d355f;
    font-size: 26px;
}

.koha-handwritten-muted {
    color: #64748b;
    font-size: 22px;
}

.koha-handwritten-secondary {
    color: #256c32;
    font-size: 28px;
}

.koha-laptop-wrap {
    position: relative;
    padding-top: 12px;
}

.koha-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(6px);
    opacity: 0.55;
}

.koha-orb-one {
    width: 180px;
    height: 180px;
    background: rgba(37, 108, 50, 0.12);
    top: -40px;
    right: -20px;
}

.koha-orb-two {
    width: 120px;
    height: 120px;
    background: rgba(93, 53, 95, 0.12);
    bottom: 30px;
    left: -24px;
}

.koha-screen {
    position: relative;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, #122338 0%, #0f2033 100%);
    padding: 10px 10px 0;
    box-shadow: 0 26px 54px rgba(16, 37, 58, 0.2);
    z-index: 1;
}

.koha-camera-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #3b4f66;
    margin: 0 auto 8px;
}

.koha-screen-frame {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #ffffff;
    padding: 0;
}

.koha-screen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #eef2f6;
    border-bottom: 1px solid #d6dee8;
    color: #8a94a5;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.koha-dots {
    display: flex;
    gap: 7px;
}

.koha-dots i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: block;
}

.koha-dots i:nth-child(1) { background: #ff8c7b; }
.koha-dots i:nth-child(2) { background: #ffd166; }
.koha-dots i:nth-child(3) { background: #65d48e; }

.koha-browser-label {
    min-width: 226px;
    padding: 5px 16px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #e4e9ef;
    font-weight: 700;
    text-align: center;
}

.koha-screen-body {
    background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
    min-height: 296px;
    padding: 14px;
}

.koha-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.koha-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #256c32;
}

.koha-dashboard-leaf {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.koha-dashboard-brand strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
}

.koha-dashboard-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.koha-dashboard-user em {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dbe2ea;
    color: #64748b;
    font-style: normal;
    font-weight: 800;
}

.koha-search-row {
    display: flex;
    margin-bottom: 14px;
}

.koha-search-row input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: #475569;
    background: #ffffff;
}

.koha-search-row input::placeholder {
    color: #7c8a9f;
}

.koha-search-row button {
    border: 0;
    border-radius: 0 8px 8px 0;
    background: #389046;
    color: #ffffff;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.koha-modules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
}

.koha-module {
    border-radius: 8px;
    padding: 14px 10px 12px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #dbe3ec;
    box-shadow: 0 1px 3px rgba(15, 35, 53, 0.06);
}

.koha-module i {
    font-size: 16px;
    color: #52637a;
    margin-bottom: 8px;
}

.koha-module span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    color: #475569;
}

.koha-laptop-base {
    width: calc(100% - 28px);
    height: 14px;
    margin: 0 auto;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #c7d0db 0%, #b6c0cb 100%);
    box-shadow: 0 14px 28px rgba(15, 35, 53, 0.18);
    position: relative;
}

.koha-laptop-base-notch {
    width: 74px;
    height: 4px;
    border-radius: 999px;
    background: #94a3b8;
    margin: 5px auto 0;
}

.koha-book-stack {
    position: absolute;
    right: -4px;
    bottom: -26px;
    width: 96px;
    display: grid;
    gap: 4px;
}

.koha-book {
    display: block;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(15, 35, 53, 0.12);
}

.koha-book-purple {
    background: #5d355f;
    border-left: 4px solid #d1a43b;
}

.koha-book-navy {
    background: #162235;
    border-left: 4px solid #ffffff;
}

.koha-book-green {
    background: #256c32;
    border-left: 4px solid #d1a43b;
}

.koha-book-white {
    background: #ffffff;
    border: 1px solid #d8dee7;
}

.koha-section {
    padding: 0 0 10px;
}

.koha-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 28px;
}

.koha-kicker {
    display: inline-block;
    color: var(--koha-plum);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.koha-section-head h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #10253a;
}

.koha-section-head p {
    margin: 0;
    max-width: 540px;
    color: #556677;
    font-size: 16px;
    line-height: 1.8;
}

.koha-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.koha-card {
    border-radius: 30px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.koha-card:after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(37, 108, 50, 0.07), rgba(93, 53, 95, 0.08));
    right: -30px;
    top: -40px;
}

.koha-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--koha-green-soft);
    color: var(--koha-green);
    margin-bottom: 18px;
}

.koha-card h3 {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 0.95;
    color: #10253a;
}

.koha-card p {
    margin: 0 0 18px;
    color: #566677;
    line-height: 1.8;
}

.koha-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--koha-plum);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.koha-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.koha-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #425263;
    margin-bottom: 10px;
    line-height: 1.6;
    font-weight: 600;
}

.koha-card li i {
    color: var(--koha-green);
    margin-top: 4px;
}

.koha-why {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 26px;
}

.koha-story,
.koha-benefits {
    border-radius: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--koha-border);
    box-shadow: var(--koha-shadow);
}

.koha-story p {
    margin: 0;
    color: #556677;
    line-height: 1.95;
    font-size: 16px;
}

.koha-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.koha-benefit {
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, #fbfdfc 0%, #f1f8f3 100%);
    border: 1px solid rgba(37, 108, 50, 0.1);
}

.koha-benefit h3 {
    margin: 12px 0 8px;
    font-size: 24px;
    line-height: 1;
}

.koha-benefit p {
    margin: 0;
    color: #566677;
    line-height: 1.7;
    font-size: 14px;
}

.koha-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.koha-media-tile {
    border-radius: 28px;
    overflow: hidden;
}

.koha-media-tile img,
.koha-media-tile video {
    width: 100%;
    display: block;
    object-fit: cover;
}

.koha-media-tile img {
    height: 260px;
}

.koha-media-tile video {
    height: 260px;
    background: #0d1e2d;
}

.koha-media-caption {
    padding: 16px 18px 18px;
}

.koha-media-caption strong {
    display: block;
    font-size: 15px;
    color: #10253a;
}

.koha-media-caption span {
    display: block;
    margin-top: 6px;
    color: #667788;
    font-size: 13px;
}

.koha-cta {
    border-radius: 34px;
    padding: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 90px;
}

.koha-cta h2 {
    margin: 0 0 8px;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 0.95;
    color: #10253a;
}

.koha-cta p {
    margin: 0;
    max-width: 640px;
    color: #556677;
    font-size: 16px;
    line-height: 1.8;
}

.koha-hosting-page {
    --hosting-purple: #53297a;
    --hosting-purple-dark: #3e1a5f;
    --hosting-purple-soft: #f6f2fa;
    --hosting-green: #488c52;
    --hosting-green-soft: #ecf6ee;
    --hosting-navy: #0b1633;
    --hosting-ink: #222a3d;
    --hosting-border: rgba(11, 22, 51, 0.1);
    --hosting-shadow: 0 18px 40px rgba(83, 41, 122, 0.08);
    background:
        radial-gradient(circle at top left, rgba(72, 140, 82, 0.14), transparent 24%),
        radial-gradient(circle at top right, rgba(83, 41, 122, 0.1), transparent 26%),
        linear-gradient(180deg, #fcfdff 0%, #f8fbfd 55%, #ffffff 100%);
    color: var(--hosting-ink);
    font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    overflow: hidden;
}

.koha-hosting-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 5px auto;
}

.koha-hosting-breadcrumbs {
    padding: 26px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7382;
}

.koha-hosting-breadcrumbs a {
    color: var(--hosting-purple);
}

.koha-hosting-breadcrumbs span {
    margin: 0 8px;
}

.koha-hosting-hero {
    padding: 18px 0 5px;
}

.koha-hosting-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
    gap: 32px;
    align-items: center;
}

.koha-hosting-copy h1,
.koha-hosting-copy h2,
.koha-hosting-card h3,
.koha-hosting-section-head h2,
.koha-hosting-banner h2 {
    font-family: 'Montserrat', sans-serif;
}

.koha-hosting-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.koha-hosting-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--hosting-border);
    box-shadow: 0 10px 24px rgba(11, 22, 51, 0.06);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hosting-green);
}

.koha-hosting-koha {
    font-size: 48px;
    line-height: 0.95;
    color: #3a6e30;
    font-weight: 800;
    text-transform: lowercase;
    margin: 0;
}

.koha-hosting-tagline {
    margin: 4px 0 0;
    color: #7b8391;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.koha-hosting-copy h1 {
    margin: 0 0 16px;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #0e1730;
}

.koha-hosting-lead {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #48536b;
}

.koha-hosting-copy p {
    margin: 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.9;
    color: #5e6777;
}

.koha-hosting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.koha-hosting-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.koha-hosting-btn:hover,
.koha-hosting-btn:focus {
    transform: translateY(-2px);
}

.koha-hosting-btn-primary {
    background: linear-gradient(135deg, var(--hosting-purple) 0%, var(--hosting-purple-dark) 100%);
    
    box-shadow: 0 16px 30px rgba(83, 41, 122, 0.22);
}

.koha-hosting-btn-secondary {
    background: #fff;
    color: var(--hosting-purple);
    border: 1px solid rgba(83, 41, 122, 0.18);
}

.koha-hosting-visual {
    position: relative;
    min-height: 520px;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(11, 22, 51, 0.1);
    box-shadow: var(--hosting-shadow);
    background: linear-gradient(135deg, #0e1730 0%, #162240 100%);
}

.koha-hosting-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(14, 23, 48, 0.92), rgba(14, 23, 48, 0.38)),
        url('../../Design_alzad_interface_upgrade/support_host/screen.png') center/cover no-repeat;
    opacity: 0.92;
}

.koha-hosting-visual-copy,
.koha-hosting-cloud {
    position: relative;
    z-index: 1;
}

.koha-hosting-visual-copy {
    position: absolute;
    top: 28px;
    right: 28px;
    text-align: right;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.koha-hosting-cloud {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.koha-hosting-cloud-shape {
    width: min(70%, 360px);
    min-height: 220px;
    padding: 28px;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.koha-hosting-cloud-shape h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.koha-hosting-cloud-shape p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.8;
}

.koha-hosting-accent {
    position: absolute;
    right: 28px;
    bottom: 26px;
    z-index: 1;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    opacity: 0.92;
}

.koha-hosting-highlights {
    padding: 22px 0;
    border-top: 1px solid rgba(11, 22, 51, 0.06);
    border-bottom: 1px solid rgba(11, 22, 51, 0.06);
    background: rgba(255, 255, 255, 0.88);
}

.koha-hosting-highlight-grid,
.koha-hosting-features,
.koha-hosting-options {
    display: grid;
    gap: 18px;
}

.koha-hosting-highlight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.koha-hosting-highlight,
.koha-hosting-card,
.koha-hosting-option,
.koha-hosting-banner {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--hosting-border);
    box-shadow: var(--hosting-shadow);
}

.koha-hosting-highlight {
    border-radius: 22px;
    padding: 20px;
}

.koha-hosting-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: var(--hosting-green-soft);
    color: var(--hosting-green);
    font-size: 18px;
}

.koha-hosting-highlight h3,
.koha-hosting-card h3,
.koha-hosting-option h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #11192e;
}

.koha-hosting-highlight p,
.koha-hosting-card p,
.koha-hosting-option p,
.koha-hosting-approach-copy p,
.koha-hosting-section-head p,
.koha-hosting-banner p {
    margin: 0;
    color: #667084;
    font-size: 14px;
    line-height: 1.8;
}

.koha-hosting-section {
    padding: 35px 0;
}

.koha-hosting-section-soft {
    background: rgba(250, 251, 253, 0.9);
}

.koha-hosting-section-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 28px;
}

.koha-hosting-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--hosting-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.koha-hosting-section-head h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #0e1730;
}

.koha-hosting-approach {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: 28px;
    align-items: center;
}

.koha-hosting-approach-copy {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--hosting-border);
    box-shadow: var(--hosting-shadow);
    border-radius: 30px;
    padding: 30px;
}

.koha-hosting-approach-copy p + p {
    margin-top: 14px;
}

.koha-hosting-diagram {
    position: relative;
    width: min(100%, 440px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.koha-hosting-diagram-ring {
    position: absolute;
    inset: 44px;
    border-radius: 999px;
    border: 2px dashed rgba(72, 140, 82, 0.3);
}

.koha-hosting-diagram-core,
.koha-hosting-diagram-node {
    position: absolute;
    background: #fff;
    border: 1px solid var(--hosting-border);
    box-shadow: var(--hosting-shadow);
}

.koha-hosting-diagram-core {
    inset: 50%;
    width: 170px;
    height: 170px;
    margin-left: -85px;
    margin-top: -85px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    color: #121c33;
}

.koha-hosting-diagram-core span {
    color: var(--hosting-purple);
}

.koha-hosting-diagram-node {
    width: 132px;
    min-height: 132px;
    border-radius: 24px;
    padding: 16px;
    text-align: center;
}

.koha-hosting-diagram-node h3 {
    margin: 10px 0 6px;
    font-size: 16px;
    color: #11192e;
}

.koha-hosting-diagram-node p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #727c8e;
}

.koha-hosting-diagram-top { top: 0; left: 50%; margin-left: -66px; }
.koha-hosting-diagram-right { right: 0; top: 50%; margin-top: -66px; }
.koha-hosting-diagram-bottom { bottom: 0; left: 50%; margin-left: -66px; }
.koha-hosting-diagram-left { left: 0; top: 50%; margin-top: -66px; }

.koha-hosting-banner {
    margin-top: 34px;
    border-radius: 28px;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.koha-hosting-banner strong {
    color: #131d34;
    font-size: 18px;
}

.koha-hosting-banner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #435064;
    font-size: 14px;
    font-weight: 800;
}

.koha-hosting-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koha-hosting-card,
.koha-hosting-option {
    border-radius: 26px;
    padding: 24px;
}

.koha-hosting-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koha-hosting-footer-cta {
    padding: 0 0 90px;
}

.koha-hosting-footer-box {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    min-height: 260px;
    border: 1px solid var(--hosting-border);
    box-shadow: var(--hosting-shadow);
    background: linear-gradient(135deg, #e9edf5 0%, #ffffff 100%);
}

.koha-hosting-footer-box:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(249, 250, 252, 0.96), rgba(249, 250, 252, 0.8)),
        url('../../Design_alzad_interface_upgrade/support_host/screen.png') center/cover no-repeat;
    opacity: 0.36;
}

.koha-hosting-footer-inner {
    position: relative;
    z-index: 1;
    padding: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 260px;
}

.koha-hosting-footer-box h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    color: #0e1730;
}

.koha-hosting-footer-box p {
    margin: 0 0 20px;
    max-width: 580px;
    color: #606b7c;
    font-size: 14px;
    line-height: 1.9;
}

.koha-hosting-mini-brand {
    text-align: right;
}

.koha-hosting-mini-brand strong {
    display: block;
    font-size: 42px;
    line-height: 1;
    color: #3a6e30;
    text-transform: lowercase;
}

.koha-hosting-mini-brand span {
    display: block;
    margin-top: 4px;
    color: #7a8493;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.dspace-page {
    --dspace-purple: #5b2a8c;
    --dspace-purple-hover: #491f72;
    --dspace-purple-light: #f5f0fa;
    --dspace-purple-border: #e8dcfa;
    --dspace-navy: #0b132b;
    --dspace-navy-text: #1c2237;
    --dspace-green: #6eb823;
    --dspace-dark-green: #559419;
    --dspace-cyan: #e0f4fc;
    --dspace-cyan-text: #0284c7;
    background:
        radial-gradient(circle at top center, rgba(91, 42, 140, 0.08), transparent 30%),
        radial-gradient(circle at top right, rgba(110, 184, 35, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 45%, #ffffff 100%);
    color: var(--dspace-navy-text);
    font-family: 'Montserrat', 'Plus Jakarta Sans', sans-serif;
    overflow: hidden;
}

.dspace-shell {
    width: min(1240px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.dspace-breadcrumbs {
    padding: 26px 0 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.dspace-breadcrumbs a {
    color: var(--dspace-purple);
}

.dspace-hero {
    padding: 22px 0 54px;
}

.dspace-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
    gap: 42px;
    align-items: center;
}

.dspace-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.dspace-mark {
    width: 44px;
    height: 44px;
    color: var(--dspace-green);
    flex: 0 0 auto;
}

.dspace-brand span {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #1f2937;
}

.dspace-copy h1 {
    margin: 0 0 24px;
    max-width: 640px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.03;
    letter-spacing: -0.04em;
    color: #0f172a;
    font-weight: 800;
}

.dspace-copy h1 span {
    color: var(--dspace-purple);
    display: inline-block;
}

.dspace-lead {
    margin: 0;
    max-width: 680px;
    font-size: 17px;
    line-height: 1.9;
    color: #5c6b81;
}

.dspace-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.dspace-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.dspace-btn:hover,
.dspace-btn:focus {
    transform: translateY(-2px);
}

.dspace-btn-primary {
    background: var(--dspace-purple);
     box-shadow: 0 18px 34px rgba(91, 42, 140, 0.2);
}

.dspace-btn-primary:hover,
.dspace-btn-primary:focus {
    background: var(--dspace-purple-hover);
    color: #ffffff;
}

.dspace-btn-secondary {
    background: #ffffff;
    color: var(--dspace-purple);
    border: 1px solid var(--dspace-purple-border);
}

.dspace-btn-white {
    background: #ffffff;
    color: var(--dspace-purple);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.dspace-visual {
    position: relative;
    padding: 26px 0 18px;
}

.dspace-note {
    position: absolute;
    top: -6px;
    right: 12px;
    z-index: 2;
    text-align: right;
    transform: rotate(-6deg);
    line-height: 1.05;
    pointer-events: none;
}

.dspace-note span,
.dspace-note em {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
}

.dspace-note span {
    font-size: 31px;
    color: var(--dspace-purple);
}

.dspace-note span:nth-child(2) {
    color: var(--dspace-purple-hover);
}

.dspace-note span:nth-child(3) {
    color: #334155;
}

.dspace-note em {
    font-size: 22px;
    color: #475569;
}

.dspace-laptop-wrap {
    position: relative;
    width: min(100%, 560px);
    margin: 0 auto;
}

.dspace-laptop-frame {
    background: #0f172a;
    padding: 10px 10px 14px;
    border-radius: 14px 14px 3px 3px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
    position: relative;
    z-index: 1;
}

.dspace-camera {
    width: 8px;
    height: 8px;
    margin: 0 auto 6px;
    border-radius: 999px;
    background: #334155;
    opacity: 0.75;
}

.dspace-screen {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dspace-screen-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.dspace-mini-brand {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--dspace-purple);
}

.dspace-mini-nav {
    display: flex;
    gap: 10px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
}

.dspace-screen-hero {
    position: relative;
    padding: 22px 20px 18px;
    text-align: center;
    background: linear-gradient(90deg, #fff7ed 0%, #f0f9ff 48%, #e0e7ff 100%);
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
}

.dspace-dot-matrix {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: radial-gradient(var(--dspace-purple) 1px, transparent 1px);
    background-size: 8px 8px;
}

.dspace-screen-hero-inner {
    position: relative;
    z-index: 1;
}

.dspace-screen-hero h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.18;
    color: #1f2937;
    font-weight: 800;
}

.dspace-screen-hero h3 span {
    color: var(--dspace-purple);
}

.dspace-search {
    max-width: 320px;
    margin: 16px auto 0;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.dspace-search input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    font-size: 11px;
    color: #64748b;
}

.dspace-search input::placeholder {
    color: #94a3b8;
}

.dspace-search button {
    width: 42px;
    border: 0;
    background: var(--dspace-navy);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.dspace-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 12px;
    text-align: center;
}

.dspace-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #475569;
}

.dspace-icon-card i {
    font-size: 16px;
    color: var(--dspace-purple);
    margin-bottom: 4px;
}

.dspace-icon-card span {
    font-size: 9px;
    font-weight: 700;
}

.dspace-laptop-base {
    height: 12px;
    margin: 0 -14px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(to bottom, #d1d5db 0%, #9ca3af 60%, #6b7280 100%);
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.dspace-laptop-notch {
    width: 80px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: rgba(71, 85, 105, 0.72);
}

.dspace-book-stack {
    position: absolute;
    right: -16px;
    bottom: -8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dspace-book {
    padding: 5px 14px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.dspace-book-research {
    background: #1e293b;
    color: #ffffff;
    border-left: 4px solid #fbbf24;
}

.dspace-book-education {
    background: #0369a1;
    color: #ffffff;
    border-left: 4px solid #7dd3fc;
}

.dspace-book-innovation {
    background: #e2e8f0;
    color: #1e293b;
    border-left: 4px solid var(--dspace-purple);
}

.dspace-book-community {
    background: #d97706;
    color: #ffffff;
    border-left: 4px solid #fde68a;
}

.dspace-plant {
    position: absolute;
    left: -18px;
    bottom: -4px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dspace-plant-leaves {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin-bottom: -2px;
}

.dspace-plant-leaves i {
    display: block;
    width: 10px;
    border-radius: 999px 999px 0 0;
    background: #10b981;
}

.dspace-plant-leaves i:nth-child(1) {
    height: 26px;
    transform: rotate(-12deg);
    background: #059669;
}

.dspace-plant-leaves i:nth-child(2) {
    height: 34px;
}

.dspace-plant-leaves i:nth-child(3) {
    height: 26px;
    transform: rotate(12deg);
    background: #059669;
}

.dspace-plant-pot {
    width: 28px;
    height: 22px;
    border-radius: 0 0 6px 6px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 2px 4px rgba(148, 163, 184, 0.18);
}

.dspace-values {
    padding: 28px 0;
    margin: 8px 0 18px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.dspace-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.dspace-value {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dspace-value-icon,
.dspace-pillar-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #faf5ff;
    border: 1px solid rgba(91, 42, 140, 0.08);
    color: var(--dspace-purple);
    flex: 0 0 auto;
}

.dspace-value h3,
.dspace-solution-card h3,
.dspace-pillar h3,
.dspace-cta h2 {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.dspace-value h3 {
    font-size: 20px;
}

.dspace-value p,
.dspace-solution-card p,
.dspace-pillar p,
.dspace-section-head p,
.dspace-metric span,
.dspace-cta p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.dspace-value p {
    font-size: 13px;
}

.dspace-section {
    padding: 74px 0;
}

.dspace-section-soft {
    background: rgba(248, 250, 252, 0.75);
}

.dspace-section-head {
    margin-bottom: 44px;
}

.dspace-section-head.centered {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.dspace-section-head h2 {
    margin: 0 0 12px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #0f172a;
    font-weight: 800;
}

.dspace-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.dspace-solution-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 10px 25px -5px rgba(91, 42, 140, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}

.dspace-solution-card.featured {
    border-width: 2px;
    border-color: rgba(91, 42, 140, 0.18);
}

.dspace-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 24px;
}

.dspace-pill-cyan {
    background: var(--dspace-cyan);
    color: var(--dspace-cyan-text);
}

.dspace-pill-purple {
    background: #f3e8ff;
    color: var(--dspace-purple);
}

.dspace-pill-indigo {
    background: #eef2ff;
    color: #4f46e5;
}

.dspace-illus {
    height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

.dspace-illus-books {
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    gap: 0;
}

.dspace-illus-books i {
    width: 92px;
    height: 18px;
    display: block;
    border-radius: 7px;
    transform: skewX(-12deg);
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.12);
}

.dspace-illus-books i:nth-child(1) { background: #0ea5e9; border-bottom: 2px solid #0369a1; }
.dspace-illus-books i:nth-child(2) { background: #38bdf8; border-bottom: 2px solid #0284c7; margin-top: -6px; }
.dspace-illus-books i:nth-child(3) { background: #7dd3fc; border-bottom: 2px solid #0ea5e9; margin-top: -6px; }
.dspace-illus-books i:nth-child(4) { background: #bae6fd; border-bottom: 2px solid #38bdf8; margin-top: -6px; }

.dspace-illus-rocket i {
    font-size: 70px;
    color: var(--dspace-purple);
    transform: rotate(-45deg);
    position: relative;
    z-index: 1;
}

.dspace-rocket-glow {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: rgba(216, 180, 254, 0.9);
    filter: blur(14px);
}

.dspace-illus-gears {
    color: var(--dspace-purple);
}

.dspace-illus-gears .gear-one {
    font-size: 54px;
    color: #818cf8;
    margin-right: -12px;
}

.dspace-illus-gears .gear-two {
    font-size: 64px;
    margin-left: -12px;
}

.dspace-solution-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--dspace-purple);
    font-size: 14px;
    font-weight: 800;
}

.dspace-pillars-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
}

.dspace-pillar {
    text-align: center;
    padding: 0 8px;
}

.dspace-pillar-icon {
    margin-bottom: 14px;
}

.dspace-pillar h3 {
    font-size: 16px;
}

.dspace-pillar p {
    font-size: 12px;
}

.dspace-metrics-wrap {
    margin-bottom: 40px;
}

.dspace-metrics {
    border-radius: 24px;
    padding: 34px;
    border: 1px solid #ede9fe;
    background: linear-gradient(90deg, #faf5ff 0%, rgba(250, 245, 255, 0.75) 50%, rgba(243, 232, 255, 0.5) 100%);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
}

.dspace-metric strong {
    display: block;
    color: var(--dspace-purple);
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
}

.dspace-metric:nth-child(3) strong {
    font-size: 28px;
    color: #0f172a;
}

.dspace-metric span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

.dspace-metric-note {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dspace-matrix-box {
    width: 146px;
    height: 66px;
    border-radius: 12px;
    opacity: 0.4;
    background-image: radial-gradient(var(--dspace-purple) 1.2px, transparent 1.2px);
    background-size: 10px 10px;
}

.dspace-metric-note em {
    margin-top: 8px;
    color: var(--dspace-purple);
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-style: italic;
    font-weight: 700;
    transform: rotate(-6deg);
}

.dspace-cta-wrap {
    padding-bottom: 70px;
}

.dspace-cta {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 36px 40px;
    background: var(--dspace-purple);
     box-shadow: 0 24px 48px rgba(91, 42, 140, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

.dspace-cta:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background:
        linear-gradient(90deg, transparent 0, transparent 4%, rgba(255, 255, 255, 0.8) 4%, rgba(255, 255, 255, 0.8) 10%, transparent 10%, transparent 18%, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0.5) 26%, transparent 26%, transparent 34%, rgba(255, 255, 255, 0.65) 34%, rgba(255, 255, 255, 0.65) 38%, transparent 38%, transparent 48%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0.45) 58%, transparent 58%, transparent 66%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.75) 72%, transparent 72%);
}

.dspace-cta-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.dspace-cta-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 26px;
    flex: 0 0 auto;
}

.dspace-cta h2 {
     font-size: clamp(28px, 3vw, 42px);
    line-height: 1.08;
}

.dspace-cta p {
     font-size: 15px;
}

.ojs-page {
    --ojs-navy: #0a192f;
    --ojs-navy-soft: #12243d;
    --ojs-blue: #0369a1;
    --ojs-cyan: #0284c7;
    --ojs-cyan-soft: #e0f2fe;
    --ojs-ice: #f7fbff;
    --ojs-ink: #1e293b;
    --ojs-muted: #64748b;
    --ojs-border: rgba(148, 163, 184, 0.22);
    --ojs-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
    background:
        radial-gradient(circle at top left, rgba(2, 132, 199, 0.1), transparent 28%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 45%, #ffffff 100%);
    color: var(--ojs-ink);
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
}

.ojs-page h1,
.ojs-page h2,
.ojs-page h3,
.ojs-page strong {
    letter-spacing: -0.03em;
}

.ojs-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.ojs-breadcrumbs {
    padding: 34px 0 12px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ojs-breadcrumbs a {
    color: var(--ojs-blue);
}

.ojs-breadcrumbs span {
    margin: 0 8px;
}

.ojs-hero {
    padding: 18px 0 74px;
}

.ojs-hero-grid,
.ojs-why-grid,
.ojs-impact-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}

.ojs-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
}

.ojs-eyebrow,
.ojs-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ojs-eyebrow,
.ojs-kicker {
    color: var(--ojs-cyan);
}

.ojs-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 24px;
}

.ojs-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    color: var(--ojs-blue);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.ojs-brand-text {
    color: #0f172a;
    font-size: 26px;
    font-weight: 800;
}

.ojs-copy h1 {
    margin: 0 0 18px;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.02;
    color: #0f172a;
    font-weight: 900;
}

.ojs-copy h1 span {
    display: block;
    margin-top: 10px;
    color: var(--ojs-blue);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
}

.ojs-lead,
.ojs-section-head p,
.ojs-service-card p,
.ojs-why-copy p,
.ojs-why-item p,
.ojs-banner-copy p,
.ojs-impact-copy p,
.ojs-contact-card p {
    margin: 0;
    color: var(--ojs-muted);
    line-height: 1.85;
}

.ojs-lead {
    max-width: 620px;
    font-size: 18px;
}

.ojs-actions,
.ojs-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.ojs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ojs-btn:hover,
.ojs-btn:focus {
    transform: translateY(-2px);
}

.ojs-btn-primary {
    background: linear-gradient(135deg, #006e8c 0%, var(--ojs-blue) 100%);
    box-shadow: 0 18px 34px rgba(3, 105, 161, 0.2);
}

.ojs-btn-secondary {
    background: #ffffff;
    color: var(--ojs-ink);
    border: 1px solid var(--ojs-border);
}

.ojs-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #dbe4ef;
}

.ojs-trust-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ojs-trust-icon,
.ojs-service-icon,
.ojs-why-item > span {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ojs-cyan-soft);
    color: var(--ojs-blue);
    flex: 0 0 auto;
}

.ojs-trust-card strong,
.ojs-service-card h3,
.ojs-why-item h3,
.ojs-impact-copy h2,
.ojs-contact-card h2,
.ojs-banner-copy h2,
.ojs-section-head h2 {
    display: block;
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.ojs-trust-card strong {
    font-size: 14px;
}

.ojs-trust-card span {
    display: block;
    color: var(--ojs-muted);
    font-size: 12px;
    line-height: 1.65;
}

.ojs-visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ojs-book-stack {
    position: absolute;
    left: -8px;
    bottom: 42px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 178px;
}

.ojs-book {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 7px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.ojs-book em {
    font-size: 10px;
    font-style: normal;
    opacity: 0.88;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ojs-book-research {
    background: linear-gradient(135deg, #0f3b68 0%, #0a6aa1 100%);
    border-left: 4px solid #38bdf8;
}

.ojs-book-publish {
    background: linear-gradient(135deg, #1f2937 0%, #334155 100%);
    border-left: 4px solid #34d399;
}

.ojs-book-share {
    background: linear-gradient(135deg, #0f4c81 0%, #1d4ed8 100%);
    border-left: 4px solid #67e8f9;
}

.ojs-book-impact {
    background: linear-gradient(135deg, #006a86 0%, #0284c7 100%);
    border-left: 4px solid #fbbf24;
}

.ojs-laptop {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    padding: 11px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, var(--ojs-navy) 0%, #0d1c32 100%);
    box-shadow: 0 34px 65px rgba(15, 23, 42, 0.22);
}

.ojs-laptop-camera {
    width: 9px;
    height: 9px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: #334155;
}

.ojs-screen {
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #dbe4ef;
}

.ojs-screen-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ojs-screen-dots {
    display: flex;
    gap: 7px;
}

.ojs-screen-dots i {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: block;
}

.ojs-screen-dots i:nth-child(1) { background: #fb7185; }
.ojs-screen-dots i:nth-child(2) { background: #fbbf24; }
.ojs-screen-dots i:nth-child(3) { background: #34d399; }

.ojs-screen-url {
    padding: 7px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-family: monospace;
    font-size: 12px;
    text-align: center;
}

.ojs-screen-suite {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-self: end;
}

.ojs-screen-suite strong {
    color: var(--ojs-blue);
    font-size: 16px;
    font-weight: 900;
}

.ojs-screen-suite span {
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.ojs-screen-body {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 315px;
}

.ojs-sidebar {
    background: #0f172a;
    color: #cbd5e1;
    padding: 16px 14px;
}

.ojs-sidebar h3 {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.ojs-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ojs-sidebar li {
    padding: 8px 0;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.ojs-sidebar li.active {
    color: #7dd3fc;
}

.ojs-dashboard {
    padding: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
}

.ojs-dashboard-head,
.ojs-impact-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.ojs-dashboard-head strong,
.ojs-impact-top strong {
    font-size: 16px;
    color: #0f172a;
    font-weight: 800;
}

.ojs-dashboard-head span,
.ojs-impact-top span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
}

.ojs-dashboard-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ojs-dashboard-pills span,
.ojs-impact-top mark {
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe4ef;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
}

.ojs-dashboard-pills .is-active,
.ojs-impact-top mark {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: var(--ojs-blue);
}

.ojs-submissions {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.ojs-submission {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 20px rgba(148, 163, 184, 0.08);
}

.ojs-submission strong {
    display: block;
    margin: 0 0 3px;
    color: #0f172a;
    font-size: 13px;
}

.ojs-submission span {
    display: block;
    color: #64748b;
    font-size: 11px;
}

.ojs-submission mark {
    padding: 6px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
}

.ojs-submission mark.review {
    background: #fef3c7;
    color: #b45309;
}

.ojs-submission mark.draft {
    background: #e0f2fe;
    color: var(--ojs-blue);
}

.ojs-laptop-base {
    width: calc(100% + 30px);
    height: 14px;
    margin: 0 auto -5px;
    transform: translateX(-15px);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

.ojs-section {
    padding: 82px 0;
}

.ojs-section-services {
    background: #ffffff;
    border-top: 1px solid #eef2f7;
}

.ojs-section-head {
    margin-bottom: 42px;
}

.ojs-section-head.centered {
    max-width: 780px;
    margin: 0 auto 42px;
    text-align: center;
}

.ojs-section-head h2,
.ojs-why-copy h2,
.ojs-impact-copy h2,
.ojs-contact-card h2,
.ojs-banner-copy h2 {
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.05;
}

.ojs-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ojs-service-card {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--ojs-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ojs-service-card:hover,
.ojs-service-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(2, 132, 199, 0.32);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}

.ojs-service-card h3 {
    font-size: 24px;
    margin-top: 20px;
}

.ojs-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--ojs-blue);
    font-size: 14px;
    font-weight: 800;
}

.ojs-why-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.85fr);
}

.ojs-why-copy p {
    max-width: 640px;
    font-size: 17px;
}

.ojs-why-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.ojs-why-item {
    display: flex;
    gap: 16px;
    padding: 22px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--ojs-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ojs-why-item h3 {
    font-size: 20px;
}

.ojs-arch-card {
    position: relative;
    max-width: 420px;
    margin-left: auto;
    border-radius: 210px 210px 28px 28px;
    padding: 14px 14px 24px;
    background: linear-gradient(180deg, var(--ojs-navy-soft) 0%, #0f172a 100%);
    box-shadow: 0 32px 64px rgba(15, 23, 42, 0.18);
}

.ojs-arch-inner {
    min-height: 520px;
    border-radius: 194px 194px 18px 18px;
    padding: 34px 26px 28px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.9) 100%);
    color: #ffffff;
}

.ojs-arch-head {
    text-align: center;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.ojs-arch-head span {
    display: block;
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ojs-arch-head strong {
    display: block;
    margin-top: 10px;
    font-size: 28px;
    color: #ffffff;
    font-weight: 800;
}

.ojs-arch-books {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.ojs-arch-books div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.18);
}

.ojs-arch-books div:nth-child(1) {
    background: rgba(12, 74, 110, 0.95);
    border-left: 4px solid #38bdf8;
}

.ojs-arch-books div:nth-child(2) {
    background: rgba(8, 47, 73, 0.95);
    border-left: 4px solid #2dd4bf;
}

.ojs-arch-books div:nth-child(3) {
    background: rgba(30, 41, 59, 0.95);
    border-left: 4px solid #818cf8;
}

.ojs-arch-books div:nth-child(4) {
    background: rgba(23, 37, 84, 0.95);
    border-left: 4px solid #7dd3fc;
}

.ojs-arch-books em {
    color: #cbd5e1;
    font-size: 10px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ojs-arch-inner p {
    margin: 28px 0 0;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ojs-arch-badge {
    position: absolute;
    left: -18px;
    bottom: 24px;
    width: 148px;
    height: 148px;
    border-radius: 999px;
    padding: 20px;
    background: linear-gradient(135deg, #005a73 0%, #0284c7 100%);
    border: 4px solid #ffffff;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 24px 38px rgba(2, 132, 199, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ojs-arch-badge i {
    margin-bottom: 8px;
    color: #7dd3fc;
    font-size: 24px;
}

.ojs-arch-badge strong {
    font-size: 22px;
    color: #ffffff;
}

.ojs-arch-badge span {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
}

.ojs-banner {
    padding: 0 0 32px;
}

.ojs-banner-inner {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 36px 40px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 42%, #0c4a6e 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    box-shadow: 0 24px 48px rgba(3, 105, 161, 0.18);
}

.ojs-banner-inner:before {
    content: "";
    position: absolute;
    top: -52%;
    right: -18%;
    width: 540px;
    height: 540px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
}

.ojs-banner-copy,
.ojs-cta-copy {
    position: relative;
    z-index: 1;
}

.ojs-kicker-light {
    color: #bfdbfe;
}

.ojs-banner-copy h2 {
    margin: 8px 0 10px;
    color: #ffffff;
}

.ojs-banner-copy p {
    color: rgba(255, 255, 255, 0.84);
    max-width: 720px;
}

.ojs-banner-points {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.ojs-banner-points div {
    min-width: 120px;
    text-align: center;
}

.ojs-banner-points i {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 20px;
}

.ojs-banner-points span {
    display: block;
    color: #e0f2fe;
    font-size: 12px;
    font-weight: 700;
}

.ojs-impact {
    padding-top: 50px;
}

.ojs-impact-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.ojs-impact-laptop {
    padding: 14px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, var(--ojs-navy) 0%, #0f172a 100%);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
}

.ojs-impact-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    color: #cbd5e1;
    font-family: monospace;
    font-size: 11px;
}

.ojs-impact-screen {
    border-radius: 14px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dbe4ef;
}

.ojs-impact-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.ojs-impact-stats article {
    padding: 16px 12px;
    border-radius: 14px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.ojs-impact-stats strong {
    display: block;
    font-size: 28px;
    color: #0f172a;
    font-weight: 900;
}

.ojs-impact-stats article:nth-child(2) strong {
    color: var(--ojs-blue);
}

.ojs-impact-stats article:nth-child(3) strong {
    color: #059669;
}

.ojs-impact-stats span {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.ojs-activity > strong {
    display: block;
    margin-bottom: 12px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.ojs-activity div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.ojs-activity div + div {
    margin-top: 8px;
}

.ojs-activity b {
    color: #334155;
    font-weight: 700;
}

.ojs-activity em {
    color: #94a3b8;
    font-size: 10px;
    font-style: normal;
}

.ojs-activity .dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: block;
}

.ojs-activity .dot.cyan { background: var(--ojs-cyan); }
.ojs-activity .dot.amber { background: #f59e0b; }
.ojs-activity .dot.green { background: #10b981; }

.ojs-impact-copy p {
    max-width: 560px;
    font-size: 17px;
}

.ojs-impact-copy .ojs-btn {
    margin-top: 28px;
}

.ojs-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #dbe4ef;
}

.ojs-metrics strong {
    display: block;
    font-size: 42px;
    color: #0f172a;
    font-weight: 900;
}

.ojs-metrics span {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.ojs-contact {
    padding: 0 0 80px;
}

.ojs-contact-card {
    text-align: center;
    padding: 42px 34px;
    border-radius: 28px;
    background: linear-gradient(180deg, #f1f7fa 0%, #ffffff 100%);
    border: 1px solid #dbe4ef;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.ojs-contact-card h2 {
    margin-bottom: 12px;
}

.ojs-contact-card p {
    max-width: 760px;
    margin: 0 auto;
}

.ojs-contact-actions {
    justify-content: center;
}

@media (max-width: 991px) {
    .koha-hero-grid,
    .koha-grid,
    .koha-why,
    .koha-media-grid,
    .koha-cta,
    .koha-hosting-hero-grid,
    .koha-hosting-approach,
    .koha-hosting-features,
    .koha-hosting-options,
    .koha-hosting-highlight-grid,
    .koha-hosting-section-head,
    .koha-hosting-banner,
    .koha-hosting-footer-inner,
    .dspace-hero-grid,
    .dspace-values-grid,
    .dspace-solutions-grid,
    .dspace-pillars-grid,
    .dspace-metrics,
    .dspace-cta,
    .ojs-hero-grid,
    .ojs-services-grid,
    .ojs-why-grid,
    .ojs-why-list,
    .ojs-impact-grid,
    .ojs-metrics,
    .ojs-banner-inner {
        grid-template-columns: 1fr;
        display: grid;
    }

    .koha-cta,
    .koha-hosting-footer-inner,
    .koha-hosting-banner,
    .dspace-cta,
    .ojs-banner-inner {
        align-items: start;
    }

    .koha-section-head {
        display: block;
    }

    .koha-hosting-mini-brand {
        text-align: left;
    }

    .dspace-pillar {
        text-align: left;
        padding: 0;
    }

    .dspace-metric-note {
        align-items: flex-start;
    }

    .ojs-book-stack {
        position: static;
        width: 100%;
        max-width: 360px;
        margin: 0 auto 18px;
    }

    .ojs-arch-card {
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .koha-shell,
    .koha-hosting-shell,
    .dspace-shell,
    .ojs-shell {
        width: min(100% - 20px, 1180px);
    }

    .koha-hero {
        padding: 24px 0 70px;
    }

    .koha-hosting-hero {
        padding-bottom: 64px;
    }

    .dspace-hero {
        padding-bottom: 42px;
    }

    .ojs-hero {
        padding-bottom: 46px;
    }

    .koha-copy-panel,
    .koha-visual-panel,
    .koha-card,
    .koha-story,
    .koha-benefits,
    .koha-cta,
    .koha-hosting-highlight,
    .koha-hosting-card,
    .koha-hosting-option,
    .koha-hosting-approach-copy,
    .koha-hosting-banner,
    .koha-hosting-footer-inner,
    .dspace-solution-card,
    .dspace-metrics,
    .dspace-cta,
    .ojs-service-card,
    .ojs-why-item,
    .ojs-banner-inner,
    .ojs-contact-card {
        padding: 20px;
        border-radius: 22px;
    }

    .koha-highlights,
    .koha-modules,
    .koha-benefit-list {
        grid-template-columns: 1fr;
    }

    .koha-media-tile img,
    .koha-media-tile video {
        height: 220px;
    }

    .koha-screen-frame {
        padding: 0;
    }

    .koha-screen-bar {
        padding: 10px 8px;
        gap: 10px;
    }

    .koha-browser-label {
        min-width: 0;
        padding: 8px 10px;
        font-size: 11px;
    }

    .koha-screen-body {
        min-height: 0;
        padding: 12px;
    }

    .koha-handwritten-badge {
        right: 18px;
        top: -8px;
    }

    .koha-handwritten-primary {
        font-size: 18px;
    }

    .koha-handwritten-muted {
        font-size: 16px;
    }

    .koha-handwritten-secondary {
        font-size: 20px;
    }

    .koha-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .koha-book-stack {
        display: none;
    }

    .koha-hosting-visual {
        min-height: 420px;
    }

    .koha-hosting-cloud-shape {
        width: calc(100% - 44px);
        min-height: 180px;
        border-radius: 32px;
    }

    .koha-hosting-diagram {
        aspect-ratio: auto;
        display: grid;
        gap: 16px;
    }

    .koha-hosting-diagram-ring,
    .koha-hosting-diagram-core,
    .koha-hosting-diagram-node {
        position: static;
        margin: 0;
        width: auto;
        height: auto;
        min-height: 0;
    }

    .koha-hosting-diagram-core {
        border-radius: 24px;
        padding: 24px;
    }

    .dspace-brand span {
        font-size: 22px;
    }

    .dspace-copy h1 {
        font-size: 42px;
    }

    .dspace-lead {
        font-size: 15px;
    }

    .dspace-note {
        position: static;
        transform: none;
        margin-bottom: 14px;
        text-align: left;
    }

    .dspace-note span {
        font-size: 22px;
    }

    .dspace-note em {
        font-size: 16px;
    }

    .dspace-book-stack,
    .dspace-plant {
        display: none;
    }

    .dspace-screen-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .dspace-mini-nav {
        flex-wrap: wrap;
    }

    .dspace-icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dspace-value {
        align-items: flex-start;
    }

    .dspace-value h3 {
        font-size: 18px;
    }

    .dspace-metric strong {
        font-size: 34px;
    }

    .dspace-metric:nth-child(3) strong {
        font-size: 24px;
    }

    .dspace-cta-copy {
        flex-direction: column;
        align-items: flex-start;
    }

    .ojs-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ojs-brand-text {
        font-size: 22px;
    }

    .ojs-copy h1 {
        font-size: 40px;
    }

    .ojs-copy h1 span {
        font-size: 24px;
    }

    .ojs-lead,
    .ojs-impact-copy p,
    .ojs-why-copy p {
        font-size: 15px;
    }

    .ojs-trust-grid,
    .ojs-metrics,
    .ojs-impact-stats {
        grid-template-columns: 1fr;
    }

    .ojs-visual {
        min-height: 0;
    }

    .ojs-book-stack,
    .ojs-arch-badge {
        display: none;
    }

    .ojs-laptop,
    .ojs-impact-laptop {
        padding: 10px;
        border-radius: 18px 18px 0 0;
    }

    .ojs-screen-bar,
    .ojs-impact-bar,
    .ojs-dashboard-head,
    .ojs-impact-top,
    .ojs-submission,
    .ojs-activity div {
        grid-template-columns: 1fr;
        display: grid;
    }

    .ojs-screen-body {
        grid-template-columns: 1fr;
    }

    .ojs-sidebar {
        display: none;
    }

    .ojs-screen-url {
        font-size: 11px;
    }

    .ojs-screen-suite {
        justify-self: start;
    }

    .ojs-dashboard-pills {
        justify-content: flex-start;
    }

    .ojs-submission mark,
    .ojs-impact-top mark {
        justify-self: start;
    }

    .ojs-why-item {
        gap: 12px;
    }

    .ojs-arch-card,
    .ojs-arch-inner {
        border-radius: 28px;
    }

    .ojs-arch-inner {
        min-height: 0;
        padding: 24px 18px;
    }

    .ojs-banner-points {
        gap: 12px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        display: grid;
    }

    .ojs-banner-points div {
        min-width: 0;
    }

    .ojs-contact {
        padding-bottom: 60px;
    }
}

.openkm-page {
    --openkm-purple: #5b2a8c;
    --openkm-purple-dark: #491d73;
    --openkm-indigo: #4f46e5;
    --openkm-navy: #0f172a;
    --openkm-ink: #1a1a2e;
    --openkm-muted: #5f6b7b;
    --openkm-border: rgba(148, 163, 184, 0.22);
    --openkm-soft: #f8fafc;
    background:
        radial-gradient(circle at top right, rgba(123, 62, 189, 0.1), transparent 26%),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 24%),
        linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
    color: var(--openkm-ink);
    font-family: 'Montserrat', 'Manrope', sans-serif;
    overflow: hidden;
}

.openkm-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.openkm-breadcrumbs {
    padding: 34px 0 12px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.openkm-breadcrumbs a {
    color: var(--openkm-purple);
}

.openkm-breadcrumbs span {
    margin: 0 8px;
}

.openkm-hero {
    padding: 18px 0 80px;
}

.openkm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
    gap: 42px;
    align-items: center;
}

.openkm-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.openkm-brand-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5edf8;
    flex: 0 0 auto;
}

.openkm-brand-icon svg {
    width: 100%;
    height: 100%;
}

.openkm-brand h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
}

.openkm-brand h2 span {
    color: #0284c7;
}

.openkm-brand p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.openkm-copy h1,
.openkm-section-head h2,
.openkm-cta h2 {
    margin: 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.openkm-copy h1 {
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.04;
    margin-bottom: 20px;
}

.openkm-copy h1 span {
    display: block;
    margin-top: 8px;
    color: var(--openkm-purple);
}

.openkm-lead,
.openkm-pillar p,
.openkm-section-head p,
.openkm-solution-card p,
.openkm-feature-card p,
.openkm-metric span,
.openkm-cta p {
    margin: 0;
    color: var(--openkm-muted);
    line-height: 1.85;
}

.openkm-lead {
    max-width: 640px;
    font-size: 17px;
}

.openkm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.openkm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.openkm-btn:hover,
.openkm-btn:focus {
    transform: translateY(-2px);
}

.openkm-btn-primary {
    background: linear-gradient(135deg, var(--openkm-purple) 0%, var(--openkm-purple-dark) 100%);
    box-shadow: 0 18px 34px rgba(91, 42, 140, 0.24);
}

.openkm-btn-secondary {
    background: #ffffff;
    color: var(--openkm-purple);
    border: 1px solid rgba(91, 42, 140, 0.18);
}

.openkm-btn-white {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.openkm-visual {
    position: relative;
}

.openkm-note {
    position: absolute;
    top: -18px;
    right: 18px;
    z-index: 2;
    color: var(--openkm-purple);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 31px;
    line-height: 1.02;
    transform: rotate(-4deg);
    pointer-events: none;
}

.openkm-note span {
    display: block;
}

.openkm-laptop-wrap {
    position: relative;
    width: min(100%, 620px);
    margin: 0 auto;
    padding-top: 26px;
}

.openkm-laptop {
    position: relative;
    z-index: 1;
    padding: 10px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
    border: 3px solid rgba(71, 85, 105, 0.7);
    box-shadow: 0 28px 58px rgba(15, 23, 42, 0.22);
}

.openkm-camera {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #334155;
    transform: translateX(-50%);
}

.openkm-screen {
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.openkm-screen-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
}

.openkm-dots {
    display: flex;
    gap: 7px;
}

.openkm-dots i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: block;
}

.openkm-dots i:nth-child(1) { background: #f87171; }
.openkm-dots i:nth-child(2) { background: #fbbf24; }
.openkm-dots i:nth-child(3) { background: #34d399; }

.openkm-browser-title {
    color: #334155;
    font-weight: 700;
}

.openkm-screen-user {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.openkm-screen-body {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 170px;
    min-height: 294px;
    background: #f8fafc;
}

.openkm-sidebar {
    padding: 14px 12px;
    background: #0f172a;
    color: #cbd5e1;
}

.openkm-sidebar-label,
.openkm-files-label {
    display: block;
    margin-bottom: 10px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.openkm-sidebar ul,
.openkm-tree,
.openkm-file-list {
    display: grid;
    gap: 8px;
}

.openkm-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.openkm-sidebar li,
.openkm-tree div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.openkm-sidebar li {
    color: #cbd5e1;
}

.openkm-sidebar li.active {
    background: #4f46e5;
    color: #ffffff;
}

.openkm-directory {
    padding: 14px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}

.openkm-directory-search {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 11px;
}

.openkm-tree div {
    color: #334155;
}

.openkm-tree i {
    color: #f59e0b;
}

.openkm-tree .active {
    background: #eef2ff;
    color: #4338ca;
}

.openkm-tree .active i {
    color: #6366f1;
}

.openkm-files {
    padding: 14px 12px;
}

.openkm-file-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.openkm-file-list strong {
    color: #0f172a;
    font-size: 10px;
    font-weight: 700;
}

.openkm-file-list em {
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.openkm-base {
    position: relative;
    width: min(100%, 650px);
    height: 12px;
    margin: 0 auto;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 50%, #94a3b8 100%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.openkm-base-notch {
    position: absolute;
    top: 0;
    left: 50%;
    width: 64px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: #64748b;
    transform: translateX(-50%);
}

.openkm-badge-stack {
    position: absolute;
    right: -16px;
    bottom: 42px;
    z-index: 2;
    display: grid;
    gap: 6px;
}

.openkm-badge-stack span {
    padding: 8px 12px;
    border-radius: 7px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);
}

.openkm-badge-stack .is-indigo { background: #312e81; }
.openkm-badge-stack .is-slate { background: #1f2937; }
.openkm-badge-stack .is-amber { background: #b45309; }
.openkm-badge-stack .is-purple { background: #6b21a8; }
.openkm-badge-stack .is-green { background: #166534; }

.openkm-pillars {
    padding: 26px 0 18px;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

.openkm-pillars-grid,
.openkm-solutions-grid,
.openkm-feature-grid,
.openkm-metrics {
    display: grid;
}

.openkm-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.openkm-pillar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.openkm-pillar-icon,
.openkm-feature-card span,
.openkm-cta-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3e8ff;
    color: var(--openkm-purple);
    border: 1px solid rgba(91, 42, 140, 0.08);
    flex: 0 0 auto;
}

.openkm-pillar h3,
.openkm-solution-card h3,
.openkm-feature-card h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.openkm-pillar h3 {
    font-size: 20px;
}

.openkm-pillar p {
    font-size: 13px;
}

.openkm-section {
    padding: 80px 0;
}

.openkm-section-soft {
    background: rgba(248, 250, 252, 0.8);
}

.openkm-section-head {
    margin-bottom: 42px;
}

.openkm-section-head.centered {
    max-width: 770px;
    margin: 0 auto 42px;
    text-align: center;
}

.openkm-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--openkm-purple);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.openkm-section-head h2 {
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.05;
    margin-bottom: 14px;
}

.openkm-solutions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.openkm-solution-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--openkm-border);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.openkm-solution-card.featured {
    border-width: 2px;
    border-color: rgba(91, 42, 140, 0.22);
    box-shadow: 0 20px 36px rgba(91, 42, 140, 0.08);
}

.openkm-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 24px;
}

.openkm-pill-cyan {
    background: #e0f2fe;
    color: #0369a1;
}

.openkm-pill-purple {
    background: #f3e8ff;
    color: var(--openkm-purple);
}

.openkm-pill-indigo {
    background: #eef2ff;
    color: var(--openkm-indigo);
}

.openkm-illus {
    height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
}

.openkm-illus-files {
    width: 110px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    gap: 0;
}

.openkm-illus-files i {
    display: block;
    width: 86px;
    height: 18px;
    border-radius: 6px;
    transform: skewX(-12deg);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12);
}

.openkm-illus-files i:nth-child(1) { background: #4f46e5; margin-top: 0; }
.openkm-illus-files i:nth-child(2) { background: #7c3aed; margin-top: -5px; }
.openkm-illus-files i:nth-child(3) { background: #a855f7; margin-top: -5px; }

.openkm-illus-servers {
    width: 132px;
    flex-direction: column;
    gap: 8px;
}

.openkm-illus-servers:before {
    content: "";
    position: absolute;
    width: 110px;
    height: 68px;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.22);
    filter: blur(14px);
}

.openkm-illus-servers span {
    position: relative;
    z-index: 1;
    display: block;
    width: 108px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.18);
}

.openkm-illus-servers span:nth-child(2) {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

.openkm-illus-puzzle i {
    font-size: 74px;
    color: #6366f1;
}

.openkm-solution-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--openkm-purple);
    font-size: 14px;
    font-weight: 800;
}

.openkm-feature-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
}

.openkm-feature-card {
    text-align: center;
    padding: 24px 14px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.openkm-feature-card span {
    margin-bottom: 16px;
    border-radius: 999px;
}

.openkm-feature-card h3 {
    font-size: 16px;
}

.openkm-feature-card p {
    font-size: 12px;
}

.openkm-metrics-wrap {
    padding-bottom: 40px;
}

.openkm-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
    padding: 34px;
    border-radius: 30px;
    background: linear-gradient(90deg, rgba(243, 232, 255, 0.72) 0%, rgba(238, 242, 255, 0.55) 54%, rgba(243, 232, 255, 0.72) 100%);
    border: 1px solid rgba(196, 181, 253, 0.4);
}

.openkm-metric strong {
    display: block;
    color: var(--openkm-purple);
    font-size: 44px;
    line-height: 1;
    font-weight: 900;
}

.openkm-metric:nth-child(3) strong {
    color: #0f172a;
    font-size: 28px;
}

.openkm-metric span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

.openkm-metric-note {
    position: relative;
    min-height: 84px;
}

.openkm-dot-map {
    width: 100%;
    height: 84px;
    border-radius: 16px;
    opacity: 0.42;
    background-image: radial-gradient(#7c3aed 1.2px, transparent 1.2px);
    background-size: 16px 16px;
}

.openkm-metric-note em {
    position: absolute;
    right: 8px;
    bottom: -10px;
    color: var(--openkm-purple);
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    font-style: italic;
    font-weight: 700;
    transform: rotate(-6deg);
}

.openkm-cta-wrap {
    padding-bottom: 76px;
}

.openkm-cta {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 36px 40px;
    background: linear-gradient(135deg, #2b1055 0%, #4c1d95 48%, #312e81 100%);
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(76, 29, 149, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.openkm-cta:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 12px 12px;
}

.openkm-cta-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.openkm-cta-icon {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e9d5ff;
}

.openkm-cta h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    margin-bottom: 8px;
}

.openkm-cta p {
     font-size: 15px;
}

@media (max-width: 991px) {
    .openkm-hero-grid,
    .openkm-pillars-grid,
    .openkm-solutions-grid,
    .openkm-feature-grid,
    .openkm-metrics,
    .openkm-cta {
        grid-template-columns: 1fr;
        display: grid;
    }

    .openkm-cta {
        align-items: start;
    }

    .openkm-feature-card {
        text-align: left;
    }

    .openkm-feature-card span {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .openkm-shell {
        width: min(100% - 20px, 1180px);
    }

    .openkm-hero {
        padding-bottom: 48px;
    }

    .openkm-solution-card,
    .openkm-feature-card,
    .openkm-metrics,
    .openkm-cta {
        padding: 20px;
        border-radius: 22px;
    }

    .openkm-brand {
        align-items: flex-start;
    }

    .openkm-brand h2 {
        font-size: 28px;
    }

    .openkm-copy h1 {
        font-size: 40px;
    }

    .openkm-lead {
        font-size: 15px;
    }

    .openkm-note {
        position: static;
        transform: none;
        margin-bottom: 14px;
        font-size: 22px;
    }

    .openkm-screen-bar,
    .openkm-screen-body,
    .openkm-cta-copy {
        grid-template-columns: 1fr;
        display: grid;
    }

    .openkm-screen-user,
    .openkm-cta-copy {
        align-items: flex-start;
    }

    .openkm-directory {
        border-right: 0;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }

    .openkm-badge-stack {
        display: none;
    }

    .openkm-pillars-grid,
    .openkm-feature-grid,
    .openkm-metrics {
        grid-template-columns: 1fr;
    }

    .openkm-pillar {
        align-items: flex-start;
    }

    .openkm-metric strong {
        font-size: 34px;
    }

    .openkm-metric:nth-child(3) strong {
        font-size: 24px;
    }
}

.ocs-page {
    --ocs-purple: #5b2a8c;
    --ocs-purple-dark: #431969;
    --ocs-purple-soft: #f6f2fc;
    --ocs-navy: #0b132b;
    --ocs-navy-dark: #080d1e;
    --ocs-ink: #1e293b;
    --ocs-muted: #64748b;
    --ocs-border: rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at top left, rgba(91, 42, 140, 0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(196, 155, 102, 0.08), transparent 24%),
        linear-gradient(180deg, #fcfbff 0%, #ffffff 48%, #ffffff 100%);
    color: var(--ocs-ink);
    font-family: 'Montserrat', 'Manrope', sans-serif;
    overflow: hidden;
}

.ocs-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.ocs-breadcrumbs {
    padding: 34px 0 12px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ocs-breadcrumbs a {
    color: var(--ocs-purple);
}

.ocs-breadcrumbs span {
    margin: 0 8px;
}

.ocs-hero {
    padding: 20px 0 76px;
}

.ocs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
    gap: 42px;
    align-items: center;
}

.ocs-brand {
    margin-bottom: 22px;
}

.ocs-brand-mark {
    display: block;
    color: #0f172a;
    font-size: 54px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.ocs-brand p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ocs-copy h1,
.ocs-section-head h2,
.ocs-cta h2 {
    margin: 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.ocs-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(42px, 5vw, 58px);
    line-height: 1.08;
}

.ocs-copy h1 span {
    color: var(--ocs-purple);
}

.ocs-lead,
.ocs-pillar p,
.ocs-section-head p,
.ocs-service-card li,
.ocs-value p,
.ocs-impact-metrics span,
.ocs-cta p {
    margin: 0;
    color: var(--ocs-muted);
    line-height: 1.85;
}

.ocs-lead {
    max-width: 640px;
    font-size: 17px;
}

.ocs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.ocs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ocs-btn:hover,
.ocs-btn:focus {
    transform: translateY(-2px);
}

.ocs-btn-primary {
    background: linear-gradient(135deg, var(--ocs-purple) 0%, var(--ocs-purple-dark) 100%);
    box-shadow: 0 18px 34px rgba(91, 42, 140, 0.22);
}

.ocs-btn-secondary {
    background: transparent;
    color: #0f172a;
    padding-left: 4px;
    padding-right: 4px;
}

.ocs-btn-white {
    background: #ffffff;
    color: var(--ocs-purple);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.ocs-visual {
    position: relative;
}

.ocs-note {
    position: absolute;
    top: -12px;
    right: 12px;
    z-index: 2;
    color: var(--ocs-purple);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 30px;
    line-height: 0.96;
    font-weight: 700;
    text-align: right;
    transform: rotate(10deg);
    pointer-events: none;
}

.ocs-note span {
    display: block;
}

.ocs-laptop-wrap {
    position: relative;
    width: min(100%, 620px);
    margin: 0 auto;
    padding-top: 28px;
}

.ocs-laptop {
    overflow: hidden;
    border: 11px solid #1f2937;
    border-radius: 18px 18px 2px 2px;
    box-shadow: 0 25px 50px rgba(91, 42, 140, 0.16);
    background: var(--ocs-navy);
}

.ocs-screen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.ocs-screen-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ocs-purple);
}

.ocs-screen-brand-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--ocs-purple);
    display: inline-block;
}

.ocs-screen-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ocs-screen-nav .active {
    color: var(--ocs-purple);
}

.ocs-screen {
    position: relative;
    min-height: 316px;
    padding: 28px 28px 20px;
    background:
        linear-gradient(180deg, rgba(8, 13, 30, 0.32), rgba(8, 13, 30, 0.88)),
        linear-gradient(135deg, #2b3650 0%, #1a2540 40%, #0b132b 100%);
    color: #ffffff;
}

.ocs-screen-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 20%),
        radial-gradient(circle at 80% 0%, rgba(196, 155, 102, 0.24), transparent 22%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 55%);
}

.ocs-screen-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
}

.ocs-conference-head h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
}

.ocs-conference-head p {
    margin: 10px 0 0;
    color: #e9d5ff;
    font-size: 12px;
    font-weight: 600;
}

.ocs-search {
    max-width: 360px;
    margin: 18px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #ffffff;
    color: #94a3b8;
    font-size: 11px;
}

.ocs-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ocs-journey article {
    text-align: center;
}

.ocs-journey i {
    display: block;
    margin-bottom: 7px;
    color: #d8b4fe;
    font-size: 16px;
}

.ocs-journey span {
    display: block;
    color: #f8fafc;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.ocs-base {
    position: relative;
    height: 12px;
    background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 100%);
    border-radius: 0 0 16px 16px;
}

.ocs-base-notch {
    position: absolute;
    top: 0;
    left: 50%;
    width: 70px;
    height: 4px;
    background: #4b5563;
    border-radius: 0 0 5px 5px;
    transform: translateX(-50%);
}

.ocs-book-stack {
    position: absolute;
    right: -20px;
    bottom: 10px;
    z-index: 1;
    display: grid;
    gap: 6px;
    justify-items: end;
}

.ocs-book-stack span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: inset 3px 0 6px rgba(0, 0, 0, 0.35), -4px 6px 10px rgba(0, 0, 0, 0.15);
}

.ocs-book-stack .is-navy {
    width: 146px;
    background: #1c3553;
    color: #ffffff;
}

.ocs-book-stack .is-slate {
    width: 160px;
    background: #283845;
    color: #ffffff;
}

.ocs-book-stack .is-gold {
    width: 176px;
    background: #c49b66;
    color: #0f172a;
}

.ocs-book-stack .is-sand {
    width: 190px;
    background: #d9c5b2;
    color: #1f2937;
}

.ocs-pillars {
    padding: 26px 0;
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}

.ocs-pillars-grid,
.ocs-services-grid,
.ocs-values-grid,
.ocs-impact,
.ocs-impact-metrics {
    display: grid;
}

.ocs-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.ocs-pillar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ocs-pillar-icon,
.ocs-service-icon,
.ocs-value span,
.ocs-cta-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ocs-purple-soft);
    color: var(--ocs-purple);
    flex: 0 0 auto;
}

.ocs-pillar h3,
.ocs-service-card h3,
.ocs-value h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.ocs-pillar h3 {
    font-size: 20px;
}

.ocs-pillar p {
    font-size: 13px;
}

.ocs-section {
    padding: 78px 0;
}

.ocs-section-soft {
    background: rgba(248, 250, 252, 0.55);
}

.ocs-section-head {
    margin-bottom: 42px;
}

.ocs-section-head.centered {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.ocs-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--ocs-purple);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ocs-section-head h2 {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
    margin-bottom: 12px;
}

.ocs-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.ocs-service-card {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--ocs-border);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.ocs-service-card h3 {
    font-size: 24px;
    margin-top: 18px;
}

.ocs-service-card ul {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.ocs-service-card li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
}

.ocs-service-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ocs-purple);
}

.ocs-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--ocs-purple);
    font-size: 14px;
    font-weight: 800;
}

.ocs-values-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    text-align: center;
}

.ocs-value {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ocs-value span {
    margin-bottom: 14px;
    border-radius: 999px;
}

.ocs-value h3 {
    font-size: 16px;
}

.ocs-value p {
    max-width: 180px;
    font-size: 12px;
}

.ocs-impact-wrap {
    padding-bottom: 24px;
}

.ocs-impact {
    grid-template-columns: minmax(0, 0.62fr) minmax(280px, 0.38fr);
    gap: 34px;
    align-items: center;
    padding: 38px;
    border-radius: 30px;
    background: #f4effc;
    overflow: hidden;
}

.ocs-impact-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ocs-impact-metrics article:nth-child(2),
.ocs-impact-metrics article:nth-child(3) {
    padding-left: 24px;
    border-left: 1px solid rgba(91, 42, 140, 0.18);
}

.ocs-impact-metrics strong {
    display: block;
    color: var(--ocs-purple);
    font-size: 46px;
    line-height: 1;
    font-weight: 900;
}

.ocs-impact-metrics article:nth-child(3) strong {
    font-size: 36px;
}

.ocs-impact-metrics span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

.ocs-impact-map {
    position: relative;
    min-height: 180px;
}

.ocs-map-dots {
    width: 100%;
    height: 160px;
    opacity: 0.72;
    background-image: radial-gradient(rgba(147, 51, 234, 0.44) 2px, transparent 2px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 88%);
}

.ocs-map-script {
    position: absolute;
    right: 12px;
    bottom: 0;
    color: var(--ocs-purple);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    line-height: 0.95;
    text-align: right;
    transform: rotate(-6deg);
}

.ocs-cta-wrap {
    padding: 20px 0 80px;
}

.ocs-cta {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 36px 40px;
    background: linear-gradient(135deg, var(--ocs-purple) 0%, #4e2079 54%, #2e1065 100%);
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(91, 42, 140, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ocs-cta:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.12) 100%);
    background-size: 18px 18px, auto;
}

.ocs-cta-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.ocs-cta-icon {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ede9fe;
}

.ocs-cta h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    margin-bottom: 8px;
}

.ocs-cta p {
    font-size: 15px;
}

@media (max-width: 991px) {
    .ocs-hero-grid,
    .ocs-pillars-grid,
    .ocs-services-grid,
    .ocs-values-grid,
    .ocs-impact,
    .ocs-impact-metrics,
    .ocs-cta {
        grid-template-columns: 1fr;
        display: grid;
    }

    .ocs-cta {
        align-items: start;
    }

    .ocs-impact-metrics article:nth-child(2),
    .ocs-impact-metrics article:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .ocs-shell {
        width: min(100% - 20px, 1180px);
    }

    .ocs-hero {
        padding-bottom: 48px;
    }

    .ocs-service-card,
    .ocs-impact,
    .ocs-cta {
        padding: 20px;
        border-radius: 22px;
    }

    .ocs-brand-mark {
        font-size: 42px;
    }

    .ocs-brand p {
        font-size: 11px;
    }

    .ocs-copy h1 {
        font-size: 38px;
    }

    .ocs-lead {
        font-size: 15px;
    }

    .ocs-note {
        position: static;
        transform: none;
        margin-bottom: 14px;
        text-align: left;
        font-size: 22px;
    }

    .ocs-screen-bar,
    .ocs-screen-nav,
    .ocs-journey,
    .ocs-cta-copy {
        grid-template-columns: 1fr;
        display: grid;
    }

    .ocs-screen-bar {
        justify-items: start;
    }

    .ocs-screen {
        min-height: 0;
        padding: 20px 18px;
    }

    .ocs-conference-head h3 {
        font-size: 20px;
    }

    .ocs-search {
        max-width: none;
    }

    .ocs-book-stack {
        display: none;
    }

    .ocs-values-grid,
    .ocs-impact-metrics {
        grid-template-columns: 1fr;
    }

    .ocs-impact-metrics strong {
        font-size: 36px;
    }

    .ocs-impact-metrics article:nth-child(3) strong,
    .ocs-map-script {
        font-size: 24px;
    }
}

.orcid-page {
    --orcid-green: #74a726;
    --orcid-bright: #84c225;
    --orcid-soft: #edf7e7;
    --orcid-mint: #ebf4e5;
    --orcid-navy: #0a122a;
    --orcid-dark: #123d32;
    --orcid-ink: #1e293b;
    --orcid-muted: #64748b;
    --orcid-border: rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at 75% 20%, #f0fae8 0%, transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #fcfefb 48%, #ffffff 100%);
    color: var(--orcid-ink);
    font-family: 'Montserrat', 'Manrope', sans-serif;
    overflow: hidden;
}

.orcid-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.orcid-breadcrumbs {
    padding: 34px 0 12px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.orcid-breadcrumbs a {
    color: var(--orcid-green);
}

.orcid-breadcrumbs span {
    margin: 0 8px;
}

.orcid-hero {
    padding: 14px 0 76px;
}

.orcid-hero-grid,
.orcid-metrics {
    display: grid;
    gap: 40px;
    align-items: center;
}

.orcid-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
}

.orcid-brand {
    margin-bottom: 22px;
}

.orcid-wordmark {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.orcid-wordmark span,
.orcid-wordmark strong {
    font-size: clamp(42px, 5vw, 58px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.orcid-wordmark span {
    color: #64748b;
}

.orcid-wordmark strong {
    color: var(--orcid-bright);
}

.orcid-wordmark em {
    margin-left: 6px;
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    vertical-align: top;
}

.orcid-brand p {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.orcid-copy h1,
.orcid-section-head h2,
.orcid-cta h2 {
    margin: 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.orcid-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(42px, 5vw, 58px);
    line-height: 1.08;
}

.orcid-copy h1 span {
    display: block;
    color: var(--orcid-bright);
}

.orcid-lead,
.orcid-audience-card p,
.orcid-section-head p,
.orcid-benefit-card p,
.orcid-solution p,
.orcid-metric-list span,
.orcid-cta p {
    margin: 0;
    color: var(--orcid-muted);
    line-height: 1.85;
}

.orcid-lead {
    max-width: 640px;
    font-size: 16px;
}

.orcid-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.orcid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.orcid-btn:hover,
.orcid-btn:focus {
    transform: translateY(-2px);
}

.orcid-btn-primary {
    background: linear-gradient(135deg, var(--orcid-bright) 0%, var(--orcid-green) 100%);
    box-shadow: 0 18px 34px rgba(132, 194, 37, 0.24);
}

.orcid-btn-secondary {
    background: transparent;
    color: #0f172a;
    padding-left: 4px;
    padding-right: 4px;
}

.orcid-btn-white {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.orcid-visual {
    position: relative;
    min-height: 560px;
}

.orcid-orb {
    position: absolute;
    top: 28px;
    right: -10px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: rgba(163, 230, 53, 0.34);
    filter: blur(44px);
    z-index: 0;
}

.orcid-photo-card {
    position: relative;
    z-index: 1;
    margin-left: auto;
    width: min(100%, 540px);
}

.orcid-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 32px;
    border: 4px solid #ffffff;
    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.16);
    background: linear-gradient(135deg, #f1f5f9 0%, #f7fee7 100%);
}

.orcid-photo-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.95), transparent 28%),
        linear-gradient(135deg, rgba(203, 213, 225, 0.55), rgba(190, 242, 100, 0.28));
}

.orcid-person {
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 220px;
    transform: translateX(-50%);
}

.orcid-person-head {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8d9c0 0%, #e8b98f 100%);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.06);
    position: relative;
}

.orcid-person-head:before,
.orcid-person-head:after {
    content: "";
    position: absolute;
    top: 34px;
    width: 24px;
    height: 24px;
    border: 3px solid #475569;
    border-radius: 999px;
}

.orcid-person-head:before {
    left: 13px;
}

.orcid-person-head:after {
    right: 13px;
}

.orcid-person-body {
    width: 220px;
    height: 180px;
    margin-top: -6px;
    border-radius: 120px 120px 26px 26px;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
}

.orcid-globe {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    border: 4px solid rgba(163, 230, 53, 0.35);
    background: rgba(16, 185, 129, 0.08);
    color: rgba(132, 194, 37, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.orcid-globe i {
    font-size: 64px;
}

.orcid-profile-card {
    position: absolute;
    left: -10px;
    bottom: -30px;
    z-index: 2;
    width: min(82%, 350px);
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
}

.orcid-profile-head {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
}

.orcid-mini-id {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--orcid-bright);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
}

.orcid-profile-head strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.orcid-profile-head span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.5;
}

.orcid-profile-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.orcid-profile-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.orcid-profile-list i {
    width: 16px;
    text-align: center;
    color: #94a3b8;
}

.orcid-badge-stack {
    position: absolute;
    right: -10px;
    top: 10px;
    z-index: 2;
    display: grid;
    gap: 10px;
}

.orcid-badge-stack article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.orcid-badge-stack article span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: var(--orcid-green);
    flex: 0 0 auto;
}

.orcid-badge-stack strong,
.orcid-badge-stack em {
    display: block;
    line-height: 1.1;
}

.orcid-badge-stack strong {
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
}

.orcid-badge-stack em {
    color: #64748b;
    font-size: 9px;
    font-style: normal;
}

.orcid-note {
    position: absolute;
    right: 0;
    bottom: -48px;
    z-index: 2;
    color: #166534;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 32px;
    line-height: 0.95;
    font-weight: 700;
    transform: rotate(-6deg);
    text-align: right;
}

.orcid-note span {
    display: block;
}

.orcid-note span:last-child {
    margin-left: 18px;
    color: var(--orcid-bright);
}

.orcid-audience {
    padding: 54px 0 16px;
    border-bottom: 1px solid #eef2f7;
}

.orcid-audience-grid,
.orcid-benefits-grid,
.orcid-solutions-grid,
.orcid-metric-list {
    display: grid;
}

.orcid-audience-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.orcid-audience-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(248, 250, 252, 0.7);
    border: 1px solid rgba(226, 232, 240, 0.86);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.orcid-audience-icon,
.orcid-benefit-icon,
.orcid-solution span,
.orcid-cta-icon {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--orcid-soft);
    color: var(--orcid-green);
    flex: 0 0 auto;
}

.orcid-audience-card h3,
.orcid-benefit-card h3,
.orcid-solution h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.orcid-audience-card h3 {
    font-size: 16px;
}

.orcid-audience-card p {
    font-size: 12px;
}

.orcid-section {
    padding: 76px 0;
}

.orcid-section-soft {
    background: rgba(248, 250, 252, 0.52);
}

.orcid-section-head {
    margin-bottom: 42px;
}

.orcid-section-head.centered {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.orcid-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--orcid-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.orcid-section-head h2 {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
    margin-bottom: 12px;
}

.orcid-benefits-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.orcid-benefit-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.orcid-benefit-card:hover,
.orcid-benefit-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.1);
}

.orcid-benefit-card h3 {
    margin-top: 20px;
    font-size: 24px;
    line-height: 1.12;
}

.orcid-benefit-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.orcid-solutions-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

.orcid-solution {
    text-align: center;
    padding: 10px 8px;
}

.orcid-solution span {
    margin-bottom: 14px;
}

.orcid-solution h3 {
    font-size: 16px;
}

.orcid-solution p {
    font-size: 12px;
}

.orcid-metrics-wrap {
    padding-bottom: 24px;
}

.orcid-metrics {
    grid-template-columns: minmax(0, 0.6fr) minmax(280px, 0.4fr);
    padding: 38px;
    border-radius: 30px;
    background: rgba(235, 244, 229, 0.7);
    border: 1px solid rgba(190, 242, 100, 0.28);
}

.orcid-metric-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.orcid-metric-list strong {
    display: block;
    color: #0f172a;
    font-size: 40px;
    line-height: 1.02;
    font-weight: 900;
}

.orcid-metric-list article:nth-child(3) strong {
    font-size: 26px;
}

.orcid-metric-list span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

.orcid-map-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 190px;
}

.orcid-map-shape {
    width: min(100%, 320px);
    height: 140px;
    opacity: 0.72;
    background:
        radial-gradient(circle at 20% 38%, rgba(22, 163, 74, 0.18) 0 42px, transparent 43px),
        radial-gradient(circle at 32% 62%, rgba(22, 163, 74, 0.18) 0 26px, transparent 27px),
        radial-gradient(circle at 52% 30%, rgba(22, 163, 74, 0.18) 0 24px, transparent 25px),
        radial-gradient(circle at 54% 62%, rgba(22, 163, 74, 0.18) 0 36px, transparent 37px),
        radial-gradient(circle at 76% 34%, rgba(22, 163, 74, 0.18) 0 46px, transparent 47px),
        radial-gradient(circle at 84% 78%, rgba(22, 163, 74, 0.18) 0 24px, transparent 25px);
}

.orcid-map-note {
    margin-top: 6px;
    transform: rotate(-6deg);
    text-align: center;
}

.orcid-map-note span,
.orcid-map-note strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    line-height: 0.95;
}

.orcid-map-note span {
    color: #166534;
    font-size: 30px;
}

.orcid-map-note strong {
    color: var(--orcid-bright);
    font-size: 38px;
}

.orcid-cta-wrap {
    padding: 20px 0 80px;
}

.orcid-cta {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 34px 40px;
    background: linear-gradient(135deg, #0f332b 0%, var(--orcid-dark) 48%, #0a2e26 100%);
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(18, 61, 50, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.orcid-cta:before {
    content: "";
    position: absolute;
    left: -40px;
    top: -40px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    filter: blur(22px);
}

.orcid-cta-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.orcid-cta-icon {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--orcid-bright);
}

.orcid-cta h2 {
    color: #ffffff;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    margin-bottom: 8px;
}

.orcid-cta p {
    color: rgba(236, 253, 245, 0.84);
    font-size: 15px;
}

@media (max-width: 991px) {
    .orcid-hero-grid,
    .orcid-audience-grid,
    .orcid-benefits-grid,
    .orcid-solutions-grid,
    .orcid-metrics,
    .orcid-metric-list,
    .orcid-cta {
        grid-template-columns: 1fr;
        display: grid;
    }

    .orcid-cta {
        align-items: start;
    }

    .orcid-solutions-grid {
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .orcid-shell {
        width: min(100% - 20px, 1180px);
    }

    .orcid-hero {
        padding-bottom: 54px;
    }

    .orcid-visual {
        min-height: 0;
    }

    .orcid-photo,
    .orcid-profile-card,
    .orcid-audience-card,
    .orcid-benefit-card,
    .orcid-metrics,
    .orcid-cta {
        border-radius: 22px;
    }

    .orcid-benefit-card,
    .orcid-metrics,
    .orcid-cta {
        padding: 20px;
    }

    .orcid-wordmark span,
    .orcid-wordmark strong {
        font-size: 40px;
    }

    .orcid-copy h1 {
        font-size: 40px;
    }

    .orcid-lead {
        font-size: 15px;
    }

    .orcid-photo-card {
        margin: 0;
    }

    .orcid-globe,
    .orcid-badge-stack {
        display: none;
    }

    .orcid-profile-card,
    .orcid-note {
        position: static;
        width: 100%;
        margin-top: 16px;
        transform: none;
        text-align: left;
    }

    .orcid-note {
        font-size: 22px;
    }

    .orcid-note span:last-child {
        margin-left: 0;
        font-size: 24px;
    }

    .orcid-profile-head,
    .orcid-cta-copy {
        align-items: flex-start;
    }

    .orcid-solution {
        text-align: left;
    }

    .orcid-solution span {
        margin-bottom: 10px;
    }

    .orcid-metric-list strong {
        font-size: 34px;
    }

    .orcid-metric-list article:nth-child(3) strong,
    .orcid-map-note strong {
        font-size: 24px;
    }

    .orcid-map-note span {
        font-size: 22px;
    }
}

.blacklight-page {
    --blacklight-indigo: #4f46e5;
    --blacklight-indigo-dark: #1e1b4b;
    --blacklight-indigo-soft: #ede9fe;
    --blacklight-navy: #090d16;
    --blacklight-ink: #1e293b;
    --blacklight-muted: #64748b;
    --blacklight-border: rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.1), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, rgba(238, 242, 255, 0.28) 38%, #ffffff 100%);
    color: var(--blacklight-ink);
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
    overflow: hidden;
}

.blacklight-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.blacklight-breadcrumbs {
    padding: 34px 0 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blacklight-breadcrumbs a {
    color: var(--blacklight-indigo);
}

.blacklight-breadcrumbs span {
    margin: 0 8px;
}

.blacklight-hero {
    padding: 20px 0 76px;
}

.blacklight-hero-grid,
.blacklight-metrics {
    display: grid;
    gap: 40px;
    align-items: center;
}

.blacklight-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
}

.blacklight-brand {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.blacklight-brand-icon {
    width: 44px;
    height: 44px;
    color: var(--blacklight-indigo-dark);
    flex: 0 0 auto;
}

.blacklight-brand-icon svg {
    width: 100%;
    height: 100%;
}

.blacklight-brand h2 {
    margin: 0;
    color: #0f172a;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.blacklight-brand p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.blacklight-copy h1,
.blacklight-section-head h2,
.blacklight-cta h2 {
    margin: 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.blacklight-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1.1;
}

.blacklight-copy h1 span {
    color: var(--blacklight-indigo);
}

.blacklight-lead,
.blacklight-pillar p,
.blacklight-section-head p,
.blacklight-feature-card p,
.blacklight-benefit p,
.blacklight-metric-list span,
.blacklight-cta p {
    margin: 0;
    color: var(--blacklight-muted);
    line-height: 1.85;
}

.blacklight-lead {
    max-width: 640px;
    font-size: 16px;
}

.blacklight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.blacklight-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.blacklight-btn:hover,
.blacklight-btn:focus {
    transform: translateY(-2px);
}

.blacklight-btn-primary {
    background: linear-gradient(135deg, var(--blacklight-indigo) 0%, #4338ca 100%);
    box-shadow: 0 18px 34px rgba(79, 70, 229, 0.22);
}

.blacklight-btn-secondary {
    background: transparent;
    color: var(--blacklight-indigo);
    padding-left: 4px;
    padding-right: 4px;
}

.blacklight-btn-white {
    background: #ffffff;
    color: var(--blacklight-indigo-dark);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.blacklight-visual {
    position: relative;
}

.blacklight-note {
    position: absolute;
    top: -16px;
    right: 10px;
    z-index: 2;
    color: var(--blacklight-indigo);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 31px;
    line-height: 0.95;
    font-weight: 700;
    text-align: center;
    transform: rotate(-6deg);
    pointer-events: none;
}

.blacklight-note span {
    display: block;
}

.blacklight-laptop-wrap {
    position: relative;
    width: min(100%, 620px);
    margin: 0 auto;
    padding-top: 24px;
}

.blacklight-laptop {
    position: relative;
    z-index: 1;
    padding: 11px;
    border: 4px solid #1f2937;
    border-radius: 22px 22px 0 0;
    background: var(--blacklight-navy);
    box-shadow: 0 28px 58px rgba(15, 23, 42, 0.22);
}

.blacklight-camera {
    width: 8px;
    height: 8px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: #334155;
}

.blacklight-screen {
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.blacklight-screen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
}

.blacklight-screen-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
}

.blacklight-screen-mark span {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--blacklight-indigo);
    display: inline-block;
}

.blacklight-screen-mark strong {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.blacklight-screen-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.blacklight-screen-nav .active {
    color: var(--blacklight-indigo);
}

.blacklight-screen-body {
    padding: 26px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.62) 0%, #ffffff 100%);
}

.blacklight-screen-body h3 {
    margin: 0 0 16px;
    color: #1e293b;
    font-size: 21px;
    font-weight: 800;
}

.blacklight-search {
    max-width: 420px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 6px 18px rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    font-size: 12px;
}

.blacklight-search i {
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blacklight-indigo);
}

.blacklight-categories {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.blacklight-categories article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.blacklight-categories i {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: var(--blacklight-indigo);
}

.blacklight-categories span {
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.blacklight-base {
    position: relative;
    z-index: 1;
    width: 108%;
    height: 14px;
    margin-left: -4%;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(90deg, #cbd5e1 0%, #e2e8f0 50%, #cbd5e1 100%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.blacklight-base-notch {
    width: 64px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: #94a3b8;
}

.blacklight-book-stack {
    position: absolute;
    right: -18px;
    bottom: 4px;
    z-index: 2;
    display: grid;
    gap: 6px;
    width: 180px;
}

.blacklight-book-stack span {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 8px 12px;
    border-left: 4px solid transparent;
    border-radius: 2px 6px 6px 2px;
    box-shadow: inset 4px 0 6px rgba(0, 0, 0, 0.15), inset -2px 0 3px rgba(255, 255, 255, 0.4), 0 3px 6px rgba(0, 0, 0, 0.12);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blacklight-book-stack .is-slate {
    background: #1f2937;
    border-left-color: var(--blacklight-indigo);
    color: #e2e8f0;
}

.blacklight-book-stack .is-gold {
    background: #c89d70;
    border-left-color: #8b5e34;
    color: #422006;
}

.blacklight-book-stack .is-rust {
    background: #b87d60;
    border-left-color: #7c2d12;
    color: #ffffff;
}

.blacklight-book-stack .is-sand {
    background: #d3b28c;
    border-left-color: #8c6b4b;
    color: #2f241b;
}

.blacklight-book-stack .is-stone {
    background: #9d938b;
    border-left-color: #475569;
    color: #111827;
}

.blacklight-pillars {
    padding: 36px 0;
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}

.blacklight-pillars-grid,
.blacklight-features-grid,
.blacklight-benefits-grid,
.blacklight-metric-list {
    display: grid;
}

.blacklight-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.blacklight-pillar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blacklight-pillar-icon,
.blacklight-benefit span,
.blacklight-cta-icon {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    border: 1px solid rgba(99, 102, 241, 0.12);
    color: var(--blacklight-indigo);
    flex: 0 0 auto;
}

.blacklight-pillar h3,
.blacklight-feature-card h3,
.blacklight-benefit h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.blacklight-pillar h3 {
    font-size: 18px;
}

.blacklight-pillar p {
    font-size: 13px;
}

.blacklight-section {
    padding: 78px 0;
}

.blacklight-section-soft {
    background: rgba(248, 250, 252, 0.55);
}

.blacklight-section-head {
    margin-bottom: 42px;
}

.blacklight-section-head.centered {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.blacklight-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--blacklight-indigo);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.blacklight-section-head h2 {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
    margin-bottom: 12px;
}

.blacklight-features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.blacklight-feature-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.blacklight-illus {
    height: 150px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: rgba(238, 242, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.blacklight-illus-search span {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
}

.blacklight-illus-search i {
    position: absolute;
    color: var(--blacklight-indigo);
    font-size: 40px;
}

.blacklight-illus-showcase {
    gap: 0;
}

.blacklight-illus-showcase span {
    position: absolute;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.blacklight-illus-showcase span:nth-child(1) {
    top: 34px;
    left: calc(50% - 62px);
    width: 50px;
    height: 58px;
    background: rgba(165, 180, 252, 0.48);
}

.blacklight-illus-showcase span:nth-child(2) {
    top: 46px;
    right: calc(50% - 64px);
    width: 66px;
    height: 46px;
    background: rgba(129, 140, 248, 0.35);
}

.blacklight-illus-showcase span:nth-child(3) {
    position: relative;
    width: 70px;
    height: 90px;
    background: var(--blacklight-indigo);
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.18);
}

.blacklight-illus-gears i {
    position: absolute;
    color: var(--blacklight-indigo);
}

.blacklight-illus-gears .gear-one {
    top: 34px;
    left: calc(50% - 14px);
    font-size: 54px;
}

.blacklight-illus-gears .gear-two {
    right: calc(50% - 40px);
    bottom: 34px;
    font-size: 44px;
    color: var(--blacklight-indigo-dark);
}

.blacklight-feature-card h3 {
    font-size: 24px;
}

.blacklight-feature-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--blacklight-indigo);
    font-size: 14px;
    font-weight: 800;
}

.blacklight-benefits-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    text-align: center;
}

.blacklight-benefit {
    padding: 12px 8px;
}

.blacklight-benefit span {
    margin-bottom: 14px;
}

.blacklight-benefit h3 {
    font-size: 16px;
}

.blacklight-benefit p {
    font-size: 12px;
}

.blacklight-metrics-wrap {
    padding-bottom: 24px;
}

.blacklight-metrics {
    grid-template-columns: minmax(0, 0.62fr) minmax(280px, 0.38fr);
    padding: 38px;
    border-radius: 28px;
    background: #f0edfd;
    border: 1px solid #e0e7ff;
}

.blacklight-metric-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blacklight-metric-list strong {
    display: block;
    color: var(--blacklight-indigo);
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}

.blacklight-metric-list article:nth-child(3) strong {
    color: #3730a3;
    font-size: 28px;
}

.blacklight-metric-list span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

.blacklight-map-panel {
    position: relative;
    min-height: 180px;
}

.blacklight-map-art {
    width: min(100%, 320px);
    height: 140px;
    margin-left: auto;
    opacity: 0.42;
    background:
        radial-gradient(circle at 20% 55%, rgba(79, 70, 229, 0.42) 0 30px, transparent 31px),
        radial-gradient(circle at 40% 48%, rgba(79, 70, 229, 0.42) 0 26px, transparent 27px),
        radial-gradient(circle at 70% 42%, rgba(79, 70, 229, 0.42) 0 38px, transparent 39px),
        radial-gradient(circle at 78% 68%, rgba(79, 70, 229, 0.42) 0 24px, transparent 25px);
}

.blacklight-map-note {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%) rotate(-3deg);
    text-align: right;
}

.blacklight-map-note span,
.blacklight-map-note strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    line-height: 0.95;
}

.blacklight-map-note span {
    color: var(--blacklight-indigo);
    font-size: 30px;
}

.blacklight-map-note strong {
    color: var(--blacklight-indigo-dark);
    font-size: 38px;
}

.blacklight-cta-wrap {
    padding: 20px 0 80px;
}

.blacklight-cta {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 34px 40px;
    background: linear-gradient(135deg, #2b0b75 0%, #3e1699 50%, #4f1db5 100%);
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(62, 22, 153, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.blacklight-cta:before {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.24);
    filter: blur(32px);
}

.blacklight-cta-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.blacklight-cta-icon {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.blacklight-cta h2 {
    color: #ffffff;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    margin-bottom: 8px;
}

.blacklight-cta p {
    color: rgba(224, 231, 255, 0.86);
    font-size: 15px;
}

@media (max-width: 991px) {
    .blacklight-hero-grid,
    .blacklight-pillars-grid,
    .blacklight-features-grid,
    .blacklight-benefits-grid,
    .blacklight-metrics,
    .blacklight-metric-list,
    .blacklight-cta {
        grid-template-columns: 1fr;
        display: grid;
    }

    .blacklight-cta {
        align-items: start;
    }

    .blacklight-benefit {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .blacklight-shell {
        width: min(100% - 20px, 1180px);
    }

    .blacklight-hero {
        padding-bottom: 54px;
    }

    .blacklight-note {
        position: static;
        transform: none;
        margin-bottom: 14px;
        text-align: left;
        font-size: 22px;
    }

    .blacklight-screen-bar,
    .blacklight-screen-nav,
    .blacklight-cta-copy {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .blacklight-screen-body,
    .blacklight-feature-card,
    .blacklight-metrics,
    .blacklight-cta {
        padding: 20px;
    }

    .blacklight-feature-card,
    .blacklight-metrics,
    .blacklight-cta {
        border-radius: 22px;
    }

    .blacklight-brand h2 {
        font-size: 28px;
    }

    .blacklight-copy h1 {
        font-size: 38px;
    }

    .blacklight-lead {
        font-size: 15px;
    }

    .blacklight-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blacklight-book-stack {
        display: none;
    }

    .blacklight-metric-list strong {
        font-size: 34px;
    }

    .blacklight-metric-list article:nth-child(3) strong,
    .blacklight-map-note strong {
        font-size: 24px;
    }

    .blacklight-map-note span {
        font-size: 22px;
    }
}

.vufind-page {
    --vufind-purple: #522785;
    --vufind-purple-dark: #3b1666;
    --vufind-purple-light: #7337b8;
    --vufind-purple-soft: #f5f0fb;
    --vufind-green: #22c55e;
    --vufind-navy: #0b1120;
    --vufind-navy-card: #111827;
    --vufind-ink: #1f2937;
    --vufind-muted: #64748b;
    --vufind-border: rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at top right, rgba(115, 55, 184, 0.08), transparent 24%),
        linear-gradient(180deg, #fafbff 0%, #ffffff 45%, #fafbff 100%);
    color: var(--vufind-ink);
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
}

.ship-page {
    --ship-primary: #4f2bd6;
    --ship-primary-dark: #311496;
    --ship-primary-soft: #f4f1ff;
    --ship-primary-glow: rgba(79, 43, 214, 0.16);
    --ship-indigo-soft: #eef2ff;
    --ship-ink: #0f172a;
    --ship-muted: #64748b;
    --ship-border: rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at 75% 14%, rgba(99, 102, 241, 0.14), transparent 20%),
        radial-gradient(circle at 15% 6%, rgba(168, 85, 247, 0.08), transparent 24%),
        linear-gradient(180deg, #fbfbff 0%, #ffffff 48%, #f8fafc 100%);
    color: var(--ship-ink);
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
}

.ship-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.ship-breadcrumbs {
    padding: 34px 0 16px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ship-breadcrumbs a {
    color: var(--ship-primary);
}

.ship-breadcrumbs span {
    display: inline-block;
    margin: 0 8px;
}

.ship-hero {
    position: relative;
    padding: 14px 0 68px;
}

.ship-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--ship-primary) 0.75px, transparent 0.75px);
    background-size: 24px 24px;
    opacity: 0.08;
    pointer-events: none;
}

.ship-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 620px);
    gap: 52px;
    align-items: center;
}

.ship-copy {
    max-width: 540px;
}

.ship-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.ship-logo-badge {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 18px 30px rgba(239, 68, 68, 0.2);
}

.ship-brand h1 {
    margin: 0;
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 800;
    color: var(--ship-ink);
    line-height: 1;
}

.ship-brand p {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

.ship-copy h2 {
    margin: 0;
    font-size: clamp(44px, 2vw, 72px);
    line-height: 0.95;
    font-weight: 800;
    color: #111827;
}

.ship-copy h2 span {
    display: block;
    color: var(--ship-primary);
}

.ship-lead {
    margin: 28px 0 0;
    max-width: 520px;
    font-size: 21px;
    line-height: 1.7;
    color: #475569;
}

.ship-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
}

.ship-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ship-btn:hover {
    transform: translateY(-2px);
}

.ship-btn-primary {
    background: linear-gradient(135deg, #5b31f4 0%, #4f2bd6 100%);
    box-shadow: 0 18px 34px rgba(79, 43, 214, 0.26);
}

.ship-btn-secondary {
    color: var(--ship-primary);
}

.ship-visual {
    position: relative;
    min-height: 430px;
}

.ship-orbit {
    position: absolute;
    top: 24px;
    right: 14px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(99, 102, 241, 0.16);
    background: radial-gradient(circle at 30% 30%, rgba(224, 231, 255, 0.8), rgba(255, 255, 255, 0.08) 62%, transparent 70%);
}

.ship-orbit::before {
    content: '';
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    border: 1px dashed rgba(99, 102, 241, 0.2);
}

.ship-laptop {
    position: absolute;
    left: 0;
    right: 74px;
    top: 44px;
    z-index: 2;
    background: #111827;
    border-radius: 22px 22px 8px 8px;
    padding: 10px;
    box-shadow: 0 38px 60px rgba(15, 23, 42, 0.22);
}

.ship-laptop-top {
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
}

.ship-camera {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #334155;
}

.ship-screen {
    background: #f8fafc;
    min-height: 294px;
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 12px;
    padding: 40px 28px 32px;
}

.ship-login-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ship-login-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--ship-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.ship-login-card h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #1e293b;
}

.ship-login-card p {
    margin: 10px 0 18px;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
}

.ship-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #5b31f4 0%, #4f2bd6 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 26px rgba(79, 43, 214, 0.24);
}

.ship-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #22c55e;
}

.ship-laptop-base {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 280px;
    height: 10px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
}

.ship-badges {
    position: absolute;
    top: 68px;
    right: 0;
    z-index: 3;
    display: grid;
    gap: 10px;
}

.ship-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 14px 30px rgba(148, 163, 184, 0.2);
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.ship-badge span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--ship-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ship-note {
    position: absolute;
    right: 30px;
    bottom: -6px;
    z-index: 3;
    display: grid;
    gap: 4px;
    font-family: 'Caveat', cursive;
    font-size: 42px;
    line-height: 0.88;
    font-weight: 700;
    color: var(--ship-primary-dark);
    transform: rotate(-6deg);
}

.ship-features {
    position: relative;
    z-index: 4;
    margin-top: -4px;
    padding-bottom: 14px;
}

.ship-feature-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 24px;
    box-shadow: 0 24px 46px rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.ship-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 24px;
    border-right: 1px solid rgba(226, 232, 240, 0.9);
}

.ship-feature:last-child {
    border-right: 0;
}

.ship-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f5f3ff;
    color: var(--ship-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 auto;
}

.ship-feature h3,
.ship-card h3,
.ship-benefit h3 {
    margin: 0;
    color: #0f172a;
    font-weight: 800;
}

.ship-feature h3 {
    font-size: 16px;
}

.ship-feature p,
.ship-card p,
.ship-benefit p {
    margin: 8px 0 0;
    color: #64748b;
    line-height: 1.65;
}

.ship-feature p {
    font-size: 13px;
}

.ship-section {
    padding: 72px 0;
}

.ship-section-soft {
    background: rgba(248, 250, 252, 0.6);
}

.ship-section-head {
    max-width: 720px;
    margin: 0 auto 46px;
    text-align: center;
}

.ship-section-head span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--ship-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ship-section-head h2 {
    margin: 0;
    font-size: clamp(34px, 5vw, 46px);
    line-height: 1.06;
    color: #0f172a;
    font-weight: 800;
}

.ship-section-head p {
    margin: 14px auto 0;
    max-width: 640px;
    font-size: 17px;
    line-height: 1.75;
    color: #64748b;
}

.ship-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.ship-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(148, 163, 184, 0.08);
}

.ship-card-icon,
.ship-benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #f5f3ff;
    color: var(--ship-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 20px;
}

.ship-card h3 {
    font-size: 23px;
    line-height: 1.14;
}

.ship-card p {
    font-size: 15px;
}

.ship-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    color: var(--ship-primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.ship-benefits-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.ship-benefit {
    text-align: center;
}

.ship-benefit-icon {
    margin: 0 auto 18px;
}

.ship-benefit h3 {
    font-size: 17px;
    line-height: 1.22;
}

.ship-benefit p {
    font-size: 14px;
}

.ship-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: center;
    padding: 36px 38px;
    border-radius: 32px;
    background: linear-gradient(90deg, rgba(245, 243, 255, 0.9) 0%, rgba(238, 242, 255, 0.72) 50%, rgba(245, 243, 255, 0.9) 100%);
    border: 1px solid rgba(199, 210, 254, 0.55);
}

.ship-metric strong {
    display: block;
    color: var(--ship-primary);
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1;
    font-weight: 800;
}

.ship-metric-wide strong {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.08;
}

.ship-metric span {
    display: block;
    margin-top: 6px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
}

.ship-map {
    position: relative;
    min-height: 120px;
    overflow: hidden;
}

.ship-map-dots {
    position: absolute;
    inset: 18px 10px;
    border-radius: 18px;
    background-image: radial-gradient(rgba(79, 43, 214, 0.42) 1.1px, transparent 1.1px);
    background-size: 11px 11px;
    opacity: 0.62;
}

.ship-map::before {
    content: '';
    position: absolute;
    inset: 32px 24px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 12% 46%, rgba(79, 43, 214, 0.18) 0 8px, transparent 9px),
        radial-gradient(circle at 24% 55%, rgba(79, 43, 214, 0.24) 0 10px, transparent 11px),
        radial-gradient(circle at 40% 42%, rgba(79, 43, 214, 0.18) 0 12px, transparent 13px),
        radial-gradient(circle at 56% 38%, rgba(79, 43, 214, 0.24) 0 15px, transparent 16px),
        radial-gradient(circle at 69% 48%, rgba(79, 43, 214, 0.18) 0 11px, transparent 12px),
        radial-gradient(circle at 85% 44%, rgba(79, 43, 214, 0.24) 0 18px, transparent 19px),
        radial-gradient(circle at 78% 68%, rgba(79, 43, 214, 0.18) 0 10px, transparent 11px);
    opacity: 0.45;
}

.ship-map-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 34px;
    line-height: 0.92;
    font-weight: 700;
    color: var(--ship-primary-dark);
    transform: rotate(-5deg);
}

.ship-section-cta {
    padding-top: 30px;
    padding-bottom: 82px;
}

.ship-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 34px 38px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(135deg, #230b73 0%, #4f2bd6 55%, #3730a3 100%);
    background-size: 16px 16px, auto;
    box-shadow: 0 28px 50px rgba(49, 20, 150, 0.28);
}

.ship-cta-copy {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ship-cta-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex: 0 0 auto;
}

.ship-cta h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    font-weight: 800;
}

.ship-cta p {
    margin: 8px 0 0;
    font-size: 15px;
}

.ship-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .ship-hero-grid,
    .ship-capability-grid,
    .ship-benefits-grid,
    .ship-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ship-feature-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ship-feature:nth-child(2),
    .ship-feature:nth-child(4) {
        border-right: 0;
    }

    .ship-feature:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    }

    .ship-laptop {
        right: 32px;
    }
}

@media (max-width: 991px) {
    .ship-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ship-copy,
    .ship-section-head {
        max-width: none;
    }

    .ship-copy {
        text-align: center;
    }

    .ship-brand,
    .ship-actions {
        justify-content: center;
    }

    .ship-visual {
        min-height: 500px;
        max-width: 660px;
        margin: 0 auto;
    }

    .ship-laptop {
        left: 16px;
        right: 70px;
    }

    .ship-section {
        padding: 58px 0;
    }

    .ship-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .ship-cta-copy {
        flex-direction: column;
    }

    .ship-cta-link {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .ship-shell {
        width: min(100% - 24px, 100%);
    }

    .ship-breadcrumbs {
        padding-top: 24px;
        font-size: 11px;
    }

    .ship-copy h2 {
        font-size: clamp(36px, 12vw, 54px);
    }

    .ship-lead,
    .ship-section-head p {
        font-size: 16px;
    }

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

    .ship-visual {
        min-height: 540px;
    }

    .ship-orbit {
        width: 280px;
        height: 280px;
        top: 10px;
        right: 0;
    }

    .ship-laptop {
        left: 0;
        right: 0;
        top: 56px;
        padding: 8px;
    }

    .ship-screen {
        min-height: 250px;
        padding: 30px 18px 24px;
    }

    .ship-login-card h3 {
        font-size: 22px;
    }

    .ship-signin {
        width: 100%;
        font-size: 12px;
    }

    .ship-badges {
        position: static;
        margin-top: 322px;
    }

    .ship-badge {
        font-size: 11px;
    }

    .ship-note {
        right: 8px;
        bottom: 8px;
        font-size: 32px;
    }

    .ship-feature-bar,
    .ship-capability-grid,
    .ship-benefits-grid,
    .ship-metrics {
        grid-template-columns: 1fr;
    }

    .ship-feature {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    }

    .ship-feature:last-child {
        border-bottom: 0;
    }

    .ship-card {
        padding: 24px 20px;
    }

    .ship-benefit {
        max-width: 320px;
        margin: 0 auto;
    }

    .ship-metrics {
        padding: 28px 22px;
    }

    .ship-map {
        min-height: 150px;
    }

    .ship-map-note {
        font-size: 28px;
    }

    .ship-cta {
        padding: 28px 22px;
    }
}

.vufind-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}
.prod-shell {
  width: min(1180px, calc(100% - 32px));
    margin: 10px auto 0 ;
}
.vufind-breadcrumbs {
    padding: 34px 0 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vufind-breadcrumbs a {
    color: var(--vufind-purple);
}

.vufind-breadcrumbs span {
    margin: 0 8px;
}

.vufind-hero {
    padding: 20px 0 76px;
}

.vufind-hero-grid,
.vufind-metrics {
    display: grid;
    gap: 42px;
    align-items: center;
}

.vufind-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.98fr);
}

.vufind-brand {
    margin-bottom: 22px;
}

.vufind-wordmark {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    color: #1f2937;
    font-size: clamp(42px, 5vw, 58px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vufind-wordmark strong {
    color: var(--vufind-green);
}

.vufind-wordmark i {
    position: absolute;
    top: -10px;
    left: 54px;
    color: var(--vufind-green);
    font-size: 18px;
}

.vufind-brand p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vufind-copy h1,
.vufind-section-head h2,
.vufind-cta h2 {
    margin: 0;
    color: #111827;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.vufind-copy h1 {
    margin-bottom: 18px;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.1;
}

.vufind-copy h1 span {
    display: block;
    background: linear-gradient(90deg, var(--vufind-purple) 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vufind-lead,
.vufind-pillar p,
.vufind-section-head p,
.vufind-solution-card p,
.vufind-benefit p,
.vufind-metric-list span,
.vufind-cta p {
    margin: 0;
    color: var(--vufind-muted);
    line-height: 1.85;
}

.vufind-lead {
    max-width: 640px;
    font-size: 17px;
}

.vufind-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.vufind-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.vufind-btn:hover,
.vufind-btn:focus {
    transform: translateY(-2px);
}

.vufind-btn-primary {
    background: linear-gradient(135deg, var(--vufind-purple) 0%, var(--vufind-purple-dark) 100%);
    box-shadow: 0 18px 34px rgba(82, 39, 133, 0.22);
}

.vufind-btn-secondary {
    background: transparent;
    color: var(--vufind-purple);
    padding-left: 4px;
    padding-right: 4px;
}

.vufind-btn-white {
    background: #ffffff;
    color: #000;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.vufind-visual {
    position: relative;
}

.vufind-note {
    position: absolute;
    top: -14px;
    right: 18px;
    z-index: 2;
    text-align: right;
    color: var(--vufind-purple);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 30px;
    line-height: 0.96;
    font-weight: 700;
    transform: rotate(-4deg);
    pointer-events: none;
}

.vufind-note span {
    display: block;
}

.vufind-laptop-wrap {
    position: relative;
    width: min(100%, 620px);
    margin: 0 auto;
    padding-top: 24px;
    padding-right: 58px;
}

.vufind-laptop {
    position: relative;
    z-index: 1;
    padding: 11px;
    border: 4px solid #475569;
    border-radius: 22px 22px 0 0;
    background: var(--vufind-navy);
    box-shadow: 0 28px 58px rgba(0, 0, 0, 0.2);
}

.vufind-camera {
    width: 8px;
    height: 8px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: #475569;
}

.vufind-screen {
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.vufind-screen-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--vufind-navy);
    color: #ffffff;
    font-size: 10px;
}

.vufind-screen-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.vufind-screen-brand strong {
    color: #c084fc;
}

.vufind-screen-links {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 700;
}

.vufind-screen-links .active {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--vufind-purple);
    color: #ffffff;
}

.vufind-screen-hero {
    padding: 26px 22px;
    text-align: center;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.96) 0%, rgba(59, 22, 102, 0.96) 100%);
}

.vufind-screen-hero h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.vufind-search {
    max-width: 340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #94a3b8;
    font-size: 11px;
}

.vufind-search i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vufind-purple);
    color: #ffffff;
}

.vufind-categories {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 10px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.vufind-categories article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.vufind-categories i {
    color: var(--vufind-purple);
    font-size: 14px;
}

.vufind-categories span {
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.vufind-base {
    position: relative;
    height: 12px;
    max-width: 104%;
    margin-left: -2%;
    background: #cbd5e1;
    border-top: 1px solid #94a3b8;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.vufind-base-notch {
    width: 64px;
    height: 4px;
    margin: 0 auto;
    border-radius: 0 0 8px 8px;
    background: #94a3b8;
}

.vufind-book-stack {
    position: absolute;
    right: 0;
    bottom: 18px;
    z-index: 1;
    display: grid;
    gap: 6px;
    width: 162px;
}

.vufind-book-stack span {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vufind-book-stack .is-blue {
    background: #00527c;
    color: #ffffff;
}

.vufind-book-stack .is-light {
    background: #e3ded4;
    color: #334155;
    border-left: 4px solid #94a3b8;
}

.vufind-book-stack .is-cream {
    background: #dcd6c8;
    color: #334155;
    border-left: 4px solid #b45309;
}

.vufind-book-stack .is-stone {
    background: #d3cdc0;
    color: #334155;
    border-left: 4px solid #64748b;
}

.vufind-book-stack .is-white {
    background: #edeae2;
    color: #334155;
}

.vufind-pillars {
    padding: 26px 0;
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}

.vufind-pillars-grid,
.vufind-solutions-grid,
.vufind-benefits-grid,
.vufind-metric-list {
    display: grid;
}

.vufind-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.vufind-pillar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vufind-pillar-icon,
.vufind-benefit span,
.vufind-cta-icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #faf5ff;
    color: var(--vufind-purple);
    flex: 0 0 auto;
}

.vufind-pillar h3,
.vufind-solution-card h3,
.vufind-benefit h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.vufind-pillar h3 {
    font-size: 18px;
}

.vufind-pillar p {
    font-size: 13px;
}

.vufind-section {
    padding: 78px 0;
}

.vufind-section-soft {
    background: #fafbff;
}

.vufind-section-head {
    margin-bottom: 42px;
}

.vufind-section-head.centered {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.vufind-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--vufind-purple);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vufind-section-head h2 {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
    margin-bottom: 12px;
}

.vufind-solutions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.vufind-solution-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 28px rgba(82, 39, 133, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vufind-solution-card:hover,
.vufind-solution-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(82, 39, 133, 0.1);
}

.vufind-illus {
    width: 120px;
    height: 120px;
    margin-bottom: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vufind-illus-essentials .frame {
    width: 68px;
    height: 58px;
    border-radius: 10px;
    border: 2px solid #38bdf8;
    background: #e0f2fe;
}

.vufind-illus-essentials .lens {
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 2px solid var(--vufind-purple);
    background: #ede9fe;
    color: var(--vufind-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vufind-illus-custom .gear,
.vufind-illus-custom .control,
.vufind-illus-integration .swap,
.vufind-illus-integration .gear-small {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vufind-illus-custom .gear {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #ede9fe;
    color: var(--vufind-purple);
    font-size: 26px;
}

.vufind-illus-custom .control {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #3b82f6;
    color: #ffffff;
    font-size: 18px;
}

.vufind-illus-integration .swap {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 24px;
}

.vufind-illus-integration .gear-small {
    top: 18px;
    right: 20px;
    color: var(--vufind-purple);
    font-size: 22px;
}

.vufind-solution-card h3 {
    font-size: 24px;
}

.vufind-solution-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--vufind-purple);
    font-size: 14px;
    font-weight: 800;
}

.vufind-benefits-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    text-align: center;
}

.vufind-benefit {
    padding: 12px 8px;
}

.vufind-benefit span {
    margin-bottom: 14px;
}

.vufind-benefit h3 {
    font-size: 16px;
}

.vufind-benefit p {
    font-size: 12px;
}

.vufind-section-metrics {
    background: #fafbff;
}

.vufind-metrics {
    padding: 34px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #ede9fe;
    box-shadow: 0 10px 30px rgba(82, 39, 133, 0.06);
    grid-template-columns: minmax(0, 0.64fr) minmax(280px, 0.36fr);
}

.vufind-metric-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.vufind-metric-list strong {
    display: block;
    color: var(--vufind-purple);
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}

.vufind-metric-list article:nth-child(3) strong {
    font-size: 26px;
}

.vufind-metric-list span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}

.vufind-map {
    position: relative;
    min-height: 180px;
}

.vufind-map-dots {
    width: 100%;
    height: 132px;
    opacity: 0.72;
    background-image: radial-gradient(rgba(167, 139, 250, 0.7) 2px, transparent 2px);
    background-size: 24px 24px;
    mask-image: radial-gradient(circle at center, black 44%, transparent 86%);
}

.vufind-map-note {
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--vufind-purple);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    transform: rotate(-6deg);
    text-align: right;
}

.vufind-cta-wrap {
    padding: 24px 0 80px;
    background: #fafbff;
}

.vufind-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 34px;
    border-radius: 24px;
    background: linear-gradient(90deg, var(--vufind-purple) 0%, #6b21a8 100%);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(82, 39, 133, 0.2);
}

.vufind-cta-copy {
    display: flex;
    align-items: center;
    gap: 18px;
}

.vufind-cta-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 22px;
}

.vufind-cta h2 {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.08;
    margin-bottom: 8px;
}

.vufind-cta p {
    color: #000;
    font-size: 15px;
}

@media (max-width: 991px) {
    .vufind-hero-grid,
    .vufind-pillars-grid,
    .vufind-solutions-grid,
    .vufind-benefits-grid,
    .vufind-metrics,
    .vufind-metric-list,
    .vufind-cta {
        grid-template-columns: 1fr;
        display: grid;
    }

    .vufind-cta {
        align-items: start;
    }

    .vufind-benefit {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .vufind-shell {
        width: min(100% - 20px, 1180px);
    }

    .vufind-hero {
        padding-bottom: 54px;
    }

    .vufind-wordmark {
        font-size: 40px;
    }

    .vufind-wordmark i {
        left: 44px;
        top: -8px;
        font-size: 15px;
    }

    .vufind-copy h1 {
        font-size: 38px;
    }

    .vufind-lead {
        font-size: 15px;
    }

    .vufind-note {
        position: static;
        transform: none;
        margin-bottom: 14px;
        text-align: left;
        font-size: 22px;
    }

    .vufind-laptop-wrap {
        padding-right: 0;
    }

    .vufind-screen-top,
    .vufind-screen-links,
    .vufind-cta-copy {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .vufind-screen-hero,
    .vufind-solution-card,
    .vufind-metrics,
    .vufind-cta {
        padding: 20px;
    }

    .vufind-solution-card,
    .vufind-metrics,
    .vufind-cta {
        border-radius: 22px;
    }

    .vufind-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vufind-book-stack {
        display: none;
    }

    .vufind-metric-list strong {
        font-size: 34px;
    }

.vufind-metric-list article:nth-child(3) strong,
.vufind-map-note {
    font-size: 24px;
}
}

.ops-page {
    --ops-primary: #6d28d9;
    --ops-primary-dark: #4c1d95;
    --ops-primary-soft: #f5f3ff;
    --ops-ink: #0f172a;
    --ops-muted: #64748b;
    background:
        radial-gradient(circle at 78% 10%, rgba(109, 40, 217, 0.11), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 56%, #fafbff 100%);
    color: var(--ops-ink);
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
}

.ops-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.ops-breadcrumbs {
    padding: 34px 0 16px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ops-breadcrumbs a {
    color: var(--ops-primary);
}

.ops-breadcrumbs span {
    display: inline-block;
    margin: 0 8px;
}

.ops-hero {
    padding: 10px 0 42px;
}

.ops-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(470px, 1fr);
    gap: 54px;
    align-items: center;
}

.ops-copy {
    max-width: 540px;
}

.ops-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #111827;
    font-size: clamp(42px, 6vw, 56px);
    line-height: 1;
}

.ops-brand span {
    font-family: 'Merriweather', serif;
    font-weight: 900;
}

.ops-brand i {
    color: #cbd5e1;
    font-style: normal;
    font-weight: 300;
}

.ops-brand strong {
    color: var(--ops-primary);
    font-weight: 800;
}

.ops-kicker {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ops-copy h1 {
    margin: 18px 0 0;
    font-size: clamp(42px, 6vw, 64px);
    line-height: 1.02;
    font-weight: 800;
    color: #111827;
}

.ops-copy h1 span {
    color: var(--ops-primary);
}

.ops-lead {
    margin: 22px 0 0;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.75;
    color: #475569;
}

.ops-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
}

.ops-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.ops-btn:hover {
    transform: translateY(-2px);
}

.ops-btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 18px 34px rgba(109, 40, 217, 0.22);
}

.ops-btn-secondary {
    color: var(--ops-primary);
}

.ops-visual {
    position: relative;
    min-height: 400px;
}

.ops-note {
    position: absolute;
    top: -18px;
    right: 0;
    z-index: 3;
    text-align: center;
    color: var(--ops-primary);
    font-family: 'Caveat', cursive;
    font-size: 31px;
    line-height: 0.84;
    transform: rotate(6deg);
}

.ops-note strong,
.ops-note em {
    display: block;
    font-size: 39px;
    font-weight: 700;
}

.ops-note em {
    font-style: italic;
}

.ops-laptop {
    position: absolute;
    inset: 44px 34px 32px 0;
    background: #0f172a;
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 18px 18px 0 0;
    padding: 10px 10px 0;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
}

.ops-chrome {
    display: flex;
    gap: 6px;
    padding: 0 4px 10px;
}

.ops-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ops-chrome span:nth-child(1) {
    background: #f87171;
}

.ops-chrome span:nth-child(2) {
    background: #fbbf24;
}

.ops-chrome span:nth-child(3) {
    background: #4ade80;
}

.ops-screen {
    overflow: hidden;
    background: #fff;
    border-radius: 4px 4px 0 0;
}

.ops-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(241, 245, 249, 1);
    font-size: 10px;
}

.ops-mini-brand,
.ops-mini-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-mini-brand {
    font-weight: 800;
    color: #111827;
}

.ops-mini-brand b {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--ops-primary);
}

.ops-mini-nav {
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
}

.ops-screen-hero {
    padding: 28px 20px 22px;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.86)),
        radial-gradient(circle at center, rgba(100, 116, 139, 0.2), transparent 60%);
}

.ops-screen-hero h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 800;
}

.ops-screen-hero p {
    margin: 8px 0 12px;
    color: #cbd5e1;
    font-size: 10px;
}

.ops-search {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.ops-search span {
    flex: 1 1 auto;
    padding: 10px 12px;
    color: #94a3b8;
    font-size: 10px;
    text-align: left;
}

.ops-search button {
    width: 40px;
    height: 36px;
    border: 0;
    background: var(--ops-primary);
    color: #fff;
}

.ops-quicklinks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 12px 10px;
    background: #f8fafc;
    border-top: 1px solid rgba(241, 245, 249, 1);
}

.ops-quicklinks div {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
}

.ops-base {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12px;
    background: #1f2937;
    border-radius: 0 0 8px 8px;
}

.ops-base span {
    width: 48px;
    height: 4px;
    border-radius: 999px;
    background: #475569;
}

.ops-spines {
    position: absolute;
    right: -10px;
    bottom: 44px;
    z-index: 2;
    display: grid;
    gap: 6px;
}

.ops-spine {
    display: inline-block;
    padding: 8px 12px;
    border-left: 4px solid transparent;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);
}

.ops-spine-navy {
    background: #1e3a5f;
    border-left-color: #fcd34d;
}

.ops-spine-blue {
    background: #244b6e;
    border-left-color: #34d399;
}

.ops-spine-sand {
    background: #c28453;
    border-left-color: #e2e8f0;
}

.ops-spine-bronze {
    background: #b36d43;
    border-left-color: #fde68a;
}

.ops-spine-clay {
    background: #a24b3b;
    border-left-color: #bfdbfe;
}

.ops-values {
    padding: 28px 0;
}

.ops-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ops-value {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    background: #fff;
    border: 1px solid rgba(241, 245, 249, 1);
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
}

.ops-value-icon,
.ops-step-icon,
.ops-feature-icon,
.ops-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ops-value-icon,
.ops-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ops-primary-soft);
    color: var(--ops-primary);
    font-size: 18px;
}

.ops-value h3,
.ops-step h3,
.ops-feature h3 {
    margin: 0;
    color: #111827;
    font-weight: 800;
}

.ops-value h3 {
    font-size: 15px;
}

.ops-value p,
.ops-step p,
.ops-feature p {
    margin: 6px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.ops-value p {
    font-size: 12px;
}

.ops-section {
    padding: 64px 0;
}

.ops-section-topline {
    border-top: 1px solid rgba(241, 245, 249, 1);
}

.ops-section-head {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}

.ops-section-head span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--ops-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ops-section-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.08;
    font-weight: 800;
}

.ops-section-head p {
    margin: 12px auto 0;
    max-width: 620px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.75;
}

.ops-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ops-step {
    position: relative;
    padding: 28px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(241, 245, 249, 1);
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
}

.ops-step:not(:last-child)::after {
    content: '\2192';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 20px;
    font-weight: 700;
}

.ops-step-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--ops-primary-soft);
    color: var(--ops-primary);
    font-size: 24px;
}

.ops-step h3 {
    font-size: 20px;
}

.ops-step p {
    font-size: 13px;
}

.ops-features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 22px;
}

.ops-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ops-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 17px;
}

.ops-feature h3 {
    font-size: 15px;
}

.ops-feature p {
    font-size: 12px;
}

.ops-metrics {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 20px;
    align-items: center;
    padding: 28px 30px;
    background: linear-gradient(90deg, #faf5ff 0%, rgba(238, 242, 255, 0.7) 50%, #faf5ff 100%);
    border: 1px solid rgba(221, 214, 254, 0.75);
    border-radius: 22px;
}

.ops-metric strong {
    display: block;
    color: var(--ops-primary);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.06;
    font-weight: 800;
}

.ops-metric-title strong {
    max-width: 240px;
}

.ops-metric span {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.ops-map {
    position: relative;
    min-height: 106px;
}

.ops-map-dots {
    position: absolute;
    inset: 20px 8px;
    background:
        radial-gradient(circle at 14% 34%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 23% 28%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 31% 42%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 44% 26%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 52% 38%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 61% 44%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 74% 34%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 58%, rgba(109, 40, 217, 0.34) 0 2px, transparent 3px);
    opacity: 0.7;
}

.ops-map-note {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    text-align: right;
    color: var(--ops-primary);
    font-family: 'Caveat', cursive;
    font-size: 31px;
    line-height: 0.9;
    font-weight: 700;
    transform: rotate(-6deg);
}

.ops-map-note span {
    color: var(--ops-primary-dark);
}

.ops-section-cta {
    padding-top: 18px;
    padding-bottom: 82px;
}

.ops-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px;
    border-radius: 22px;
    background: linear-gradient(135deg, #020617 0%, #0f172a 55%, #111827 100%);
    color: #fff;
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.28);
}

.ops-cta-copy {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ops-cta-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #fff;
    font-size: 24px;
}

.ops-cta h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.08;
    font-weight: 800;
}

.ops-cta p {
    margin: 8px 0 0;
    color: #cbd5e1;
    font-size: 14px;
}

.ops-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .ops-hero-grid,
    .ops-values-grid,
    .ops-workflow-grid,
    .ops-features-grid,
    .ops-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .ops-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ops-copy {
        max-width: none;
        text-align: center;
    }

    .ops-actions {
        justify-content: center;
    }

    .ops-visual {
        max-width: 720px;
        margin: 0 auto;
    }

    .ops-step::after {
        display: none;
    }

    .ops-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .ops-cta-copy {
        flex-direction: column;
    }

    .ops-cta-link {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .ops-shell {
        width: min(100% - 24px, 100%);
    }

    .ops-breadcrumbs {
        padding-top: 24px;
        font-size: 11px;
    }

    .ops-copy h1 {
        font-size: clamp(36px, 10vw, 54px);
    }

    .ops-lead,
    .ops-section-head p {
        font-size: 16px;
    }

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

    .ops-visual {
        min-height: 470px;
    }

    .ops-note {
        position: static;
        margin-bottom: 16px;
        transform: none;
    }

    .ops-laptop {
        position: relative;
        inset: auto;
    }

    .ops-appbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .ops-mini-nav {
        flex-wrap: wrap;
    }

    .ops-quicklinks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
    }

    .ops-spines {
        position: static;
        margin-top: 18px;
    }

    .ops-values-grid,
    .ops-workflow-grid,
    .ops-features-grid,
    .ops-metrics {
        grid-template-columns: 1fr;
    }

    .ops-value {
        align-items: flex-start;
    }

    .ops-metric,
    .ops-metric-title {
        text-align: center;
    }

    .ops-metric-title strong {
        max-width: none;
    }

    .ops-map {
        min-height: 124px;
    }

    .ops-map-note {
        right: 50%;
        transform: translateX(50%) rotate(-6deg);
        text-align: center;
    }

.ops-cta {
        padding: 24px 20px;
    }
}

.folio-page {
    --folio-purple: #53198a;
    --folio-purple-light: #6e2bbb;
    --folio-orange: #eb5a3c;
    --folio-orange-dark: #d94f33;
    --folio-navy: #0d162a;
    --folio-navy-card: #111b33;
    --folio-ink: #111827;
    --folio-muted: #6b7280;
    background:
        radial-gradient(circle at 82% 10%, rgba(83, 25, 138, 0.08), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 54%, #fbfcff 100%);
    color: var(--folio-ink);
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
}

.folio-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 110px auto 0 ;
}

.folio-breadcrumbs {
    padding: 34px 0 14px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.folio-breadcrumbs a {
    color: var(--folio-purple);
}

.folio-breadcrumbs span {
    display: inline-block;
    margin: 0 8px;
}

.folio-hero {
    padding: 16px 0 46px;
}

.folio-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(540px, 1.1fr);
    gap: 48px;
    align-items: center;
}

.folio-copy {
    max-width: 520px;
}

.folio-brand {
    margin-bottom: 18px;
}

.folio-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--folio-orange);
    font-size: clamp(42px, 6vw, 56px);
    line-height: 1;
    font-weight: 800;
}

.folio-logo i {
    font-size: 18px;
}

.folio-brand p {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.folio-copy h1 {
    margin: 0;
    font-size: clamp(44px, 6vw, 68px);
    line-height: 1.02;
    font-weight: 800;
    color: #111827;
}

.folio-copy h1 span {
    color: var(--folio-orange);
}

.folio-lead {
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.75;
    color: #4b5563;
}

.folio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.folio-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.folio-btn:hover {
    transform: translateY(-2px);
}

.folio-btn-primary {
    background: linear-gradient(135deg, var(--folio-purple) 0%, var(--folio-purple-light) 100%);
    box-shadow: 0 18px 34px rgba(83, 25, 138, 0.22);
}

.folio-btn-secondary {
    color: var(--folio-purple);
}

.folio-visual {
    position: relative;
    min-height: 470px;
}

.folio-note {
    position: absolute;
    top: -18px;
    right: 8px;
    z-index: 3;
    text-align: right;
    color: var(--folio-orange);
    font-family: 'Caveat', cursive;
    font-size: 38px;
    line-height: 0.84;
    transform: rotate(-4deg);
}

.folio-note strong {
    display: block;
    font-size: 48px;
    font-weight: 700;
}

.folio-note em {
    display: block;
    font-style: normal;
}

.folio-laptop {
    position: absolute;
    inset: 28px 26px 30px 0;
}

.folio-window {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid rgba(229, 231, 235, 1);
    border-radius: 12px 12px 0 0;
    font-size: 11px;
    color: #6b7280;
}

.folio-window-brand {
    color: var(--folio-orange);
    font-weight: 800;
    font-size: 12px;
}

.folio-window-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #9ca3af;
}

.folio-window-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folio-window-user b {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--folio-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.folio-screen {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    min-height: 310px;
    overflow: hidden;
    border: 4px solid #1f2937;
    border-top-width: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 48px rgba(15, 23, 42, 0.2);
}

.folio-sidebar {
    background: #0e1628;
    color: #d1d5db;
    padding: 14px 12px;
}

.folio-sidebar-title {
    margin-bottom: 10px;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.folio-side-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 10px;
    color: #d1d5db;
}

.folio-side-item.is-active {
    background: rgba(37, 99, 235, 0.28);
    color: #fff;
}

.folio-dashboard {
    background: #f8fafc;
    padding: 14px;
}

.folio-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(229, 231, 235, 1);
}

.folio-dashboard-head h3,
.folio-panel h4,
.folio-pillar h3,
.folio-card h3,
.folio-library-card h3 {
    margin: 0;
}

.folio-dashboard-head h3 {
    color: #1f2937;
    font-size: 18px;
    font-weight: 800;
}

.folio-dashboard-head span {
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #16a34a;
    font-size: 10px;
    font-weight: 700;
}

.folio-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.folio-stats article,
.folio-panel {
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(148, 163, 184, 0.08);
}

.folio-stats article {
    padding: 10px;
}

.folio-stats small,
.folio-panel small {
    display: block;
    color: #6b7280;
    font-size: 10px;
}

.folio-stats strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
}

.folio-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.folio-panel {
    padding: 12px;
}

.folio-panel h4 {
    margin-bottom: 10px;
    color: #374151;
    font-size: 12px;
    font-weight: 800;
}

.folio-panel div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #6b7280;
    font-size: 10px;
    margin-bottom: 6px;
}

.folio-health {
    justify-content: flex-start !important;
    margin-bottom: 10px !important;
    padding: 6px 8px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #15803d !important;
    font-weight: 700;
}

.folio-bars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    height: 38px;
    margin-top: 8px;
}

.folio-bars span {
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #93c5fd 0%, #2563eb 100%);
}

.folio-bars span:nth-child(1) { height: 16px; }
.folio-bars span:nth-child(2) { height: 20px; }
.folio-bars span:nth-child(3) { height: 24px; }
.folio-bars span:nth-child(4) { height: 20px; }
.folio-bars span:nth-child(5) { height: 30px; }
.folio-bars span:nth-child(6) { height: 34px; }

.folio-base {
    max-width: 94%;
    height: 14px;
    margin: 0 auto;
    background: #d1d5db;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

.folio-base span {
    display: block;
    width: 64px;
    height: 4px;
    margin: 0 auto;
    background: #9ca3af;
    border-radius: 999px;
}

.folio-spines {
    position: absolute;
    right: -4px;
    top: 124px;
    z-index: 2;
    display: grid;
    gap: 6px;
}

.folio-spines span {
    display: inline-block;
    padding: 7px 12px;
    border-left: 4px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

.folio-spines span:nth-child(1) { background: #d59a57; }
.folio-spines span:nth-child(2) { background: #c28445; }
.folio-spines span:nth-child(3) { background: #ad7237; }
.folio-spines span:nth-child(4) { background: #975f2c; }
.folio-spines span:nth-child(5) { background: #7f4e22; }
.folio-spines span:nth-child(6) { background: #653b17; }

.folio-pillars {
    padding: 30px 0;
    background: #f8fafc;
    border-top: 1px solid rgba(241, 245, 249, 1);
    border-bottom: 1px solid rgba(241, 245, 249, 1);
}

.folio-pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.folio-pillar,
.folio-feature-grid,
.folio-library-grid,
.folio-community-grid,
.folio-services {
    display: grid;
}

.folio-pillar {
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
}

.folio-pillar-icon,
.folio-card-icon,
.folio-library-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f3e8ff;
    color: var(--folio-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.folio-pillar h3,
.folio-card h3,
.folio-library-card h3 {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.folio-pillar p,
.folio-card p,
.folio-library-card p,
.folio-story-card p,
.folio-section-head p,
.folio-partner-copy p,
.folio-community-head p {
    color: #6b7280;
    line-height: 1.65;
}

.folio-pillar p {
    margin: 6px 0 0;
    font-size: 12px;
}

.folio-section {
    padding: 68px 0;
}

.folio-section-soft {
    background: #f8fafc;
}

.folio-section-head {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.folio-section-head span,
.folio-library-head span,
.folio-partner-copy span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--folio-purple);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.folio-section-head h2,
.folio-library-head h2,
.folio-community-head h2,
.folio-partner-copy h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(34px, 5vw, 46px);
    line-height: 1.08;
    font-weight: 800;
}

.folio-feature-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.5fr);
    gap: 18px;
    align-items: stretch;
}

.folio-story-card {
    position: relative;
    min-height: 380px;
    padding: 30px 26px;
    border-radius: 24px;
    background:
        radial-gradient(rgba(45, 60, 94, 0.8) 1px, transparent 1px),
        linear-gradient(180deg, #162035 0%, #111827 100%);
    background-size: 16px 16px, auto;
    color: #fff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.folio-story-card h3 {
    margin: 0;
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
}

.folio-story-card strong {
    display: block;
    margin-top: 8px;
    color: var(--folio-orange);
    font-size: 24px;
    line-height: 1.1;
}

.folio-story-card p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.folio-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.folio-card,
.folio-library-card {
    padding: 22px 18px;
    background: #fff;
    border: 1px solid rgba(243, 244, 246, 1);
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(148, 163, 184, 0.08);
}

.folio-card-icon {
    margin-bottom: 14px;
    border-radius: 12px;
}

.folio-card-icon.is-blue {
    background: #eff6ff;
    color: #2563eb;
}

.folio-card-icon.is-indigo {
    background: #eef2ff;
    color: #4f46e5;
}

.folio-card-icon.is-sky {
    background: #f0f9ff;
    color: #0284c7;
}

.folio-card h3 {
    font-size: 16px;
}

.folio-card p {
    margin: 8px 0 0;
    font-size: 12px;
}

.folio-library-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}

.folio-library-head p {
    margin: 8px 0 0;
}

.folio-library-note {
    text-align: right;
    color: #1a2b4c;
    font-family: 'Caveat', cursive;
    font-size: 36px;
    line-height: 0.92;
}

.folio-library-note strong {
    display: block;
}

.folio-library-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.folio-library-card {
    text-align: center;
}

.folio-library-icon {
    margin: 0 auto 14px;
}

.folio-library-card h3 {
    font-size: 14px;
}

.folio-library-card p {
    margin: 8px 0 0;
    font-size: 12px;
}

.folio-community {
    padding: 56px 0;
    background: var(--folio-navy);
    color: #fff;
}

.folio-community-wrap {
    position: relative;
    padding: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.1px, transparent 1.1px);
    background-size: 18px 18px;
}

.folio-community-head {
    margin-bottom: 26px;
}

.folio-community-head p {
    margin: 8px 0 0;
    color: #d1d5db;
    font-size: 14px;
}

.folio-community-grid {
    grid-template-columns: minmax(0, 1.5fr) auto;
    gap: 26px;
    align-items: center;
}

.folio-community-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid rgba(75, 85, 99, 0.5);
    border-bottom: 1px solid rgba(75, 85, 99, 0.5);
}

.folio-community-metrics strong {
    display: block;
    color: #fff;
    font-size: clamp(24px, 2.6vw, 44px);
    line-height: 1.08;
    font-weight: 800;
}

.folio-community-metrics span {
    display: block;
    margin-top: 6px;
    color: #9ca3af;
    font-size: 12px;
}

.folio-community-cta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.folio-community-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--folio-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.folio-community-note {
    color: #e5e7eb;
    font-family: 'Caveat', cursive;
    font-size: 28px;
    line-height: 0.92;
}

.folio-partner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr) auto;
    gap: 24px;
    align-items: center;
}

.folio-partner-copy p {
    margin: 12px 0 0;
    font-size: 14px;
}

.folio-services {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    text-align: center;
}

.folio-services article {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #374151;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.folio-services i {
    color: var(--folio-purple);
    font-size: 24px;
}

.folio-talk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--folio-purple);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .folio-hero-grid,
    .folio-feature-layout,
    .folio-community-grid,
    .folio-partner {
        grid-template-columns: 1fr;
    }

    .folio-pillars-grid,
    .folio-library-grid,
    .folio-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .folio-community-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .folio-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .folio-copy {
        max-width: none;
        text-align: center;
    }

    .folio-actions {
        justify-content: center;
    }

    .folio-visual {
        max-width: 760px;
        margin: 0 auto;
    }

    .folio-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .folio-library-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .folio-library-note {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .folio-shell {
        width: min(100% - 24px, 100%);
    }

    .folio-breadcrumbs {
        padding-top: 24px;
        font-size: 11px;
    }

    .folio-copy h1 {
        font-size: clamp(36px, 10vw, 52px);
    }

    .folio-lead {
        font-size: 16px;
    }

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

    .folio-visual {
        min-height: 520px;
    }

    .folio-note {
        position: static;
        margin-bottom: 16px;
        text-align: center;
        transform: none;
    }

    .folio-laptop {
        position: relative;
        inset: auto;
    }

    .folio-window {
        flex-wrap: wrap;
    }

    .folio-window-search {
        min-width: 0;
        width: 100%;
    }

    .folio-screen {
        grid-template-columns: 1fr;
    }

    .folio-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .folio-sidebar-title {
        grid-column: 1 / -1;
    }

    .folio-stats,
    .folio-panels,
    .folio-pillars-grid,
    .folio-feature-grid,
    .folio-library-grid,
    .folio-community-metrics,
    .folio-services {
        grid-template-columns: 1fr;
    }

    .folio-spines {
        position: static;
        margin-top: 18px;
    }

    .folio-story-card {
        min-height: 280px;
    }

    .folio-community-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .folio-community-cta a,
    .folio-talk {
        width: 100%;
        justify-content: center;
    }
}