/* Workroomly upper journey — header, hero, ribbon, showcase, and Cobrain handoff */

:root {
    --wr-display: "Manrope", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wr-body: "Manrope", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wr-night: #050a17;
    --wr-night-soft: #091226;
    --wr-electric: #6a7cff;
    --wr-sky: #7ed7ff;
}

.home-page {
    font-family: var(--wr-body);
    background: #f8fbff;
}

/* Header */
.home-page #header-container .workroomly-site-header.navbar {
    min-height: 82px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background:
        rgba(5, 10, 23, .88) !important;
    box-shadow: none;
    backdrop-filter: blur(22px) saturate(1.28);
    -webkit-backdrop-filter: blur(22px) saturate(1.28);
}

.home-page #header-container .workroomly-site-header.navbar::before {
    background:
        transparent;
}

.home-page #header-container .workroomly-site-header.navbar.scrolled {
    min-height: 72px;
    padding: 10px 0;
    border-bottom-color: rgba(255, 255, 255, .075);
    background: rgba(5, 10, 23, .91) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.home-page #header-container .workroomly-site-header .container {
    width: min(100% - 48px, 1180px);
    max-width: 1180px;
    padding: 0;
}

.home-page #header-container .workroomly-site-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    margin-right: clamp(28px, 4vw, 64px);
}

.home-page #header-container .workroomly-site-header .navbar-brand img {
    width: auto !important;
    height: 34px !important;
    margin: 0 !important;
    opacity: .98;
}

.home-page #header-container .workroomly-site-header .navbar-nav {
    gap: clamp(6px, 1vw, 14px);
}

.home-page #header-container .workroomly-site-header .nav-link {
    position: relative;
    padding: 10px 11px !important;
    color: rgba(255, 255, 255, .68);
    font-family: var(--wr-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.home-page #header-container .workroomly-site-header .nav-link::after {
    left: 11px;
    right: 11px;
    bottom: 4px;
    height: 1px;
    border-radius:  0;
    background: #8bdcff !important;
}

.home-page #header-container .workroomly-site-header .navbar-cta {
    gap: 8px !important;
    margin-left: clamp(14px, 2vw, 28px) !important;
}

.home-page #header-container .workroomly-site-header .navbar-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border-radius:  0;
    font-family: var(--wr-body);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home-page #header-container .workroomly-site-header .navbar-cta .btn-outline-primary {
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .025);
}

.home-page #header-container .workroomly-site-header .navbar-cta .btn-primary {
    border: 1px solid rgba(255, 255, 255, .84);
    color: #0b1020;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.home-page #header-container .workroomly-site-header .navbar-cta .btn-primary:hover {
    color: #0b1020;
    background: #eef1ff;
    box-shadow: 0 12px 32px rgba(70, 86, 214, .2);
    transform: translateY(-1px);
}

/* Hero */
.home-page .hero-premium {
    --hero-x: 0;
    --hero-y: 0;
    --hero-scroll: 0;
    min-height: 600px;
    padding: 132px 0 62px;
    color: #fff;
    background:
        #071226;
}

.home-page .hero-premium::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    pointer-events: none;
    background: transparent;
}

.home-page .hero-premium-bg {
    opacity: 1;
}

.home-page .hero-mesh-gradient {
    background:
        transparent;
}

.home-page .hero-grid-overlay {
    opacity: .17;
    background-size: 74px 74px;
    mask-image: none;
}

.home-page .hero-glow {
    opacity: .45;
    filter: blur(130px);
    animation-duration: 14s;
}

.home-page .hero-glow-1 {
    width: 560px;
    height: 560px;
    top: -24%;
    left: -15%;
    background: rgba(43, 110, 255, .24);
}

.home-page .hero-glow-2 {
    width: 480px;
    height: 480px;
    right: -12%;
    bottom: -22%;
    background: rgba(129, 89, 255, .18);
}

.home-page .hero-premium .container {
    width: min(100% - 96px, 1220px);
    max-width: 1220px;
    padding: 0;
}

.home-page .hero-premium-inner {
    grid-template-columns: minmax(0, 1.16fr) minmax(390px, .84fr);
    gap: clamp(54px, 6vw, 94px);
}

.home-page .hero-premium-content {
    max-width: 690px;
    transform: translate3d(0, calc(var(--hero-scroll) * -18px), 0);
    will-change: transform;
}

.home-page .hero-premium-eyebrow {
    gap: 11px;
    margin: 0 0 28px;
    padding: 0;
    border: 0;
    border-radius:  0;
    color: rgba(162, 217, 255, .84);
    background: transparent;
    font-family: var(--wr-body);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.home-page .hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    background: #87dbff;
    box-shadow: 0 0 0 6px rgba(126, 215, 255, .08), 0 0 22px rgba(126, 215, 255, .72);
}

.home-page .hero-premium-title {
    max-width: 700px;
    margin: 0 0 30px;
    font-family: var(--wr-display);
    font-size: clamp(56px, 4.8vw, 72px);
    font-weight: 650;
    line-height: .99;
    letter-spacing: -.062em;
    text-wrap: balance;
}

.home-page .hero-title-line-1 {
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
}

.home-page .hero-title-line {
    white-space: nowrap;
}

.home-page .hero-title-line-2 {
    padding-bottom: .06em;
    background: #b9e9ff;
    -webkit-background-clip: text;
    background-clip: text;
}

.home-page .hero-premium-subtitle {
    max-width: 590px;
    margin: 0 0 36px;
    color: rgba(237, 241, 252, .64);
    font-family: var(--wr-body);
    font-size: clamp(17px, 1.45vw, 20px);
    font-weight: 450;
    line-height: 1.65;
    letter-spacing: -.022em;
}

.home-page .hero-premium-cta {
    gap: 12px;
    margin: 0;
}

.home-page .hero-premium-cta a {
    min-height: 56px;
    padding: 0 25px;
    border-radius:  0;
    font-family: var(--wr-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.home-page .hero-premium-btn-primary {
    color: #0b1020;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .74) inset,
        0 14px 38px rgba(0, 0, 0, .25),
        0 0 50px rgba(103, 121, 255, .12);
}

.home-page .hero-premium-btn-primary::before {
    background: transparent;
}

.home-page .hero-premium-btn-primary:hover {
    color: #0b1020;
    background: #f4f5ff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85) inset,
        0 18px 48px rgba(0, 0, 0, .28),
        0 0 56px rgba(102, 120, 255, .19);
}

.home-page .hero-premium-btn-secondary {
    border-color: rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    backdrop-filter: blur(16px);
}

.home-page .hero-premium-btn-secondary:hover {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

/* Hero intelligence object */
.home-page .hero-cascade-visual {
    min-height: 400px;
    transform:
        translate3d(
            calc(var(--hero-x) * 12px),
            calc(var(--hero-y) * 10px + var(--hero-scroll) * 22px),
            0
        );
    transition: transform .18s ease-out;
    will-change: transform;
}

.home-page .hero-cascade-system {
    width: min(31vw, 400px);
    height: min(31vw, 400px);
    min-width: 350px;
    min-height: 350px;
    animation: none;
    filter: drop-shadow(0 34px 70px rgba(0, 0, 0, .24));
    transform:
        perspective(900px)
        rotateX(calc(var(--hero-y) * -2.2deg))
        rotateY(calc(var(--hero-x) * 2.8deg));
    transition: transform .2s ease-out;
    will-change: transform;
}

.home-page .hero-cascade-system::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 7%;
    border: 1px solid rgba(201, 216, 255, .085);
    border-radius:  0;
    background:
        transparent;
    box-shadow:
        inset 0 0 90px rgba(95, 111, 255, .055),
        0 0 110px rgba(69, 76, 188, .07);
}

.home-page .hero-cascade-system::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 48%;
    aspect-ratio: 1;
    border-radius:  0;
    background: transparent;
    filter: blur(18px);
    transform: translate(-50%, -50%);
}

.home-page .hero-cascade-svg {
    z-index: 2;
    overflow: visible;
    opacity: .94;
}

.home-page .cascade-arc {
    stroke-width: 1.45;
    opacity: .38;
    filter: drop-shadow(0 0 4px currentColor);
}

.home-page .cascade-glow {
    opacity: .2;
}

.home-page .cascade-particle {
    filter: drop-shadow(0 0 7px currentColor);
}

.home-page .cascade-label {
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius:  0;
    color: #eaf1ff;
    background: rgba(4, 9, 22, .5);
    font-family: var(--wr-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-shadow: 0 1px 7px rgba(0, 0, 0, .95), 0 0 14px currentColor;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 5px 16px rgba(0, 0, 0, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-page .cascade-label-1 { color: #95e5ff; }
.home-page .cascade-label-2 { color: #c9b5ff; }
.home-page .cascade-label-3 { color: #9af0d2; }
.home-page .cascade-label-4 { color: #f2c98f; }

@keyframes cascadeLabelPulse1 {
    0%, 100% { opacity: .66; }
    8%, 22% { opacity: 1; }
    30% { opacity: .66; }
}

@keyframes cascadeLabelPulse2 {
    0%, 100% { opacity: .66; }
    25%, 39% { opacity: 1; }
    47% { opacity: .66; }
}

@keyframes cascadeLabelPulse3 {
    0%, 100% { opacity: .66; }
    42%, 56% { opacity: 1; }
    64% { opacity: .66; }
}

@keyframes cascadeLabelPulse4 {
    0%, 100% { opacity: .66; }
    59%, 73% { opacity: 1; }
    81% { opacity: .66; }
}

.home-page .hero-cascade-center {
    z-index: 5;
}

.home-page .hero-cascade-center-inner {
    width: 88px;
    height: 88px;
    gap: 6px;
    border: 1px solid rgba(193, 211, 255, .28);
    background:
        rgba(68, 119, 232, .48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 -16px 30px rgba(19, 17, 74, .22),
        0 20px 48px rgba(0, 0, 0, .28),
        0 0 70px rgba(97, 112, 255, .24);
    backdrop-filter: blur(24px) saturate(1.2);
}

.home-page .hero-cascade-center-inner::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius:  0;
}

.home-page .hero-cascade-center-inner i {
    color: #d8e8ff;
    font-size: 22px;
    filter: drop-shadow(0 0 13px rgba(150, 203, 255, .55));
}

.home-page .hero-cascade-center-inner span {
    color: rgba(255, 255, 255, .82);
    font-family: var(--wr-body);
    font-size: 8px;
    font-weight: 780;
    letter-spacing: .14em;
}

.home-page .hero-cascade-pulse {
    inset: -22px;
    border-color: rgba(147, 182, 255, .18);
    animation-duration: 4s;
}

/* Showcase: ribbon remains in the hero atmosphere; demo bridges to light. */
.home-page .showcase-section {
    position: relative;
    z-index: 2;
    margin: -2px 0 0;
    padding: 26px 0 clamp(148px, 12vw, 190px);
    border: 0;
    background:
        #070d1c;
    overflow: hidden;
}

.home-page .showcase-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: min(96vw, 1320px);
    height: 470px;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius:  0;
    background: transparent;
    filter: blur(.2px);
    pointer-events: none;
    transform: translate(-50%, -62%);
}

.home-page .showcase-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 230px;
    pointer-events: none;
    background:
        transparent;
}

.home-page .showcase-fluid {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1260px);
    max-width: 1260px;
    padding: 0;
}

.home-page .showcase-intro {
    max-width: 1120px;
    margin: 0 auto 24px;
}

.home-page .showcase-intro-text {
    color: #fff;
    font-family: var(--wr-display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 570;
    line-height: 1.18;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.home-page .showcase-intro-muted {
    color: rgba(232, 237, 249, .44);
    font-weight: 520;
}

.home-page .showcase-section .hero-lifecycle-ribbon {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 12px;
    border: 1px solid rgba(217, 226, 255, .09);
    border-radius:  0;
    background:
        rgba(255, 255, 255, .055);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 34px 80px rgba(0, 0, 0, .2);
    backdrop-filter: blur(26px) saturate(1.15);
    -webkit-backdrop-filter: blur(26px) saturate(1.15);
}

.home-page .showcase-section .hero-lifecycle-ribbon::before {
    top: -60px;
    left: 8%;
    right: 8%;
    height: 220px;
    background: transparent;
}

.home-page .showcase-section .lifecycle-ribbon-inner {
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 7px;
    overflow: visible;
}

.home-page .showcase-section .lifecycle-phase {
    flex: 0 0 auto;
    gap: 9px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius:  0;
    background: rgba(255, 255, 255, .052);
    box-shadow: none;
}

.home-page .showcase-section .lifecycle-phase.dimmed {
    opacity: .82;
}

.home-page .showcase-section .lifecycle-phase:hover {
    border-color: rgba(255, 255, 255, .11);
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.home-page .showcase-section .lifecycle-phase-label {
    padding: 3px 7px;
    border-radius:  0;
    font-family: var(--wr-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.home-page .showcase-section .lifecycle-phase-acquire .lifecycle-phase-label {
    color: #82dcff;
    background: rgba(77, 190, 236, .08);
}

.home-page .showcase-section .lifecycle-phase-engage .lifecycle-phase-label {
    color: #c1abff;
    background: rgba(162, 127, 255, .08);
}

.home-page .showcase-section .lifecycle-phase-deliver .lifecycle-phase-label {
    color: #8ce8ca;
    background: rgba(91, 214, 169, .08);
}

.home-page .showcase-section .lifecycle-phase-run .lifecycle-phase-label {
    color: #edc18c;
    background: rgba(223, 164, 97, .08);
}

.home-page .showcase-section .lifecycle-phase-apps {
    gap: 6px;
}

.home-page .showcase-section .lifecycle-app-chip {
    min-width: 56px;
    padding: 9px 7px 8px;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius:  0;
    color: rgba(248, 250, 255, .86);
    background: rgba(255, 255, 255, .055);
    font-family: var(--wr-body);
    font-size: 10px;
    font-weight: 650;
    box-shadow: none;
}

.home-page .showcase-section .lifecycle-app-icon {
    width: 37px;
    height: 37px;
    border-radius:  0;
    border: 1px solid rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.home-page .showcase-section .lifecycle-app-icon i {
    font-size: 15px;
}

.home-page .showcase-section .lifecycle-phase-acquire .lifecycle-app-icon {
    color: #83dfff;
    background: rgba(78, 190, 237, .17);
}

.home-page .showcase-section .lifecycle-phase-engage .lifecycle-app-icon {
    color: #c2adff;
    background: rgba(164, 129, 255, .17);
}

.home-page .showcase-section .lifecycle-phase-deliver .lifecycle-app-icon {
    color: #8ce9ca;
    background: rgba(91, 215, 170, .17);
}

.home-page .showcase-section .lifecycle-phase-run .lifecycle-app-icon {
    color: #efc08a;
    background: rgba(224, 164, 97, .17);
}

.home-page .showcase-section .lifecycle-app-chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, .065);
    transform: translateY(-2px);
}

.home-page .showcase-section .lifecycle-app-chip.active {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .24) !important;
    background: rgba(255, 255, 255, .11) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 12px 30px rgba(0, 0, 0, .22) !important;
    transform: translateY(-3px) !important;
}

.home-page .showcase-section .lifecycle-phase-acquire .lifecycle-app-chip.active {
    border-color: rgba(99, 207, 249, .44) !important;
}

.home-page .showcase-section .lifecycle-phase-engage .lifecycle-app-chip.active {
    border-color: rgba(181, 148, 255, .48) !important;
}

.home-page .showcase-section .lifecycle-phase-deliver .lifecycle-app-chip.active {
    border-color: rgba(111, 226, 185, .46) !important;
}

.home-page .showcase-section .lifecycle-phase-run .lifecycle-app-chip.active {
    border-color: rgba(235, 180, 116, .46) !important;
}

.home-page .showcase-section .lifecycle-connector {
    padding: 0 2px;
    color: rgba(232, 238, 255, .19);
    font-size: 8px;
}

/* Product demonstration */
.home-page .showcase-section .showcase-rich {
    margin-top: 78px;
    padding: 0;
}

.home-page .showcase-section .showcase-rich::before {
    display: none;
}

.home-page .showcase-rich-inner {
    grid-template-columns: minmax(315px, 360px) minmax(0, 1fr);
    max-width: 1180px;
    border: 1px solid rgba(34, 50, 83, .1);
    border-radius:  0;
    background: rgba(255, 255, 255, .98);
    box-shadow:
        0 2px 3px rgba(25, 36, 64, .04),
        0 24px 68px rgba(34, 50, 84, .13),
        0 60px 150px rgba(48, 56, 89, .12);
    overflow: hidden;
}

.home-page .showcase-rich-inner:hover {
    box-shadow:
        0 2px 3px rgba(25, 36, 64, .04),
        0 30px 78px rgba(34, 50, 84, .15),
        0 70px 160px rgba(48, 56, 89, .13);
}

.home-page .showcase-rich-content {
    padding: 50px 42px;
    background:
        #fff;
}

.home-page .showcase-rich-header {
    gap: 15px;
    margin-bottom: 24px;
}

.home-page .showcase-rich-icon {
    width: 48px;
    height: 48px;
    border-radius:  0;
}

.home-page .showcase-rich-title {
    font-family: var(--wr-display);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.home-page .showcase-rich-phase {
    font-family: var(--wr-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.home-page .showcase-rich-desc {
    margin-bottom: 26px;
    color: #687287;
    font-family: var(--wr-body);
    font-size: 15px;
    line-height: 1.68;
    letter-spacing: -.012em;
}

.home-page .showcase-rich-features {
    gap: 13px;
    margin-bottom: 28px;
}

.home-page .showcase-rich-features li {
    gap: 11px;
    color: #384256;
    font-family: var(--wr-body);
    font-size: 13px;
    line-height: 1.5;
}

.home-page .showcase-rich-actions {
    align-items: flex-start;
    gap: 13px;
    padding-top: 6px;
}

.home-page .showcase-rich-cta-primary {
    min-height: 50px;
    padding: 0 22px;
    border-radius:  0;
    font-family: var(--wr-body);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .17);
}

.home-page .showcase-rich-cta-link {
    padding-left: 4px;
    font-family: var(--wr-body);
    font-size: 12px;
    font-weight: 650;
}

.home-page .showcase-rich-visual {
    min-height: 520px;
    padding: 38px 34px 32px;
    border-radius:  0;
    background:
        #f7f9fc;
}

.home-page .showcase-rich-image {
    border: 1px solid rgba(31, 45, 77, .08);
    border-radius:  0;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .08),
        0 18px 50px rgba(42, 55, 88, .13);
    animation: showcaseBreathing 10s ease-in-out infinite;
}

.home-page .showcase-rich-visual::after {
    top: 50px;
    right: 46px;
    border-radius:  0;
}

.home-page .showcase-rich-image-nav {
    bottom: 28px;
}

/* A measured, borderless handoff into Cobrain */
.home-page .showcase-section + .showcase-lightbox + .wr-cobrain {
    margin-top: 0;
}

.home-page .wr-cobrain {
    font-family: var(--wr-body);
}

.home-page .wr-cobrain-title {
    font-family: var(--wr-display);
    font-weight: 620;
}

.home-page .wr-cobrain-description,
.home-page .wr-cobrain-decision,
.home-page .wr-cobrain-resolution {
    font-family: var(--wr-body);
}

.home-page .wr-cobrain-stage {
    background:
        linear-gradient(180deg, #f8fbff 0%, rgba(255, 255, 255, .7) 5.5%, transparent 13%),
        radial-gradient(ellipse 45% 17% at 78% 5%, rgba(255, 191, 142, .28), transparent 70%),
        radial-gradient(ellipse 52% 24% at 76% 29%, rgba(158, 183, 255, .39), transparent 70%),
        radial-gradient(ellipse 54% 30% at 78% 83%, rgba(113, 76, 255, .18), transparent 73%),
        radial-gradient(ellipse 42% 19% at 72% 100%, rgba(255, 145, 91, .13), transparent 75%),
        linear-gradient(180deg, #f8fbff 0%, #fff 4%, #f8f4ec 12%, #f1f0ee 19%, #dce8f2 29%, #aebed4 35%, #252b45 41%, #0a0d1c 51%, #070914 72%, #100c18 100%);
}

.home-page .wr-cobrain-topbar {
    padding-inline: clamp(32px, 6vw, 96px);
}

.home-page .wr-cobrain-presence-sticky {
    top: 72px;
    height: calc(100svh - 72px);
}

.home-page .wr-cobrain-decision,
.home-page .wr-cobrain-resolution {
    border-radius:  0;
}

/* Tablet */
@media (max-width: 1100px) {
    .home-page .hero-premium {
        min-height: 620px;
        padding: 128px 0 70px;
    }

    .home-page .hero-premium .container {
        width: min(100% - 48px, 980px);
    }

    .home-page .hero-premium-inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
        gap: 34px;
    }

    .home-page .hero-premium-title {
        font-size: clamp(46px, 5vw, 56px);
    }

    .home-page .hero-cascade-system {
        width: 340px;
        height: 340px;
        min-width: 340px;
        min-height: 340px;
    }

    .home-page .showcase-section {
        background:
            #070d1c;
    }

    .home-page .showcase-section .lifecycle-ribbon-inner {
        flex-wrap: wrap;
        gap: 9px;
    }

    .home-page .showcase-section .lifecycle-phase {
        flex: 1 1 calc(50% - 5px);
    }

    .home-page .showcase-section .lifecycle-phase-apps {
        justify-content: center;
    }

    .home-page .showcase-section .lifecycle-connector {
        display: none;
    }
}

@media (max-width: 860px) {
    .home-page #header-container .workroomly-site-header.navbar {
        min-height: 72px;
        padding: 11px 0;
    }

    .home-page #header-container .workroomly-site-header .container {
        width: min(100% - 34px, 760px);
    }

    .home-page #header-container .workroomly-site-header .navbar-brand img {
        height: 30px !important;
    }

    .home-page #header-container .workroomly-site-header .navbar-toggler {
        width: 42px;
        height: 42px;
        padding: 8px;
        border-radius:  0;
    }

    .home-page #header-container .workroomly-site-header .navbar-collapse {
        margin-top: 12px;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius:  0;
        background: rgba(9, 15, 31, .97);
        box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
    }

    .home-page .hero-premium {
        min-height: 0;
        padding: 118px 0 70px;
    }

    .home-page .hero-premium .container {
        width: min(100% - 40px, 720px);
    }

    .home-page .hero-premium-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .home-page .hero-premium-content {
        align-items: center;
        max-width: 680px;
        margin: 0 auto;
    }

    .home-page .hero-premium-title {
        font-size: clamp(50px, 9.2vw, 70px);
    }

    .home-page .hero-premium-subtitle {
        max-width: 590px;
    }

    .home-page .hero-cascade-visual {
        min-height: 350px;
    }

    .home-page .hero-cascade-system {
        width: min(72vw, 350px);
        height: min(72vw, 350px);
        min-width: 0;
        min-height: 0;
    }

    .home-page .showcase-section {
        padding-top: 74px;
        padding-bottom: 138px;
        background:
            #070d1c;
    }

    .home-page .showcase-fluid {
        width: min(100% - 32px, 760px);
    }

    .home-page .showcase-section .lifecycle-phase {
        flex-basis: calc(50% - 5px);
    }

    .home-page .showcase-section .showcase-rich {
        margin-top: 64px;
    }

    .home-page .showcase-rich-inner {
        grid-template-columns: 1fr;
        border-radius:  0;
    }

    .home-page .showcase-rich-content {
        padding: 42px 36px;
    }

    .home-page .showcase-rich-visual {
        min-height: 440px;
        padding: 30px;
        border-top: 1px solid rgba(30, 45, 74, .07);
    }
}

@media (max-width: 560px) {
    .home-page .hero-premium {
        padding: 108px 0 58px;
    }

    .home-page .hero-premium .container {
        width: min(100% - 32px, 520px);
    }

    .home-page .hero-premium-inner {
        gap: 30px;
    }

    .home-page .hero-premium-eyebrow {
        margin-bottom: 21px;
        font-size: 9px;
    }

    .home-page .hero-premium-title {
        margin-bottom: 24px;
        font-size: clamp(31px, 9.9vw, 42px);
        line-height: 1;
        letter-spacing: -.07em;
    }

    .home-page .hero-title-line {
        white-space: nowrap;
    }

    .home-page .hero-premium-subtitle {
        margin-bottom: 30px;
        font-size: 16px;
        line-height: 1.58;
    }

    .home-page .hero-premium-cta {
        width: 100%;
        max-width: 360px;
    }

    .home-page .hero-premium-cta a {
        width: 100%;
    }

    .home-page .hero-cascade-visual {
        min-height: 290px;
    }

    .home-page .hero-cascade-system {
        width: min(78vw, 300px);
        height: min(78vw, 300px);
    }

    .home-page .hero-cascade-center-inner {
        width: 84px;
        height: 84px;
    }

    .home-page .cascade-label {
        padding: 3px 5px;
        font-size: 8px;
        letter-spacing: .08em;
    }

    .home-page .showcase-section {
        padding: 66px 0 116px;
        background:
            #070d1c;
    }

    .home-page .showcase-intro {
        margin-bottom: 34px;
    }

    .home-page .showcase-intro-text {
        font-size: 26px;
    }

    .home-page .showcase-section .hero-lifecycle-ribbon {
        padding: 10px;
        border-radius:  0;
    }

    .home-page .showcase-section .lifecycle-ribbon-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .home-page .showcase-section .lifecycle-phase {
        width: 100%;
        padding: 12px;
    }

    .home-page .showcase-section .lifecycle-phase-apps {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .home-page .showcase-section .lifecycle-app-chip {
        flex: 1 0 56px;
        min-width: 56px;
    }

    .home-page .showcase-section .showcase-rich {
        margin-top: 52px;
    }

    .home-page .showcase-rich-content {
        padding: 34px 25px 38px;
    }

    .home-page .showcase-rich-title {
        font-size: 25px;
    }

    .home-page .showcase-rich-visual {
        min-height: 310px;
        padding: 22px 16px;
    }

    .home-page .showcase-rich-actions {
        align-items: stretch;
    }

    .home-page .showcase-rich-cta-primary {
        justify-content: center;
        width: 100%;
    }

    .home-page .showcase-rich-cta-link {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero-premium-content,
    .home-page .hero-cascade-visual,
    .home-page .hero-cascade-system {
        transform: none !important;
        transition: none !important;
    }

    .home-page .showcase-rich-image {
        animation: none !important;
    }
}