/* =====================================
   SHARED HOME SECTIONS
===================================== */

.home-section-shell {
    width: min(
        calc(100% - 80px),
        1320px
    );

    margin: 0 auto;
}


.section-heading {
    max-width: 820px;
}


.section-heading-left {
    text-align: left;
}


.section-heading h2 {
    margin: 0;

    font-size:
        clamp(
            42px,
            4.7vw,
            68px
        );

    line-height: 1.04;

    letter-spacing: -2.8px;

    font-weight: 500;
}


.section-heading h2 span {
    color: #cbb7e4;
}


.section-heading > p:last-child {
    max-width: 720px;

    margin: 24px 0 0;

    color: #a99faf;

    font-size: 18px;

    line-height: 1.65;
}


/* =====================================
   WORKSPACE OVERVIEW
===================================== */

.workspace-overview {
    position: relative;

    overflow: hidden;

    padding: 145px 0 155px;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(111, 59, 164, 0.13),
            transparent 27%
        ),
        #09070f;
}


.capability-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 72px;
}


.capability-card {
    position: relative;

    min-height: 390px;

    padding: 34px;

    overflow: hidden;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.044),
            rgba(255, 255, 255, 0.016)
        );

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.16);
}


.capability-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(152, 87, 213, 0.15),
            transparent 68%
        );

    pointer-events: none;
}


.capability-card-large {
    grid-column: 1 / -1;

    min-height: 550px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(500px, 1.18fr);

    gap: 70px;

    align-items: center;

    padding: 54px;
}


.capability-number {
    display: block;

    margin-bottom: 27px;

    color: #65566f;

    font-size: 11px;

    letter-spacing: 1.5px;
}


.capability-label {
    margin: 0 0 14px;

    color: #b896dc;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}


.capability-card h3 {
    max-width: 490px;

    margin: 0;

    font-size: 30px;

    line-height: 1.12;

    letter-spacing: -1.1px;

    font-weight: 550;
}


.capability-card-large h3 {
    font-size:
        clamp(
            36px,
            3.7vw,
            53px
        );

    letter-spacing: -2px;
}


.capability-card p:not(.capability-label) {
    margin:
        20px 0
        0;

    color: #aaa0b1;

    font-size: 15px;

    line-height: 1.65;
}


.capability-card-large
.capability-copy > p:not(.capability-label) {
    max-width: 520px;

    font-size: 17px;
}


.feature-list {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px 22px;

    margin:
        31px 0
        0;

    padding: 0;

    list-style: none;
}


.feature-list li {
    position: relative;

    padding-left: 18px;

    color: #c5bbc9;

    font-size: 13px;
}


.feature-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 7px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #9560ce;

    box-shadow:
        0 0 9px
        rgba(149, 96, 206, 0.65);
}


.mini-feature-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 30px;
}


.mini-feature-tags span {
    padding:
        8px 10px;

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

    border-radius: 8px;

    background:
        rgba(139, 78, 190, 0.08);

    color: #ad9bbd;

    font-size: 11px;
}


.text-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 28px;

    color: #c29be9;

    font-size: 13px;

    font-weight: 600;
}


.text-link span {
    transition:
        transform 0.2s ease;
}


.text-link:hover span {
    transform:
        translateX(4px);
}


/* =====================================
   CASE PREVIEW
===================================== */

.case-preview {
    position: relative;

    padding: 28px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(23, 17, 30, 0.93),
            rgba(14, 10, 19, 0.88)
        );

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, 0.42);
}


.case-preview::before {
    content: "";

    position: absolute;

    inset: -40px;

    z-index: -1;

    background:
        radial-gradient(
            circle,
            rgba(127, 63, 183, 0.18),
            transparent 65%
        );

    filter: blur(20px);
}


.case-preview-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.case-preview-header strong {
    display: block;

    margin-top: 5px;

    font-size: 23px;
}


.micro-label {
    display: block;

    color: #8c72a3;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.case-status {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(156, 97, 205, 0.18);

    border-radius: 20px;

    background:
        rgba(121, 69, 166, 0.09);

    color: #bda2d4;

    font-size: 10px;
}


.case-preview-tabs {
    display: flex;

    gap: 23px;

    margin:
        27px 0
        24px;

    padding-bottom: 13px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.case-preview-tabs span {
    color: #665d6e;

    font-size: 10px;
}


.case-preview-tabs span.active {
    position: relative;

    color: #c6afd9;
}


.case-preview-tabs span.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -14px;

    height: 1px;

    background: #9560cf;
}


.case-preview-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.case-panel {
    min-height: 128px;

    padding: 18px;

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

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.018);
}


.case-panel-wide {
    grid-column:
        1 / -1;
}


.case-panel p {
    margin:
        11px 0
        0 !important;

    color: #a49ba8 !important;

    font-size: 12px !important;

    line-height: 1.55 !important;
}


.signal-header {
    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    align-items: center;
}


.signal-header strong {
    color: #af8bd0;

    font-size: 11px;
}


.signal-track {
    height: 5px;

    margin-top: 16px;

    overflow: hidden;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.05);
}


.signal-track span {
    display: block;

    width: 72%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #653c98,
            #aa67df
        );
}


.section-action {
    margin-top: 40px;
}


/* =====================================
   CONTINUITY
===================================== */

.continuity-section {
    position: relative;

    overflow: hidden;

    padding:
        155px 0
        170px;

    background:
        linear-gradient(
            180deg,
            #0b0811,
            #100918
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.continuity-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    right: -180px;
    top: 70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(119, 65, 177, 0.14),
            transparent 67%
        );

    pointer-events: none;
}


.continuity-shell {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(480px, 1.1fr);

    align-items: center;

    gap: 100px;
}


.continuity-copy {
    max-width: 610px;
}


.continuity-copy h2 {
    margin: 0;

    font-size:
        clamp(
            43px,
            4.7vw,
            67px
        );

    line-height: 1.03;

    letter-spacing: -2.6px;

    font-weight: 500;
}


.continuity-copy h2 span {
    display: block;

    color: #c6addd;
}


.continuity-intro {
    margin-top: 30px !important;

    color: #d0c6d5 !important;

    font-size: 20px !important;
}


.continuity-copy > p {
    margin:
        18px 0
        0;

    color: #968d9c;

    font-size: 16px;

    line-height: 1.7;
}


.continuity-points {
    display: grid;

    gap: 15px;

    margin-top: 35px;
}


.continuity-points div {
    display: flex;

    align-items: center;

    gap: 13px;
}


.continuity-points span {
    width: 6px;
    min-width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #9a61d5;

    box-shadow:
        0 0 11px
        rgba(154, 97, 213, 0.65);
}


.continuity-points p {
    margin: 0;

    color: #aaa0b0;

    font-size: 13px;
}


/* =====================================
   PROGRESS VISUAL
===================================== */

.progress-visual {
    position: relative;

    max-width: 650px;

    margin-left: auto;
}


.progress-window {
    min-height: 525px;

    padding: 34px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(34, 25, 43, 0.91),
            rgba(15, 11, 20, 0.87)
        );

    box-shadow:
        0 40px 110px
        rgba(0, 0, 0, 0.38);
}


.progress-window-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.progress-window-top strong {
    display: block;

    margin-top: 6px;

    font-size: 21px;
}


.trend-badge {
    padding:
        7px 10px;

    border-radius: 20px;

    background:
        rgba(87, 159, 115, 0.09);

    color: #85b895;

    font-size: 10px;
}


.progress-score {
    display: flex;

    align-items: flex-end;

    gap: 10px;

    margin-top: 34px;
}


.progress-score strong {
    font-size: 55px;

    line-height: 0.9;

    font-weight: 500;

    color: #d4b4f2;
}


.progress-score span {
    padding-bottom: 5px;

    color: #716777;

    font-size: 10px;
}


.chart-area {
    position: relative;

    height: 205px;

    margin-top: 35px;
}


.chart-grid-line {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.045);
}


.chart-grid-1 {
    top: 20%;
}


.chart-grid-2 {
    top: 50%;
}


.chart-grid-3 {
    top: 80%;
}


.chart-area svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
}


.chart-labels {
    display: flex;

    justify-content:
        space-between;

    margin-top: 5px;

    color: #5f5764;

    font-size: 9px;
}


.progress-insight {
    display: flex;

    gap: 14px;

    margin-top: 27px;

    padding: 17px;

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

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.02);
}


.insight-orb {
    width: 28px;
    min-width: 28px;
    height: 28px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 32%,
            #b788e1,
            #70429d 42%,
            #25132f 74%
        );

    box-shadow:
        0 0 18px
        rgba(143, 78, 201, 0.28);
}


.progress-insight p {
    margin:
        6px 0
        0;

    color: #9e94a4;

    font-size: 11px;

    line-height: 1.5;
}


.floating-checkin {
    position: absolute;

    right: -38px;
    bottom: 55px;

    min-width: 180px;

    padding: 18px;

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

    border-radius: 15px;

    background:
        rgba(20, 15, 26, 0.94);

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(18px);
}


.floating-checkin strong {
    display: block;

    margin-top: 7px;

    font-size: 13px;
}


.floating-checkin p {
    margin:
        5px 0
        0;

    color: #716876;

    font-size: 10px;
}


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

@media (max-width: 1100px) {

    .home-section-shell {
        width:
            calc(100% - 48px);
    }


    .capability-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .capability-card-large {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .capability-card:last-child {
        grid-column:
            1 / -1;
    }


    .continuity-shell {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .progress-visual {
        width: 100%;

        max-width: 720px;

        margin:
            0 auto;
    }

}


@media (max-width: 720px) {

    .home-section-shell {
        width:
            calc(100% - 36px);
    }


    .workspace-overview {
        padding:
            105px 0
            115px;
    }


    .capability-grid {
        grid-template-columns: 1fr;

        margin-top: 48px;
    }


    .capability-card,
    .capability-card-large {
        grid-column: auto;

        min-height: auto;

        padding: 27px;
    }


    .capability-card-large {
        gap: 42px;
    }


    .feature-list {
        grid-template-columns: 1fr;
    }


    .case-preview {
        padding: 20px;
    }


    .case-preview-tabs {
        gap: 14px;

        overflow-x: auto;
    }


    .case-preview-grid {
        grid-template-columns: 1fr;
    }


    .case-panel-wide {
        grid-column: auto;
    }


    .continuity-section {
        padding:
            110px 0
            125px;
    }


    .continuity-shell {
        gap: 55px;
    }


    .progress-window {
        min-height: auto;

        padding: 24px;
    }


    .floating-checkin {
        position: relative;

        right: auto;
        bottom: auto;

        width: 190px;

        margin:
            -12px 20px
            0 auto;
    }

}


@media (max-width: 470px) {

    .section-heading h2,
    .continuity-copy h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .capability-card h3 {
        font-size: 27px;
    }


    .capability-card-large h3 {
        font-size: 36px;
    }


    .progress-score strong {
        font-size: 48px;
    }


    .progress-window-top {
        align-items: flex-start;
    }

}
/* =====================================
   ELAH ECOSYSTEM
===================================== */

.ecosystem-section {
    position: relative;

    overflow: hidden;

    padding:
        155px 0
        165px;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(106, 54, 158, 0.11),
            transparent 42%
        ),
        #09070f;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.ecosystem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.72fr);

    gap: 90px;

    align-items: end;
}


.ecosystem-intro {
    padding-bottom: 5px;
}


.ecosystem-intro p {
    margin:
        0 0
        18px;

    color: #9f95a6;

    font-size: 16px;

    line-height: 1.7;
}


.ecosystem-intro p:last-child {
    margin-bottom: 0;
}


/* =====================================
   ACTIVITY DECK VISUAL
===================================== */

.ecosystem-visual {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(190px, 0.55fr)
        minmax(500px, 1.4fr)
        minmax(190px, 0.55fr);

    gap: 24px;

    align-items: center;

    margin-top: 85px;
}


.connector-column {
    display: grid;

    gap: 18px;
}


.connector-card {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 105px;

    padding: 18px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.014)
        );

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.18);
}


.connector-icon {
    width: 42px;
    min-width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(178, 114, 235, 0.24);

    border-radius: 11px;

    background:
        radial-gradient(
            circle at 38% 30%,
            rgba(186, 127, 239, 0.22),
            rgba(91, 48, 132, 0.10)
        );

    color: #c9a7e7;

    font-size: 13px;

    font-weight: 700;
}


.connector-label {
    display: block;

    margin-bottom: 4px;

    color: #695b74;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.connector-card strong {
    display: block;

    color: #d8d0dc;

    font-size: 13px;

    font-weight: 550;
}


.connector-card p {
    margin:
        5px 0
        0;

    color: #746a7a;

    font-size: 10px;

    line-height: 1.4;
}


/* =====================================
   ACTIVITY DECK
===================================== */

.activity-deck {
    position: relative;

    min-height: 620px;

    padding: 32px;

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

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 23, 39, 0.95),
            rgba(13, 9, 18, 0.93)
        );

    box-shadow:
        0 45px 120px
        rgba(0, 0, 0, 0.44);

    overflow: hidden;
}


.activity-deck::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: 50%;
    top: -290px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(148, 84, 207, 0.20),
            transparent 67%
        );

    pointer-events: none;
}


.activity-deck-top {
    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;
}


.activity-deck-top h3 {
    margin:
        6px 0
        0;

    font-size: 28px;

    letter-spacing: -0.7px;

    font-weight: 550;
}


.activity-live {
    padding:
        7px 11px;

    border:
        1px solid
        rgba(91, 170, 121, 0.15);

    border-radius: 20px;

    background:
        rgba(71, 147, 100, 0.08);

    color: #82b491;

    font-size: 10px;
}


.activity-tabs {
    display: flex;

    gap: 24px;

    margin-top: 31px;

    padding-bottom: 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    overflow-x: auto;
}


.activity-tabs span {
    position: relative;

    white-space: nowrap;

    color: #6f6575;

    font-size: 11px;
}


.activity-tabs span.active {
    color: #c8b4d9;
}


.activity-tabs span.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -15px;

    height: 1px;

    background: #9a61d1;
}


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

.activity-timeline {
    margin-top: 26px;
}


.activity-item {
    display: grid;

    grid-template-columns:
        52px
        16px
        1fr;

    gap: 14px;

    min-height: 94px;
}


.activity-time {
    padding-top: 4px;

    color: #665d6c;

    font-size: 10px;

    text-align: right;
}


.activity-marker {
    position: relative;

    width: 8px;
    height: 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: #9a61d7;

    box-shadow:
        0 0 13px
        rgba(154, 97, 215, 0.48);
}


.activity-marker::after {
    content: "";

    position: absolute;

    left: 3px;
    top: 11px;

    width: 1px;
    height: 77px;

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


.activity-item:last-child
.activity-marker::after {
    display: none;
}


.activity-content {
    padding-bottom: 22px;
}


.activity-type {
    display: block;

    color: #826c96;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.activity-content strong {
    display: block;

    margin-top: 5px;

    color: #d2c9d7;

    font-size: 13px;
}


.activity-content p {
    max-width: 370px;

    margin:
        5px 0
        0;

    color: #817785;

    font-size: 11px;

    line-height: 1.5;
}


/* =====================================
   ACTIVITY FOOTER
===================================== */

.activity-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 12px;

    padding: 19px;

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

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.018);
}


.activity-footer p {
    max-width: 340px;

    margin:
        6px 0
        0;

    color: #8e8493;

    font-size: 11px;

    line-height: 1.5;
}


.activity-orb {
    width: 37px;
    min-width: 37px;
    height: 37px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #bd91e4,
            #764aa1 40%,
            #27162f 73%
        );

    box-shadow:
        0 0 22px
        rgba(145, 79, 198, 0.28);
}


/* =====================================
   ECOSYSTEM BOTTOM
===================================== */

.ecosystem-bottom {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.65fr)
        minmax(0, 1.35fr);

    gap: 80px;

    align-items: start;

    margin-top: 75px;
}


.ecosystem-statement {
    display: flex;

    gap: 16px;

    align-items: flex-start;
}


.ecosystem-line {
    width: 34px;
    min-width: 34px;
    height: 1px;

    margin-top: 11px;

    background: #9361c2;
}


.ecosystem-statement p {
    margin: 0;

    color: #c6b9cf;

    font-size: 16px;

    line-height: 1.55;
}


.ecosystem-benefits {
    display: grid;

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

    gap: 32px;
}


.ecosystem-benefits > div {
    padding-top: 17px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.075);
}


.ecosystem-benefits span {
    display: block;

    margin-bottom: 17px;

    color: #615568;

    font-size: 9px;

    letter-spacing: 1.2px;
}


.ecosystem-benefits strong {
    display: block;

    color: #d3cbd7;

    font-size: 14px;
}


.ecosystem-benefits p {
    margin:
        10px 0
        0;

    color: #817783;

    font-size: 12px;

    line-height: 1.6;
}


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

@media (max-width: 1180px) {

    .ecosystem-heading {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .ecosystem-intro {
        max-width: 760px;
    }


    .ecosystem-visual {
        grid-template-columns:
            minmax(150px, 0.45fr)
            minmax(450px, 1.25fr)
            minmax(150px, 0.45fr);

        gap: 16px;
    }


    .connector-card {
        padding: 14px;
    }


    .connector-icon {
        width: 35px;
        min-width: 35px;
        height: 35px;
    }

}


@media (max-width: 960px) {

    .ecosystem-visual {
        grid-template-columns: 1fr;

        max-width: 760px;

        margin:
            70px auto
            0;
    }


    .activity-deck {
        order: 1;
    }


    .connector-column {
        order: 2;

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


    .connector-card {
        min-height: 100px;
    }


    .ecosystem-bottom {
        grid-template-columns: 1fr;

        gap: 50px;
    }

}


@media (max-width: 720px) {

    .ecosystem-section {
        padding:
            110px 0
            120px;
    }


    .ecosystem-visual {
        margin-top: 50px;
    }


    .activity-deck {
        min-height: auto;

        padding: 24px;
    }


    .connector-column {
        grid-template-columns:
            1fr 1fr;
    }


    .ecosystem-benefits {
        grid-template-columns: 1fr;

        gap: 26px;
    }


    .ecosystem-bottom {
        margin-top: 55px;
    }

}


@media (max-width: 470px) {

    .connector-column {
        grid-template-columns: 1fr;
    }


    .activity-item {
        grid-template-columns:
            40px
            14px
            1fr;

        gap: 10px;
    }


    .activity-footer {
        align-items: flex-start;
    }


    .activity-deck-top {
        align-items: flex-start;
    }
    
}

/* =====================================
   AI INTAKE SHOWCASE
===================================== */

.intake-showcase {
    position: relative;

    overflow: hidden;

    padding:
        165px 0
        175px;

    background:
        linear-gradient(
            180deg,
            #0d0914,
            #12091b
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.intake-showcase-glow {
    position: absolute;

    width: 760px;
    height: 760px;

    left: -220px;
    top: 40px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(127, 68, 184, 0.15),
            transparent 68%
        );

    pointer-events: none;
}


.intake-showcase-shell {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(500px, 1.1fr)
        minmax(0, 0.9fr);

    gap: 105px;

    align-items: center;
}


/* =====================================
   INTAKE VISUAL
===================================== */

.intake-visual {
    position: relative;

    min-height: 650px;
}


.intake-window {
    position: relative;

    width: 90%;

    min-height: 570px;

    padding: 32px;

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

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 23, 39, 0.96),
            rgba(14, 10, 19, 0.93)
        );

    box-shadow:
        0 45px 120px
        rgba(0, 0, 0, 0.42);
}


.intake-window-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.intake-brand {
    display: flex;

    align-items: center;

    gap: 13px;
}


.intake-brand strong {
    display: block;

    margin-top: 5px;

    font-size: 15px;

    font-weight: 550;
}


.intake-orb {
    width: 42px;
    min-width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 30%,
            #c098e7,
            #74459d 41%,
            #26142e 73%
        );

    box-shadow:
        0 0 28px
        rgba(149, 82, 204, 0.32);
}


.intake-status {
    padding:
        7px 11px;

    border:
        1px solid
        rgba(92, 170, 119, 0.15);

    border-radius: 20px;

    background:
        rgba(72, 151, 101, 0.07);

    color: #84b392;

    font-size: 10px;
}


.conversation-stage {
    margin-top: 50px;
}


.conversation-stage-label {
    display: block;

    margin-bottom: 17px;

    color: #8e72a7;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.conversation-message {
    max-width: 86%;

    padding: 20px;

    border:
        1px solid
        rgba(163, 101, 213, 0.13);

    border-radius:
        15px
        15px
        15px
        4px;

    background:
        rgba(111, 62, 154, 0.09);
}


.conversation-message p,
.conversation-response p {
    margin: 0;

    color: #c6bbc9;

    font-size: 14px;

    line-height: 1.65;
}


.conversation-response {
    max-width: 84%;

    margin:
        24px 0
        0 auto;

    padding: 20px;

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

    border-radius:
        15px
        15px
        4px
        15px;

    background:
        rgba(255, 255, 255, 0.025);
}


.conversation-response > span {
    display: block;

    margin-bottom: 9px;

    color: #675d6d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.intake-signals {
    display: grid;

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

    gap: 10px;

    margin-top: 42px;
}


.intake-signals > div {
    min-height: 92px;

    padding: 16px;

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

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.018);
}


.intake-signals strong {
    display: block;

    margin-top: 8px;

    color: #bcb1c2;

    font-size: 11px;

    line-height: 1.45;

    font-weight: 500;
}


/* =====================================
   ANALYSIS FLOATING CARD
===================================== */

.intake-analysis-card {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 275px;

    padding: 22px;

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

    border-radius: 17px;

    background:
        rgba(20, 15, 26, 0.94);

    box-shadow:
        0 28px 75px
        rgba(0, 0, 0, 0.38);

    backdrop-filter:
        blur(18px);
}


.intake-analysis-card h4 {
    margin:
        8px 0
        19px;

    font-size: 16px;

    font-weight: 550;
}


.analysis-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        11px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.05);

    color: #7d7382;

    font-size: 10px;
}


.analysis-row strong {
    color: #b29ac5;

    font-weight: 550;
}


/* =====================================
   INTAKE COPY
===================================== */

.intake-copy h2 {
    margin: 0;

    font-size:
        clamp(
            44px,
            4.7vw,
            68px
        );

    line-height: 1.03;

    letter-spacing: -2.8px;

    font-weight: 500;
}


.intake-copy h2 span {
    display: block;

    color: #c7afe0;
}


.intake-copy > p {
    color: #948a9a;

    font-size: 16px;

    line-height: 1.7;
}


.intake-copy-lead {
    margin-top: 31px !important;

    color: #cbc1d0 !important;

    font-size: 21px !important;
}


.intake-feature-list {
    display: grid;

    gap: 24px;

    margin-top: 38px;
}


.intake-feature-list > div {
    display: grid;

    grid-template-columns:
        42px
        1fr;

    gap: 18px;

    align-items: start;

    padding-top: 24px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.065);
}


.feature-index {
    color: #786982;

    font-size: 13px;

    line-height: 1.5;

    letter-spacing: 1.4px;
}


.intake-feature-list strong {
    display: block;

    color: #d8cfdd;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 550;
}


.intake-feature-list p {
    margin-top: 10px;

    color: #a79baa;

    font-size: 18px;

    line-height: 1.65;
}


@media (max-width: 768px) {

    .intake-feature-list {
        gap: 20px;
    }


    .intake-feature-list > div {
        grid-template-columns:
            34px
            1fr;

        gap: 14px;

        padding-top: 22px;
    }


    .feature-index {
        font-size: 12px;
    }


    .intake-feature-list strong {
        font-size: 19px;
    }


    .intake-feature-list p {
        font-size: 17px;

        line-height: 1.6;
    }
}


.intake-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 37px;
}


/* =====================================
   PRINCIPLES SECTION
===================================== */

.principles-section {
    padding:
        145px 0
        155px;

    background: #09070f;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.principles-heading {
    max-width: 920px;
}


.principles-heading h2 {
    margin: 0;

    font-size:
        clamp(
            43px,
            4.7vw,
            68px
        );

    line-height: 1.04;

    letter-spacing: -2.7px;

    font-weight: 500;
}


.principles-heading h2 span {
    display: block;

    color: #c5aedb;
}


.principles-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 70px;
}


.principles-grid article {
    min-height: 310px;

    padding: 32px;

    border-top:
        1px solid
        rgba(164, 101, 219, 0.32);

    background:
        linear-gradient(
            180deg,
            rgba(115, 62, 160, 0.045),
            transparent
        );
}


.principle-number {
    display: block;

    margin-bottom: 50px;

    color: #615568;

    font-size: 10px;

    letter-spacing: 1.4px;
}


.principles-grid h3 {
    margin: 0;

    color: #d6ccd9;

    font-size: 24px;

    line-height: 1.2;

    letter-spacing: -0.6px;

    font-weight: 550;
}


.principles-grid p {
    margin:
        18px 0
        0;

    color: #857b8a;

    font-size: 13px;

    line-height: 1.7;
}


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

@media (max-width: 1100px) {

    .intake-showcase-shell {
        grid-template-columns: 1fr;

        gap: 80px;
    }


    .intake-visual {
        max-width: 760px;

        width: 100%;

        margin: 0 auto;

        order: 2;
    }


    .intake-copy {
        max-width: 760px;
    }

}


@media (max-width: 720px) {

    .intake-showcase {
        padding:
            110px 0
            125px;
    }


    .intake-showcase-shell {
        gap: 60px;
    }


    .intake-visual {
        min-height: auto;
    }


    .intake-window {
        width: 100%;

        min-height: auto;

        padding: 24px;
    }


    .intake-signals {
        grid-template-columns: 1fr;
    }


    .intake-analysis-card {
        position: relative;

        right: auto;
        bottom: auto;

        width: 82%;

        margin:
            -15px 18px
            0 auto;
    }


    .intake-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .principles-section {
        padding:
            105px 0
            115px;
    }


    .principles-grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }


    .principles-grid article {
        min-height: auto;

        padding:
            28px 0;
    }


    .principle-number {
        margin-bottom: 28px;
    }

}


@media (max-width: 470px) {

    .intake-copy h2,
    .principles-heading h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .intake-window-top {
        align-items: flex-start;
    }


    .conversation-message,
    .conversation-response {
        max-width: 94%;
    }


    .intake-analysis-card {
        width: 92%;
    }

}

/* =====================================
   AUDIENCE SECTION
===================================== */

.audience-section {
    position: relative;

    padding:
        150px 0
        165px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(108, 55, 161, 0.09),
            transparent 31%
        ),
        #09070f;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.audience-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.62fr);

    align-items: end;

    gap: 90px;
}


.audience-heading-copy {
    max-width: 480px;

    padding-bottom: 4px;
}


.audience-heading-copy p {
    margin: 0;

    color: #948a99;

    font-size: 16px;

    line-height: 1.7;
}


.audience-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 75px;
}


.audience-card {
    position: relative;

    min-height: 470px;

    padding: 34px;

    overflow: hidden;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.038),
            rgba(255, 255, 255, 0.014)
        );

    box-shadow:
        0 25px 75px
        rgba(0, 0, 0, 0.14);
}


.audience-primary {
    border-color:
        rgba(154, 96, 211, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(111, 61, 158, 0.09),
            rgba(255, 255, 255, 0.014)
        );
}


.audience-card::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -100px;
    top: -110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(155, 94, 214, 0.12),
            transparent 68%
        );

    pointer-events: none;
}


.audience-card-top {
    min-height: 32px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 25px;
}


.audience-index {
    color: #5f5366;

    font-size: 10px;

    letter-spacing: 1.4px;
}


.audience-badge {
    padding:
        6px 9px;

    border:
        1px solid
        rgba(163, 103, 218, 0.18);

    border-radius: 20px;

    background:
        rgba(133, 75, 180, 0.07);

    color: #aa89c4;

    font-size: 8px;

    letter-spacing: 1.1px;
}


.audience-icon {
    position: relative;

    width: 54px;
    height: 54px;

    margin-top: 45px;

    border:
        1px solid
        rgba(168, 105, 224, 0.19);

    border-radius: 14px;

    background:
        rgba(105, 57, 148, 0.07);
}


.audience-icon span {
    position: absolute;

    width: 21px;
    height: 21px;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #bd91e1,
            #75459e 43%,
            #26142f 75%
        );

    box-shadow:
        0 0 18px
        rgba(145, 78, 199, 0.28);
}


.audience-card h3 {
    margin:
        31px 0
        0;

    color: #d7cedb;

    font-size: 27px;

    line-height: 1.15;

    letter-spacing: -0.8px;

    font-weight: 550;
}


.audience-card > p {
    margin:
        19px 0
        0;

    color: #8f8594;

    font-size: 14px;

    line-height: 1.7;
}


.audience-features {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 34px;
}


.audience-features span {
    padding:
        7px 10px;

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

    border-radius: 8px;

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

    color: #887c90;

    font-size: 10px;
}


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

.closing-cta {
    position: relative;

    min-height: 780px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 85%,
            rgba(106, 44, 164, 0.20),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #0b0711,
            #100419
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.closing-cta-shell {
    position: relative;
    z-index: 5;

    width: min(
        calc(100% - 80px),
        1180px
    );

    margin: 0 auto;

    padding:
        135px 0
        125px;

    text-align: center;
}


.closing-cta-brand {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 35px;
}


.closing-cta-brand > span {
    color: #9378ac;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.closing-cta-logo {
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 28px;
}

@media (max-width: 768px) {
    .closing-cta-logo {
        width: 170px;
        margin-bottom: 24px;
    }
}

.closing-orb {
    width: 35px;
    height: 35px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 29%,
            #c096e7,
            #75469f 42%,
            #26152e 74%
        );

    box-shadow:
        0 0 27px
        rgba(148, 80, 201, 0.35);
}


.closing-eyebrow {
    margin: 0;

    color: #74627f;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.closing-cta h2 {
    max-width: 920px;

    margin:
        24px auto
        0;

    font-size:
        clamp(
            55px,
            7vw,
            94px
        );

    line-height: 0.98;

    letter-spacing: -4px;

    font-weight: 500;
}


.closing-cta h2 span {
    display: block;

    color: #c8afe1;
}


.closing-copy {
    max-width: 650px;

    margin:
        30px auto
        0;

    color: #978b9e;

    font-size: 17px;

    line-height: 1.7;
}


.closing-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 37px;
}


.closing-options {
    display: grid;

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

    gap: 12px;

    max-width: 920px;

    margin:
        76px auto
        0;
}


.closing-options a {
    min-height: 155px;

    padding: 24px;

    text-align: left;

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

    border-radius: 15px;

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

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.closing-options a:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(164, 100, 218, 0.28);

    background:
        rgba(103, 57, 144, 0.055);
}


.closing-options span {
    display: block;

    margin-bottom: 14px;

    color: #765e88;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.closing-options strong {
    display: block;

    color: #d3cad8;

    font-size: 17px;

    font-weight: 550;
}


.closing-options p {
    margin:
        10px 0
        0;

    color: #817687;

    font-size: 11px;

    line-height: 1.6;
}


/* =====================================
   CLOSING ATMOSPHERE
===================================== */

.closing-cta-glow {
    position: absolute;

    left: 50%;
    bottom: -255px;

    width: 1050px;
    height: 520px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(176, 86, 255, 0.28),
            rgba(90, 31, 142, 0.12) 37%,
            transparent 70%
        );

    filter: blur(7px);
}


.closing-cta-orbit {
    position: absolute;

    left: 50%;
    bottom: -350px;

    border:
        1px solid
        rgba(156, 76, 222, 0.13);

    border-radius: 50%;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 36px
        rgba(145, 69, 210, 0.05);
}


.orbit-one {
    width: 1500px;
    height: 700px;
}


.orbit-two {
    width: 1850px;
    height: 880px;

    bottom: -470px;

    opacity: 0.6;
}


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

@media (max-width: 1000px) {

    .audience-heading {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .audience-heading-copy {
        max-width: 700px;
    }


    .audience-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .audience-primary {
        grid-column:
            1 / -1;
    }


    .closing-options {
        grid-template-columns:
            1fr 1fr;
    }


    .closing-options a:last-child {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 720px) {

    .audience-section {
        padding:
            105px 0
            120px;
    }


    .audience-grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }


    .audience-primary {
        grid-column: auto;
    }


    .audience-card {
        min-height: auto;

        padding: 28px;
    }


    .audience-icon {
        margin-top: 34px;
    }


    .closing-cta {
        min-height: auto;
    }


    .closing-cta-shell {
        width:
            calc(100% - 36px);

        padding:
            110px 0
            100px;
    }


    .closing-cta h2 {
        font-size:
            clamp(
                50px,
                14vw,
                70px
            );

        letter-spacing: -3px;
    }


    .closing-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .closing-actions .button {
        width: 100%;
    }


    .closing-options {
        grid-template-columns: 1fr;

        margin-top: 60px;
    }


    .closing-options a:last-child {
        grid-column: auto;
    }

}


@media (max-width: 470px) {

    .closing-cta h2 {
        font-size: 48px;

        letter-spacing: -2.3px;
    }


    .closing-copy {
        font-size: 15px;
    }


    .closing-options a {
        min-height: auto;
    }

}

/* =====================================
   PRIVACY FIRST
===================================== */

.privacy-section {
    position: relative;

    overflow: hidden;

    padding:
        155px 0
        165px;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(92, 61, 142, 0.13),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #0c0912,
            #09070f
        );

    border-top:
        1px solid
        rgba(255, 255, 255, 0.035);
}


.privacy-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -220px;
    top: 60px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(126, 78, 176, 0.15),
            transparent 68%
        );

    pointer-events: none;
}


.privacy-shell {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(480px, 1.12fr);

    gap: 100px;

    align-items: center;
}


.privacy-copy {
    max-width: 610px;
}


.privacy-copy h2 {
    margin: 0;

    font-size:
        clamp(
            44px,
            4.8vw,
            68px
        );

    line-height: 1.03;

    letter-spacing: -2.7px;

    font-weight: 500;
}


.privacy-copy h2 span {
    display: block;

    color: #c7afe0;
}


.privacy-copy > p {
    margin:
        19px 0
        0;

    color: #948a9a;

    font-size: 16px;

    line-height: 1.7;
}


.privacy-copy .privacy-lead {
    margin-top: 31px;

    color: #cec4d2;

    font-size: 20px;

    line-height: 1.65;
}


.privacy-link {
    margin-top: 33px;
}


/* =====================================
   PRIVACY VISUAL
===================================== */

.privacy-visual {
    position: relative;

    min-height: 570px;
}


.privacy-card-main {
    position: relative;

    width: 88%;

    min-height: 490px;

    padding: 31px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 23, 38, 0.95),
            rgba(14, 10, 19, 0.91)
        );

    box-shadow:
        0 40px 110px
        rgba(0, 0, 0, 0.38);
}


.privacy-card-header {
    display: flex;

    align-items: center;

    gap: 15px;
}


.privacy-card-header strong {
    display: block;

    margin-top: 5px;

    color: #d2c9d6;

    font-size: 16px;

    font-weight: 550;
}


.privacy-shield {
    position: relative;

    width: 45px;
    min-width: 45px;
    height: 45px;

    border:
        1px solid
        rgba(154, 99, 207, 0.18);

    border-radius: 13px;

    background:
        rgba(117, 69, 158, 0.08);
}


.privacy-shield span {
    position: absolute;

    width: 17px;
    height: 20px;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid #b891d9;

    border-radius:
        8px
        8px
        10px
        10px;
}


.privacy-identity {
    margin-top: 46px;

    padding: 23px;

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

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.018);
}


.privacy-identity strong {
    display: block;

    margin-top: 8px;

    color: #d4c9da;

    font-size: 24px;

    font-weight: 550;
}


.privacy-identity p {
    margin:
        10px 0
        0;

    color: #817785;

    font-size: 12px;

    line-height: 1.55;
}


.privacy-divider {
    height: 1px;

    margin:
        27px 0;

    background:
        rgba(255, 255, 255, 0.055);
}


.privacy-status-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px;
}


.privacy-status-grid > div {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-height: 85px;

    padding: 16px;

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

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.014);
}


.privacy-status-dot {
    width: 7px;
    min-width: 7px;
    height: 7px;

    margin-top: 5px;

    border-radius: 50%;

    background: #75ad88;

    box-shadow:
        0 0 10px
        rgba(117, 173, 136, 0.35);
}


.privacy-status-grid strong {
    display: block;

    color: #bcb1c1;

    font-size: 11px;

    font-weight: 550;
}


.privacy-status-grid p {
    margin:
        5px 0
        0;

    color: #756c7a;

    font-size: 10px;

    line-height: 1.45;
}


/* =====================================
   PRIVACY FLOATING CARD
===================================== */

.privacy-floating-card {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 280px;

    padding: 23px;

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

    border-radius: 17px;

    background:
        rgba(19, 14, 25, 0.95);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.34);

    backdrop-filter:
        blur(18px);
}


.privacy-floating-card strong {
    display: block;

    margin-top: 9px;

    color: #d3c7d9;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 550;
}


.privacy-floating-card p {
    margin:
        13px 0
        0;

    color: #817586;

    font-size: 11px;

    line-height: 1.6;
}


/* =====================================
   PRIVACY PRINCIPLES
===================================== */

.privacy-principles {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 20px;

    margin-top: 85px;
}


.privacy-principles article {
    padding-top: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);
}


.privacy-principles span {
    display: block;

    margin-bottom: 22px;

    color: #62566a;

    font-size: 9px;

    letter-spacing: 1.2px;
}


.privacy-principles strong {
    display: block;

    color: #cfc5d3;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 550;
}


.privacy-principles p {
    margin:
        11px 0
        0;

    color: #7e7482;

    font-size: 12px;

    line-height: 1.65;
}


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

@media (max-width: 1050px) {

    .privacy-shell {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .privacy-copy {
        max-width: 760px;
    }


    .privacy-visual {
        width: 100%;
        max-width: 760px;

        margin: 0 auto;
    }


    .privacy-principles {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 720px) {

    .privacy-section {
        padding:
            110px 0
            120px;
    }


    .privacy-shell {
        gap: 55px;
    }


    .privacy-visual {
        min-height: auto;
    }


    .privacy-card-main {
        width: 100%;

        min-height: auto;

        padding: 24px;
    }


    .privacy-status-grid {
        grid-template-columns: 1fr;
    }


    .privacy-floating-card {
        position: relative;

        right: auto;
        bottom: auto;

        width: 88%;

        margin:
            -10px 18px
            0 auto;
    }


    .privacy-principles {
        grid-template-columns: 1fr;

        margin-top: 60px;

        gap: 27px;
    }

}


@media (max-width: 470px) {

    .privacy-copy h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .privacy-copy .privacy-lead {
        font-size: 18px;
    }


    .privacy-floating-card {
        width: 94%;
    }

}
.privacy-boundary {
    max-width: 980px;

    margin:
        68px auto
        0;

    padding:
        24px 28px;

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

    border-radius: 14px;

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

    text-align: center;
}


.privacy-boundary p {
    margin: 0;

    color: #8f8595;

    font-size: 13px;

    line-height: 1.7;
}


@media (max-width: 720px) {

    .privacy-boundary {
        margin-top: 48px;

        padding: 20px;

        text-align: left;
    }


    .privacy-boundary p {
        font-size: 12px;
    }

}
/* =====================================
   REAL ACTIVITY DECK VISUAL
===================================== */

.ecosystem-dashboard-visual {
    position: relative;

    max-width: 1260px;

    margin:
        85px auto
        0;
}


.real-activity-deck {
    display: grid;

    grid-template-columns:
        175px
        minmax(0, 1fr);

    min-height: 650px;

    overflow: hidden;

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

    border-radius: 25px;

    background: #09090b;

    box-shadow:
        0 45px 120px
        rgba(0, 0, 0, 0.42);
}


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

.deck-sidebar {
    padding:
        25px 19px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.06);

    background: #0b0b0d;
}


.deck-mini-brand {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 54px;

    color: #a990bf;

    font-size: 12px;
}


.deck-mini-orb {
    width: 17px;
    height: 17px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #c096e7,
            #75469f 43%,
            #26152e 75%
        );

    box-shadow:
        0 0 12px
        rgba(148, 80, 201, 0.35);
}


.deck-nav-group {
    margin-bottom: 36px;
}


.deck-nav-label {
    display: block;

    margin-bottom: 14px;

    color: #5f5964;

    font-size: 8px;

    letter-spacing: 1.3px;
}


.deck-nav-item {
    padding:
        9px 8px;

    margin-bottom: 4px;

    border-radius: 7px;

    color: #77717d;

    font-size: 10px;
}


.deck-nav-item.active {
    background:
        rgba(119, 70, 163, 0.08);

    color: #b79bcf;
}


/* =====================================
   ACTIVITY DECK MAIN
===================================== */

.deck-main {
    padding: 32px;
}


.deck-welcome {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}


.deck-welcome h3 {
    margin:
        6px 0
        0;

    color: #ece9ef;

    font-size: 25px;

    font-weight: 600;
}


.deck-welcome p {
    margin:
        7px 0
        0;

    color: #77717d;

    font-size: 11px;
}


.deck-live {
    padding:
        7px 10px;

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

    border-radius: 18px;

    color: #8c8391;

    font-size: 9px;
}


/* =====================================
   PRACTICE AND FOLLOW UPS
===================================== */

.deck-top-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(250px, 0.65fr);

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

    border-radius: 16px;

    overflow: hidden;
}


.deck-practice-panel {
    padding: 22px;

    background:
        rgba(255, 255, 255, 0.012);
}


.practice-stat-grid {
    display: grid;

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

    gap: 10px;
}


.practice-stat {
    min-height: 120px;

    padding: 16px;

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

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.018);
}


.practice-stat.purple {
    border-color:
        rgba(148, 89, 203, 0.28);
}


.practice-stat.blue {
    border-color:
        rgba(64, 132, 212, 0.28);
}


.practice-stat.cyan {
    border-color:
        rgba(83, 189, 198, 0.22);
}


.practice-stat.pink {
    border-color:
        rgba(189, 74, 174, 0.22);
}


.practice-stat.amber {
    border-color:
        rgba(206, 143, 38, 0.25);
}


.practice-stat.violet {
    border-color:
        rgba(150, 85, 203, 0.24);
}


.practice-stat-number {
    display: block;

    margin-bottom: 9px;

    color: #eeeaf0;

    font-size: 26px;

    font-weight: 600;
}


.practice-stat strong {
    display: block;

    color: #c4bdc8;

    font-size: 10px;

    line-height: 1.4;
}


.practice-stat p {
    margin:
        5px 0
        0;

    color: #655f69;

    font-size: 8px;
}


.deck-followups {
    padding: 22px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.06);

    background:
        rgba(25, 20, 30, 0.28);
}


.deck-panel-title strong {
    display: block;

    margin-top: 6px;

    color: #cfc8d2;

    font-size: 15px;
}


.followup-item {
    display: grid;

    grid-template-columns:
        7px
        1fr
        auto;

    gap: 9px;

    align-items: start;

    padding:
        15px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.045);
}


.followup-dot {
    width: 5px;
    height: 5px;

    margin-top: 5px;

    border-radius: 50%;

    background: #9a64dc;
}


.followup-item strong {
    display: block;

    color: #bdb6c1;

    font-size: 9px;
}


.followup-item p {
    margin:
        4px 0
        0;

    color: #766b7f;

    font-size: 8px;
}


.pending-label {
    padding:
        5px 7px;

    border:
        1px solid
        rgba(49, 171, 89, 0.22);

    border-radius: 7px;

    color: #6fc88a;

    font-size: 7px;

    text-transform: uppercase;
}


/* =====================================
   QUICK ACTIONS
===================================== */

.deck-action-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 20px;
}


.deck-action-card {
    min-height: 145px;

    padding: 19px;

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

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.012);
}


.deck-action-card strong {
    display: block;

    margin-top: 8px;

    color: #cbc4ce;

    font-size: 13px;
}


.deck-action-card p {
    margin:
        9px 0
        0;

    color: #716a76;

    font-size: 9px;

    line-height: 1.55;
}


.deck-search-field {
    margin-top: 16px;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(141, 91, 188, 0.18);

    border-radius: 8px;

    color: #625b68;

    font-size: 8px;

    background:
        rgba(99, 57, 136, 0.04);
}


/* =====================================
   CONNECTED WIDGET LAYER
===================================== */

.connected-layer {
    width:
        calc(100% - 90px);

    margin:
        -35px auto
        0;

    padding: 28px;

    position: relative;

    z-index: 4;

    border:
        1px solid
        rgba(158, 96, 213, 0.15);

    border-radius: 19px;

    background:
        rgba(18, 13, 23, 0.96);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(18px);
}


.connected-layer-heading {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    align-items: center;
}


.connected-layer-heading strong {
    display: block;

    margin-top: 6px;

    color: #c8c0cc;

    font-size: 15px;
}


.connected-status {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(159, 96, 210, 0.15);

    border-radius: 20px;

    color: #9375aa;

    font-size: 8px;
}


.connected-widget-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 21px;
}


.connected-widget {
    min-height: 110px;

    padding: 17px;

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

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.014);
}


.connected-widget-type {
    color: #7d638f;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.connected-widget strong {
    display: block;

    margin-top: 8px;

    color: #c6beca;

    font-size: 12px;
}


.connected-widget p {
    margin:
        7px 0
        0;

    color: #716876;

    font-size: 9px;

    line-height: 1.5;
}


/* =====================================
   RESPONSIVE ACTIVITY DECK
===================================== */

@media (max-width: 1050px) {

    .real-activity-deck {
        grid-template-columns: 1fr;
    }


    .deck-sidebar {
        display: none;
    }


    .practice-stat-grid {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

}


@media (max-width: 720px) {

    .ecosystem-dashboard-visual {
        margin-top: 55px;
    }


    .deck-main {
        padding: 20px;
    }


    .deck-top-grid {
        grid-template-columns: 1fr;
    }


    .deck-followups {
        border-left: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.06);
    }


    .practice-stat-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .deck-action-grid {
        grid-template-columns: 1fr;
    }


    .connected-layer {
        width:
            calc(100% - 20px);

        padding: 20px;
    }


    .connected-widget-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 470px) {

    .practice-stat-grid {
        grid-template-columns: 1fr;
    }


    .deck-welcome {
        flex-direction: column;
    }


    .connected-layer-heading {
        flex-direction: column;

        align-items: flex-start;
    }

}