/* Shared premium surfaces (Learn / Contact language) — scope per page via body class */

/* -------------------------------------------------------------------------- */
/* Page canvas (same family as /learn + /contact)                              */
/* -------------------------------------------------------------------------- */

body.balls-page,
body.matt-page {
    align-items: stretch;
    padding: 0;
    background: linear-gradient(
        168deg,
        #c5d4e2 0%,
        #d4e2ea 12%,
        #ddeef0 28%,
        #e8ecf4 48%,
        #ebe4ec 68%,
        #e5ddd4 100%
    );
}

body.stream-page {
    background: linear-gradient(
            168deg,
            #c5d4e2 0%,
            #d4e2ea 12%,
            #ddeef0 28%,
            #e8ecf4 48%,
            #ebe4ec 68%,
            #e5ddd4 100%
        )
        fixed !important;
    background-color: transparent !important;
}

/* -------------------------------------------------------------------------- */
/* Matt — glass panels + section rhythm                                       */
/* -------------------------------------------------------------------------- */

body.matt-page .glass-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(152deg, #e8f2f8 0%, #f5f9fc 38%, #ffffff 72%, #eef8f7 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.98) inset,
        0 -40px 80px -48px rgba(6, 182, 212, 0.12) inset,
        0 52px 100px -28px rgba(15, 23, 42, 0.35),
        0 20px 48px -12px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 0 0 2px rgba(6, 148, 162, 0.18) !important;
}

body.matt-page .glass-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    z-index: 1;
    background: linear-gradient(90deg, #0891b2, #22d3ee, #2dd4bf, #fbbf24);
    opacity: 0.95;
}

body.matt-page section.section-full:nth-of-type(odd) {
    background: linear-gradient(180deg, rgba(210, 224, 236, 0.55) 0%, rgba(228, 236, 244, 0.35) 100%);
}

body.matt-page section.section-full:nth-of-type(even) {
    background: linear-gradient(180deg, rgba(200, 230, 228, 0.35) 0%, rgba(218, 232, 240, 0.5) 100%);
}

/* -------------------------------------------------------------------------- */
/* Balls — holo product cards (override head <style> via higher specificity) */
/* -------------------------------------------------------------------------- */

body.balls-page .holo-card {
    background: linear-gradient(165deg, #f0f7fc 0%, #ffffff 55%, #f7fafc 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 36px 72px -22px rgba(15, 23, 42, 0.28),
        0 14px 32px -10px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(0, 163, 184, 0.12) !important;
}

body.balls-page .holo-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(0, 151, 167, 0.45) !important;
    background: linear-gradient(165deg, #ffffff 0%, #f3f9fc 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.98) inset,
        0 44px 88px -20px rgba(15, 23, 42, 0.32),
        0 0 0 2px rgba(255, 193, 7, 0.35),
        0 0 56px rgba(0, 188, 212, 0.14) !important;
    z-index: 2;
}

body.balls-page .holo-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(241, 247, 252, 0.98) 100%) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Balls — top consult strip (layout: visual left) */
body.balls-page .consult-section {
    padding: 28px 0 56px;
    background: linear-gradient(180deg, rgba(210, 224, 236, 0.88) 0%, rgba(218, 232, 242, 0.72) 100%);
    box-shadow: 0 -20px 48px -28px rgba(15, 23, 42, 0.08);
}

body.balls-page .consult-card {
    position: relative;
    border-radius: 28px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: linear-gradient(152deg, #e8f2f8 0%, #f5f9fc 42%, #ffffff 78%, #fffbf0 100%) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.98) inset,
        0 -32px 72px -44px rgba(255, 193, 7, 0.1) inset,
        0 52px 100px -28px rgba(15, 23, 42, 0.34),
        0 20px 48px -12px rgba(15, 23, 42, 0.2),
        0 0 0 2px rgba(212, 175, 55, 0.35),
        0 0 48px rgba(255, 193, 7, 0.12) !important;
}

body.balls-page .consult-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    z-index: 3;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(90deg, #ca8a04, #fbbf24, #22d3ee, #0891b2);
    opacity: 0.95;
    pointer-events: none;
}

body.balls-page .consult-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.98) inset,
        0 56px 110px -26px rgba(15, 23, 42, 0.36),
        0 0 0 2px rgba(212, 175, 55, 0.5),
        0 0 64px rgba(255, 193, 7, 0.18) !important;
}

body.balls-page .consult-visual {
    border-right: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: inset -10px 0 28px -18px rgba(15, 23, 42, 0.06);
}

@media (max-width: 900px) {
    body.balls-page .consult-visual {
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: inset 0 10px 28px -16px rgba(15, 23, 42, 0.06);
    }
}

/* Balls — bottom contact split */
body.balls-page #contact.contact-section {
    background: linear-gradient(180deg, rgba(210, 224, 236, 0.88) 0%, rgba(228, 236, 244, 0.72) 100%);
    box-shadow: 0 -24px 48px -28px rgba(15, 23, 42, 0.08);
}

body.balls-page .balls-contact-split {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: linear-gradient(152deg, #e8f2f8 0%, #f5f9fc 42%, #ffffff 78%, #fffbf0 100%) !important;
    border-radius: 24px !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.98) inset,
        0 -28px 64px -40px rgba(255, 193, 7, 0.12) inset,
        0 52px 100px -28px rgba(15, 23, 42, 0.34),
        0 20px 48px -12px rgba(15, 23, 42, 0.2),
        0 0 0 2px rgba(212, 175, 55, 0.32),
        0 0 48px rgba(255, 193, 7, 0.1) !important;
}

body.balls-page .balls-contact-split::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    z-index: 2;
    background: linear-gradient(90deg, #ca8a04, #fbbf24, #22d3ee, #0891b2);
    opacity: 0.95;
    pointer-events: none;
}

body.balls-page .balls-contact-visual {
    border-left: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: inset 8px 0 28px -16px rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, #dce4ee 0%, #c9d6e6 100%) !important;
}

@media (max-width: 900px) {
    body.balls-page .balls-contact-visual {
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.1);
    }
}

body.balls-page .balls-unique-section .unique-card {
    border-width: 1px !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 36px 64px -20px rgba(15, 23, 42, 0.26),
        0 12px 28px -8px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(0, 163, 184, 0.14) !important;
}

body.balls-page .balls-unique-section .unique-card:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.98) inset,
        0 44px 72px -18px rgba(15, 23, 42, 0.3),
        0 0 0 2px rgba(0, 188, 212, 0.28) !important;
}

body.balls-page .balls-unique-section .unique-card--featured {
    border-color: rgba(217, 119, 6, 0.45) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 36px 64px -20px rgba(120, 53, 15, 0.18),
        0 0 0 1px rgba(251, 191, 36, 0.45) !important;
}

/* -------------------------------------------------------------------------- */
/* Stream — deepen cards that already use light stream overrides              */
/* -------------------------------------------------------------------------- */

body.stream-page .hero-video-placeholder {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 28px 56px -14px rgba(15, 23, 42, 0.22),
        0 12px 28px -8px rgba(15, 23, 42, 0.12) !important;
}

body.stream-page .problem .point {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 0 0 1px rgba(255, 255, 255, 0.55) inset,
        0 4px 10px rgba(15, 23, 42, 0.08),
        0 18px 40px rgba(15, 23, 42, 0.14),
        0 36px 72px -10px rgba(15, 23, 42, 0.22),
        0 56px 96px -18px rgba(15, 23, 42, 0.28) !important;
}

body.stream-page .problem .point:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 0 0 1px rgba(255, 255, 255, 0.65) inset,
        0 6px 14px rgba(15, 23, 42, 0.1),
        0 22px 48px rgba(15, 23, 42, 0.16),
        0 42px 84px -12px rgba(15, 23, 42, 0.24),
        0 64px 110px -20px rgba(15, 23, 42, 0.3),
        0 0 48px -8px rgba(249, 168, 37, 0.32) !important;
}

body.stream-page .transform-content {
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.98) inset,
        0 32px 64px -18px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(0, 163, 184, 0.12) !important;
}

body.stream-page .transform-video {
    box-shadow:
        0 28px 64px -12px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(15, 23, 42, 0.08) !important;
}

body.stream-page .about-video {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 32px 72px -16px rgba(15, 23, 42, 0.24) !important;
}

body.stream-page .testimonial-card {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 28px 56px -14px rgba(15, 23, 42, 0.22) !important;
}

body.stream-page .testimonial-card:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.98) inset,
        0 36px 72px -12px rgba(15, 23, 42, 0.26) !important;
}

body.stream-page .contact-container {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.95) inset,
        0 40px 80px -22px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(0, 163, 184, 0.12) !important;
}

body.stream-page .calendar-visual {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 28px 56px -14px rgba(15, 23, 42, 0.2) !important;
}

body.stream-page .floating-menu {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 20px 48px -12px rgba(15, 23, 42, 0.22) !important;
}

body.stream-page .gaia-report .gaia-swiper .swiper-slide {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 48px -12px rgba(15, 23, 42, 0.2) !important;
}

body.stream-page .gaia-report .gaia-swiper .swiper-slide-active {
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.98) inset,
        0 32px 64px -14px rgba(15, 23, 42, 0.22),
        0 0 0 2px rgba(0, 172, 193, 0.35) !important;
}

/* Protocol grid: dark cards — extra float (inline border-color kept) */
body.stream-page .protocol-card {
    background: linear-gradient(165deg, rgba(22, 32, 48, 0.94) 0%, rgba(10, 15, 25, 0.9) 100%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 22px 44px -8px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

body.stream-page .protocol-card:hover {
    transform: translateY(-5px) scale(1.03) !important;
    filter: brightness(1.2) !important;
    z-index: 2 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 28px 56px -6px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 243, 255, 0.12) !important;
}

body.stream-page .protocols-section {
    background: linear-gradient(180deg, #d0dce8 0%, #e2eaf2 55%, #eef4f8 100%) !important;
}