:root {
    --ag-bg: #fbf6ec;
    --ag-bg-soft: #fffaf2;
    --ag-bg-deep: #f4ead8;
    --ag-white: #ffffff;
    --ag-text: #28170c;
    --ag-text-soft: #665244;
    --ag-text-muted: #927e6e;
    --ag-gold: #b88228;
    --ag-gold-dark: #96651e;
    --ag-gold-light: #d8ac62;
    --ag-gold-soft: #ead5ab;
    --ag-saffron: #e67b16;
    --ag-saffron-dark: #be5705;
    --ag-saffron-deep: #9b4301;
    --ag-saffron-soft: #fff0dc;
    --ag-border: rgba(109, 74, 39, 0.13);
    --ag-border-medium: rgba(109, 74, 39, 0.20);
    --ag-border-gold: rgba(184, 130, 40, 0.28);
    --ag-shadow-soft: 0 14px 40px rgba(75, 49, 23, 0.07);
    --ag-shadow: 0 24px 70px rgba(75, 49, 23, 0.11);
    --ag-shadow-large: 0 35px 100px rgba(75, 49, 23, 0.16);
    --ag-header-height: 88px;
    --ag-transition: 220ms ease;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--ag-text);
    background: var(--ag-bg);
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font: inherit;
}

button {
    border: 0;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4, p, blockquote {
    margin-top: 0;
}

[hidden] {
    display: none !important;
}

.container {
    width: min( 1200px, calc(100% - 48px) );
    margin-inline: auto;
}

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

.section-heading {
    width: min( 790px, 100% );
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--ag-gold);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-heading h2 {
    margin-bottom: 22px;
    color: var(--ag-text);
    font-size: clamp( 40px, 4.7vw, 66px );
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.section-heading h2 span {
    display: block;
    color: var(--ag-saffron-dark);
}

.section-heading p {
    margin-bottom: 0;
    color: var(--ag-text-soft);
    font-size: 17px;
    line-height: 1.85;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ag-bg-soft);
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms ease, visibility 400ms ease;
}

.page-loader.is-hidden, .page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-inner {
    text-align: center;
}

.loader-mandala {
    position: relative;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border: 1px solid rgba(184, 130, 40, 0.35);
    border-radius: 50%;
}

.loader-mandala::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(184, 130, 40, 0.35);
    border-radius: 50%;
    animation: simpleSpin 9s linear infinite;
}

.loader-mandala span {
    color: var(--ag-gold);
    font-size: 34px;
    animation: loaderPulse 1.8s ease-in-out infinite;
}

.page-loader-inner p {
    margin: 0;
    color: var(--ag-text-soft);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid transparent;
    background: rgba( 251, 246, 236, 0.94 );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background var(--ag-transition), box-shadow var(--ag-transition), border-color var(--ag-transition);
}

.site-header.scrolled {
    border-bottom-color: var(--ag-border);
    background: rgba( 251, 246, 236, 0.985 );
    box-shadow: 0 10px 32px rgba(64, 39, 16, 0.06);
}

.navbar-container {
    min-height: var(--ag-header-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
}

.brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(184, 130, 40, 0.25);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(74, 47, 20, 0.09);
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-copy {
    display: flex;
    flex-direction: column;
}

.brand-copy strong {
    color: var(--ag-text);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.1;
}

.brand-copy span {
    margin-top: 4px;
    color: var(--ag-text-muted);
    font-size: 10px;
    letter-spacing: 0.04em;
}

.desktop-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 31px;
}

.nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--ag-text-soft);
    font-size: 13px;
    font-weight: 750;
    transition: color var(--ag-transition);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--ag-saffron);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ag-transition);
}

.nav-link:hover, .nav-link.active {
    color: var(--ag-saffron-dark);
}

.nav-link:hover::after, .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-auth-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-login-button, .nav-primary-button {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    transition: transform var(--ag-transition), box-shadow var(--ag-transition);
}

.nav-login-button {
    padding: 0 15px;
    color: var(--ag-text);
}

.nav-primary-button {
    padding: 0 20px;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--ag-saffron), var(--ag-saffron-dark) );
    box-shadow: 0 11px 27px rgba(190, 87, 5, 0.20);
}

.nav-login-button:hover, .nav-primary-button:hover {
    transform: translateY(-2px);
}

.nav-primary-button:hover {
    box-shadow: 0 15px 36px rgba(190, 87, 5, 0.27);
}

.user-account-area {
    position: relative;
}

.user-account-button {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--ag-border);
    border-radius: 17px;
    color: var(--ag-text);
    background: rgba( 255, 255, 255, 0.92 );
    box-shadow: var(--ag-shadow-soft);
    cursor: pointer;
    transition: box-shadow var(--ag-transition), border-color var(--ag-transition), transform var(--ag-transition);
}

.user-account-button:hover {
    border-color: rgba(184, 130, 40, 0.28);
    box-shadow: 0 15px 35px rgba(69, 42, 16, 0.11);
    transform: translateY(-1px);
}

.user-avatar, .account-menu-avatar, .mobile-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--ag-gold), var(--ag-saffron-dark) );
    font-weight: 850;
}

.user-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.user-account-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.user-account-copy strong {
    max-width: 130px;
    overflow: hidden;
    color: var(--ag-text);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-account-copy small {
    margin-top: 2px;
    color: var(--ag-text-muted);
    font-size: 10px;
}

.account-chevron {
    color: var(--ag-text-muted);
    transition: transform var(--ag-transition);
}

.user-account-button[aria-expanded="true"] .account-chevron {
    transform: rotate(180deg);
}

.user-account-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1200;
    width: 275px;
    padding: 10px;
    border: 1px solid var(--ag-border);
    border-radius: 20px;
    background: rgba( 255, 255, 255, 0.985 );
    box-shadow: var(--ag-shadow-large);
    animation: accountMenuOpen 180ms ease;
}

.account-menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.account-menu-avatar {
    width: 43px;
    height: 43px;
    font-size: 14px;
}

.account-menu-profile > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.account-menu-profile strong, .account-menu-profile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-profile strong {
    color: var(--ag-text);
    font-size: 13px;
}

.account-menu-profile small {
    margin-top: 3px;
    color: var(--ag-text-muted);
    font-size: 10px;
}

.account-menu-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--ag-border);
}

.account-menu-item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--ag-text-soft);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: color var(--ag-transition), background var(--ag-transition);
}

.account-menu-item:hover {
    color: var(--ag-saffron-dark);
    background: var(--ag-saffron-soft);
}

.account-logout-button {
    color: #9d392b;
}

.mobile-menu-button {
    width: 46px;
    height: 46px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--ag-border);
    border-radius: 13px;
    background: #ffffff;
    cursor: pointer;
}

.mobile-menu-button span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--ag-text);
    transition: transform var(--ag-transition), opacity var(--ag-transition);
}

.mobile-menu-button.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
    display: none;
}

.hero-section {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--ag-header-height) + 24px) 0 22px;
    overflow: hidden;
    background: radial-gradient( circle at 77% 42%, rgba(219, 181, 111, 0.18), transparent 31% ), linear-gradient( 180deg, #fdf9f1 0%, #fbf5e9 62%, #fdf9f2 100% );
}

.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.24;
    pointer-events: none;
    background-image: radial-gradient( rgba(147, 106, 50, 0.18) 0.7px, transparent 0.7px );
    background-size: 38px 38px;
    mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.65), transparent 95% );
}

.hero-light {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.hero-light-one {
    width: 540px;
    height: 540px;
    right: -80px;
    top: 45px;
    background: radial-gradient( circle, rgba(220, 174, 92, 0.15), transparent 70% );
}

.hero-light-two {
    width: 310px;
    height: 310px;
    left: -120px;
    bottom: -100px;
    background: radial-gradient( circle, rgba(230, 123, 22, 0.08), transparent 72% );
}

.hero-container {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(500px, 1.04fr);
    align-items: center;
    gap: 36px;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 620px;
    transform: translateY(-12px);
}

.hero-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 15px;
    border: 1px solid var(--ag-border-gold);
    border-radius: 999px;
    color: #a46d18;
    background: rgba( 255, 250, 240, 0.72 );
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.hero-kicker-symbol {
    font-size: 18px;
}

.hero-title {
    max-width: 650px;
    margin-bottom: 18px;
    color: var(--ag-text);
    font-size: clamp( 52px, 5.2vw, 72px );
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.hero-title span {
    display: block;
    margin-top: 7px;
    color: var(--ag-saffron-dark);
}

.hero-description {
    max-width: 600px;
    margin-bottom: 22px;
    color: var(--ag-text-soft);
    font-size: 15px;
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 22px;
}

.primary-button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 22px;
    border-radius: 15px;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--ag-saffron), var(--ag-saffron-dark) );
    box-shadow: 0 15px 36px rgba(190, 87, 5, 0.22);
    font-size: 14px;
    font-weight: 800;
    transition: transform var(--ag-transition), box-shadow var(--ag-transition);
}

.primary-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(190, 87, 5, 0.29);
}

.button-arrow {
    font-size: 19px;
    transition: transform var(--ag-transition);
}

.primary-button:hover .button-arrow {
    transform: translateX(4px);
}

.text-action-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ag-text);
    font-size: 13px;
    font-weight: 750;
}

.text-action-symbol {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ag-border-gold);
    border-radius: 50%;
    color: var(--ag-gold);
    transition: transform var(--ag-transition), background var(--ag-transition);
}

.text-action-button:hover .text-action-symbol {
    transform: scale(1.07);
    background: rgba( 255, 255, 255, 0.75 );
}

.hero-mandala-column {
    position: relative;
    min-height: 535px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-28px);
}

.gita-mandala {
    position: relative;
    width: 525px;
    height: 525px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    isolation: isolate;
}

.mandala-ambient-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -5;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(209, 163, 79, 0.25) 0%, rgba(221, 185, 114, 0.11) 42%, rgba(242, 225, 194, 0.04) 64%, transparent 76% );
    filter: blur(14px);
    transform: translate(-50%, -50%);
    animation: mandalaGlowPulse 6s ease-in-out infinite;
}

.mandala-decoration-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mandala-decoration-ring-outer {
    width: 516px;
    height: 516px;
    border: 1px solid rgba(184, 130, 40, 0.21);
    box-shadow: inset 0 0 65px rgba(184, 130, 40, 0.025);
}

.mandala-decoration-ring-outer::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px dotted rgba(184, 130, 40, 0.16);
    border-radius: 50%;
}

.mandala-decoration-ring-middle {
    width: 425px;
    height: 425px;
    border: 1px solid rgba(184, 130, 40, 0.25);
}

.mandala-decoration-ring-middle::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px dashed rgba(184, 130, 40, 0.14);
    border-radius: 50%;
}

.mandala-shloka-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform;
}

.mandala-shloka-ring-outer {
    z-index: 4;
    width: 486px;
    height: 486px;
    animation: shlokaRingClockwise 52s linear infinite;
}

.mandala-shloka-ring-inner {
    z-index: 5;
    width: 387px;
    height: 387px;
    animation: shlokaRingAntiClockwise 39s linear infinite;
}

.circular-shloka {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.circular-shloka svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.circular-shloka text {
    font-family: "Nirmala UI", "Mangal", "Kohinoor Devanagari", serif;
    text-rendering: geometricPrecision;
}

.shloka-glyph, .shloka-char {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 1.15em;
    color: #9c681d;
    font-family: "Nirmala UI", "Mangal", serif;
    font-size: 14px;
    font-weight: 550;
    line-height: 1;
    text-align: center;
    white-space: pre;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY( calc( -1 * var(--radius) ) ) rotate(90deg);
    transform-origin: center;
    user-select: none;
}

.mandala-inner-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: 307px;
    height: 307px;
    border: 1px solid rgba(184, 130, 40, 0.35);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 248, 234, 0.18), transparent 70% );
    box-shadow: 0 0 50px rgba(198, 146, 59, 0.08);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mandala-marker {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ag-gold);
    font-size: 21px;
    text-shadow: 0 4px 18px rgba(171, 116, 30, 0.18);
    pointer-events: none;
}

.marker-top {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.marker-bottom {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.marker-left {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.marker-right {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mandala-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.mandala-image-border {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid rgba(184, 130, 40, 0.38);
    border-radius: 50%;
    background: rgba( 255, 251, 242, 0.92 );
    box-shadow: 0 22px 62px rgba(116, 75, 28, 0.16), 0 0 0 5px rgba(255, 250, 238, 0.55);
}

.mandala-image-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: #f6e9cf;
}

.mandala-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 0 34px rgba(84, 49, 17, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.50);
}

.mandala-center-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
    transition: transform 700ms ease;
}

.mandala-center:hover .mandala-center-image {
    transform: scale(1.035);
}

.mandala-center-shadow {
    position: absolute;
    left: 50%;
    bottom: -14px;
    z-index: -2;
    width: 210px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(167, 112, 32, 0.22), rgba(167, 112, 32, 0.07) 48%, transparent 74% );
    filter: blur(9px);
    transform: translateX(-50%);
}

.mandala-caption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -15px;
    color: var(--ag-text-muted);
}

.mandala-caption > span {
    color: var(--ag-gold);
}

.mandala-caption p {
    max-width: 290px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    line-height: 1.55;
}

.hero-scroll-cue {
    display: none;
}

@keyframes heroMandalaEnter {
    from {
        opacity: 0;
        transform: translate3d( -34px, 12px, 0 ) scale(0.965);
    }

    to {
        opacity: 1;
        transform: translate3d( 0, 0, 0 ) scale(1);
    }
}

@keyframes heroContentReveal {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translate3d( 0, 20px, 0 );
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d( 0, 0, 0 );
    }
}

@keyframes heroCaptionReveal {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroRimBreath {
    0%, 100% {
        opacity: 0.50;
        transform: translate( -50%, -50% ) scale(0.985);
    }

    50% {
        opacity: 0.82;
        transform: translate( -50%, -50% ) scale(1.02);
    }
}

@keyframes heroSparkTwinkle {
    0%, 100% {
        opacity: 0;
        transform: translate3d( 0, 8px, 0 ) scale(0.65);
    }

    35% {
        opacity: 0.78;
    }

    62% {
        opacity: 0.32;
        transform: translate3d( 0, -9px, 0 ) scale(1);
    }
}

@keyframes heroParticleFloat {
    0%, 100% {
        opacity: 0;
        transform: translate3d( 0, 8px, 0 );
    }

    34% {
        opacity: 0.62;
    }

    65% {
        opacity: 0.24;
        transform: translate3d( 0, -14px, 0 );
    }
}

.journey-section {
    position: relative;
    background: #ffffff;
}

.journey-heading {
    margin: 0 auto 76px;
    text-align: center;
}

.journey-heading h2 {
    margin-bottom: 22px;
    font-size: clamp( 40px, 4.5vw, 64px );
    line-height: 1.07;
    letter-spacing: -0.045em;
}

.journey-heading h2 span {
    display: block;
    color: var(--ag-saffron-dark);
}

.journey-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--ag-text-soft);
    font-size: 16px;
    line-height: 1.85;
}

.journey-path {
    position: relative;
    display: grid;
    grid-template-columns: repeat( 4, minmax(0, 1fr) );
    gap: 26px;
}

.journey-line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 42px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(184, 130, 40, 0.28) 10%, rgba(184, 130, 40, 0.28) 90%, transparent );
}

.journey-step {
    position: relative;
    z-index: 2;
    padding: 0 10px;
    text-align: center;
}

.journey-number {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    border: 1px solid var(--ag-border-gold);
    border-radius: 50%;
    color: var(--ag-gold);
    background: #ffffff;
    box-shadow: 0 11px 30px rgba(90, 54, 20, 0.06);
    font-size: 12px;
    font-weight: 800;
    transition: transform var(--ag-transition), background var(--ag-transition);
}

.journey-step:hover .journey-number {
    transform: translateY(-5px);
    background: var(--ag-bg-soft);
}

.journey-symbol {
    margin-bottom: 13px;
    color: rgba(155, 104, 31, 0.76);
    font-family: "Nirmala UI", serif;
    font-size: 19px;
    font-weight: 700;
}

.journey-step h3 {
    margin-bottom: 10px;
    color: var(--ag-text);
    font-size: 18px;
}

.journey-step p {
    margin: 0;
    color: var(--ag-text-muted);
    font-size: 13px;
    line-height: 1.75;
}

.chapters-home-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 145deg, #f8efdf, #fdf8ef );
}

.chapters-content h2 {
    max-width: 680px;
    margin-bottom: 20px;
    color: var(--ag-text);
    font-size: clamp( 38px, 4vw, 58px );
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.chapters-content > p {
    max-width: 650px;
    color: var(--ag-text-soft);
    font-size: 16px;
    line-height: 1.85;
}

.chapter-preview-list {
    margin: 34px 0 30px;
    border-top: 1px solid var(--ag-border);
}

.chapter-preview-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding: 19px 0;
    border-bottom: 1px solid var(--ag-border);
    transition: padding-left var(--ag-transition);
}

.chapter-preview-item:hover {
    padding-left: 7px;
}

.chapter-preview-item > span {
    color: var(--ag-gold);
    font-size: 12px;
    font-weight: 800;
}

.chapter-preview-item div {
    display: flex;
    flex-direction: column;
}

.chapter-preview-item strong {
    color: var(--ag-text);
    font-size: 15px;
}

.chapter-preview-item small {
    margin-top: 3px;
    color: var(--ag-text-muted);
    font-size: 11px;
}

.outline-action-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border: 1px solid rgba(184, 130, 40, 0.32);
    border-radius: 14px;
    color: var(--ag-text);
    background: rgba( 255, 255, 255, 0.55 );
    font-size: 13px;
    font-weight: 800;
    transition: background var(--ag-transition), transform var(--ag-transition);
}

.outline-action-button:hover {
    transform: translateY(-2px);
    background: #ffffff;
}

.visual-experience-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0%, #fffaf2 48%, #fbf4e8 100% );
}

.visual-experience-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 850px;
    height: 850px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(222, 169, 82, 0.08), transparent 68% );
    transform: translate( -80%, -48% );
    pointer-events: none;
}

.visual-experience-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    min-height: 590px;
    overflow: hidden;
    border: 1px solid rgba(118, 75, 36, 0.16);
    border-radius: 38px;
    background: #26170e;
    box-shadow: 0 34px 90px rgba(59, 35, 16, 0.18);
    isolation: isolate;
}

.experience-battlefield-scene {
    position: relative;
    min-width: 0;
    min-height: 590px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient( 180deg, #d9a46d 0%, #e9b879 23%, #c98046 52%, #8b4d2d 73%, #4e2e20 100% );
}

.experience-sky {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient( circle at 72% 22%, rgba(255, 233, 174, 0.78) 0%, rgba(246, 185, 101, 0.28) 20%, transparent 42% ), linear-gradient( 180deg, #d7a572 0%, #e7b679 27%, #c87843 58%, #8b4a2d 100% );
}

.experience-sky::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient( ellipse at 18% 24%, rgba(255, 245, 215, 0.16), transparent 34% ), radial-gradient( ellipse at 52% 34%, rgba(255, 225, 177, 0.13), transparent 31% ), linear-gradient( 112deg, transparent 0%, rgba(255, 237, 198, 0.10) 38%, transparent 68% );
    opacity: 0.95;
}

.experience-sun-glow {
    position: absolute;
    z-index: 2;
    right: 4%;
    top: 4%;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 247, 205, 0.92) 0%, rgba(255, 211, 119, 0.43) 21%, rgba(233, 138, 52, 0.13) 52%, transparent 72% );
    filter: blur(2px);
    animation: experienceSunBreath 8s ease-in-out infinite;
    pointer-events: none;
}

.experience-distant-mountains {
    position: absolute;
    z-index: 3;
    left: -3%;
    right: -3%;
    bottom: 27%;
    height: 180px;
    background: linear-gradient( 180deg, rgba(110, 67, 42, 0.36), rgba(80, 45, 31, 0.64) );
    clip-path: polygon( 0% 78%, 8% 58%, 15% 68%, 23% 37%, 31% 66%, 39% 48%, 48% 71%, 58% 42%, 67% 66%, 75% 33%, 83% 61%, 91% 49%, 100% 74%, 100% 100%, 0% 100% );
    filter: blur(0.4px);
    opacity: 0.78;
}

.experience-battlefield-ground {
    position: absolute;
    z-index: 5;
    left: -8%;
    right: -8%;
    bottom: -15%;
    height: 54%;
    background: radial-gradient( ellipse at 38% 4%, rgba(238, 171, 91, 0.20), transparent 34% ), radial-gradient( ellipse at 76% 10%, rgba(78, 39, 21, 0.18), transparent 42% ), repeating-linear-gradient( 167deg, rgba(255, 207, 139, 0.025) 0, rgba(255, 207, 139, 0.025) 2px, transparent 2px, transparent 17px ), linear-gradient( 180deg, #7b452c 0%, #5b3426 46%, #3d261e 100% );
    transform: perspective(650px) rotateX(57deg) scale(1.2);
    transform-origin: bottom center;
}

.experience-army {
    position: absolute;
    z-index: 4;
    bottom: 26%;
    width: 48%;
    height: 145px;
    display: flex;
    align-items: flex-end;
    gap: clamp(18px, 3vw, 40px);
    opacity: 0.62;
    filter: blur(0.15px) drop-shadow( 0 8px 8px rgba(31, 15, 9, 0.22) );
    pointer-events: none;
}

.experience-army-left {
    left: -4%;
    justify-content: flex-start;
    transform: scale(0.92);
}

.experience-army-right {
    right: -5%;
    justify-content: flex-end;
    transform: scale(0.86);
}

.experience-army span {
    position: relative;
    width: 12px;
    height: 54px;
    display: block;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient( 180deg, rgba(74, 38, 23, 0.88), rgba(42, 23, 18, 0.95) );
    box-shadow: 0 0 0 5px rgba(57, 29, 20, 0.16);
}

.experience-army span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -18px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(54, 29, 20, 0.94);
    transform: translateX(-50%);
}

.experience-army span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 2px;
    height: 95px;
    background: linear-gradient( 180deg, rgba(60, 31, 21, 0.95), rgba(60, 31, 21, 0.42) );
    transform: translateX(11px) rotate(-3deg);
    transform-origin: bottom center;
}

.experience-army-left span:nth-child(2), .experience-army-right span:nth-child(4) {
    transform: scale(0.78);
}

.experience-army-left span:nth-child(3), .experience-army-right span:nth-child(2) {
    transform: scale(1.18);
}

.experience-army-left span:nth-child(5), .experience-army-right span:nth-child(5) {
    transform: scale(0.68);
}

.experience-dust {
    position: absolute;
    z-index: 6;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(244, 184, 102, 0.20), rgba(190, 105, 50, 0.09) 46%, transparent 74% );
    filter: blur(18px);
    pointer-events: none;
}

.experience-dust-one {
    left: -15%;
    bottom: 14%;
    width: 470px;
    height: 180px;
    animation: experienceDustDriftOne 13s ease-in-out infinite;
}

.experience-dust-two {
    right: -18%;
    bottom: 19%;
    width: 430px;
    height: 160px;
    opacity: 0.76;
    animation: experienceDustDriftTwo 16s ease-in-out infinite;
}

.experience-character-glow {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 10%;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 226, 147, 0.34) 0%, rgba(235, 144, 53, 0.11) 42%, transparent 70% );
    filter: blur(8px);
    transform: translateX(-50%);
    animation: experienceCharacterGlow 6.5s ease-in-out infinite;
    pointer-events: none;
}

.experience-character-stage {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: -8px;
    width: min( 94%, 720px );
    opacity: 0;
    transform: translate3d( -50%, 34px, 0 ) scale(0.94);
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.visual-experience-panel.is-visible .experience-character-stage {
    animation: experienceCharacterReveal 1.2s cubic-bezier( 0.18, 0.78, 0.24, 1 ) forwards;
}

.experience-character-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow( 0 22px 28px rgba(42, 19, 10, 0.28) ) drop-shadow( 0 0 18px rgba(255, 191, 90, 0.12) );
    transform-origin: center bottom;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.visual-experience-panel.is-visible .experience-character-image {
    animation: experienceCharacterFloat 5.8s ease-in-out 1.1s infinite;
}

.experience-scene-vignette {
    position: absolute;
    inset: 0;
    z-index: 12;
    background: linear-gradient( 90deg, rgba(31, 17, 12, 0.16) 0%, transparent 24%, transparent 68%, rgba(34, 19, 13, 0.18) 100% ), linear-gradient( 180deg, rgba(28, 16, 11, 0.06) 0%, transparent 35%, rgba(30, 17, 12, 0.30) 100% );
    pointer-events: none;
}

.experience-scene-caption {
    position: absolute;
    z-index: 15;
    left: 28px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 56px);
    padding: 9px 13px;
    border: 1px solid rgba(255, 237, 197, 0.19);
    border-radius: 999px;
    color: rgba(255, 246, 228, 0.92);
    background: rgba(39, 21, 14, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(34, 17, 10, 0.14);
}

.experience-scene-caption span {
    color: #f2b45f;
    font-size: 9px;
}

.experience-scene-caption p {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.visual-experience-content {
    position: relative;
    z-index: 5;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 64px;
    color: #ffffff;
    background: radial-gradient( circle at 100% 0%, rgba(229, 139, 40, 0.12), transparent 35% ), linear-gradient( 145deg, #2b1a10, #21140d 64%, #1d120c );
}

.visual-experience-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient( 180deg, transparent, rgba(229, 176, 96, 0.38), transparent );
    pointer-events: none;
}

.visual-experience-content .section-eyebrow {
    color: #e8b264;
}

.visual-experience-content h2 {
    max-width: 520px;
    margin-bottom: 20px;
    color: #fffaf2;
    font-size: clamp( 38px, 4vw, 58px );
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.visual-experience-content h2 span {
    display: block;
    color: #e99839;
}

.visual-experience-content > p {
    max-width: 520px;
    color: rgba(255, 245, 230, 0.70);
    font-size: 15px;
    line-height: 1.85;
}

.visual-feature-list {
    display: grid;
    gap: 15px;
    margin-top: 30px;
}

.visual-feature-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    color: rgba(255, 244, 228, 0.76);
    font-size: 13px;
    font-weight: 650;
}

.visual-feature-list span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(225, 163, 75, 0.34);
    border-radius: 50%;
    color: #efad52;
    background: rgba(255, 255, 255, 0.025);
    font-size: 10px;
    font-weight: 800;
}

.visual-play-button.experience-story-button {
    position: relative;
    bottom: auto;
    width: fit-content;
    height: 48px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
    padding: 0 20px;
    border: 1px solid rgba(238, 174, 84, 0.40);
    border-radius: 999px;
    color: #fff8ec;
    background: linear-gradient( 135deg, #d26c11, #b64e05 );
    box-shadow: 0 11px 28px rgba(94, 40, 5, 0.20);
    font-size: 12px;
    cursor: pointer;
    transform: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.visual-play-button.experience-story-button > span {
    font-size: 10px;
}

.visual-play-button.experience-story-button strong {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.01em;
}

.visual-play-button.experience-story-button:hover {
    transform: none;
    border-color: rgba(255, 195, 108, 0.58);
    background: linear-gradient( 135deg, #dd7416, #bd5206 );
    box-shadow: 0 11px 28px rgba(94, 40, 5, 0.24);
}

@keyframes experienceCharacterReveal {
    from {
        opacity: 0;
        transform: translate3d( -50%, 34px, 0 ) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate3d( -50%, 0, 0 ) scale(1);
    }
}

@keyframes experienceCharacterFloat {
    0%, 100% {
        transform: translate3d( 0, 0, 0 );
    }

    50% {
        transform: translate3d( 0, -7px, 0 );
    }
}

@keyframes experienceSunBreath {
    0%, 100% {
        opacity: 0.78;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes experienceCharacterGlow {
    0%, 100% {
        opacity: 0.56;
        transform: translateX(-50%) scale(0.95);
    }

    50% {
        opacity: 0.86;
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes experienceDustDriftOne {
    0%, 100% {
        opacity: 0.56;
        transform: translate3d( -24px, 0, 0 ) scale(0.94);
    }

    50% {
        opacity: 0.82;
        transform: translate3d( 42px, -5px, 0 ) scale(1.05);
    }
}

@keyframes experienceDustDriftTwo {
    0%, 100% {
        opacity: 0.38;
        transform: translate3d( 34px, 4px, 0 ) scale(0.96);
    }

    50% {
        opacity: 0.72;
        transform: translate3d( -36px, -3px, 0 ) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .experience-sun-glow, .experience-character-glow, .experience-dust, .visual-experience-panel.is-visible .experience-character-stage, .visual-experience-panel.is-visible .experience-character-image {
        animation: none !important;
    }

    .experience-character-stage {
        opacity: 1;
        transform: translate3d( -50%, 0, 0 ) scale(1);
    }
}

.wisdom-section, .wisdom-cinematic-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff8ea;
    background: radial-gradient( circle at 24% 34%, rgba(61, 96, 173, 0.22), transparent 31% ), radial-gradient( circle at 78% 22%, rgba(225, 154, 52, 0.14), transparent 28% ), linear-gradient( 135deg, #090d1b 0%, #10182b 46%, #1d140f 100% );
}

.wisdom-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient( 90deg, rgba(5, 9, 20, 0.30), transparent 30%, transparent 70%, rgba(45, 25, 10, 0.18) );
    pointer-events: none;
}

.wisdom-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -230px;
    width: 920px;
    height: 520px;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(222, 143, 46, 0.16), transparent 68% );
    transform: translateX(-50%);
    filter: blur(12px);
    pointer-events: none;
}

.wisdom-cosmic-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.wisdom-star-field {
    position: absolute;
    inset: -12%;
    opacity: 0.50;
    background-image: radial-gradient( circle, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px ), radial-gradient( circle, rgba(255, 207, 111, 0.82) 0 1px, transparent 1.6px ), radial-gradient( circle, rgba(151, 184, 255, 0.72) 0 1px, transparent 1.7px );
    background-repeat: repeat;
    will-change: transform, opacity;
}

.wisdom-star-field-one {
    background-size: 72px 72px, 116px 116px, 163px 163px;
    background-position: 0 0, 24px 31px, 58px 18px;
    animation: wisdomStarDriftOne 30s linear infinite;
}

.wisdom-star-field-two {
    opacity: 0.30;
    background-size: 96px 96px, 142px 142px, 207px 207px;
    background-position: 18px 38px, 63px 17px, 91px 74px;
    filter: blur(0.2px);
    animation: wisdomStarDriftTwo 38s linear infinite;
}

.wisdom-cosmic-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.48;
    pointer-events: none;
}

.wisdom-cosmic-glow-one {
    left: -180px;
    top: 8%;
    width: 620px;
    height: 620px;
    background: radial-gradient( circle, rgba(62, 111, 229, 0.28), rgba(52, 84, 169, 0.10) 46%, transparent 72% );
    animation: wisdomGlowBreathOne 10s ease-in-out infinite;
}

.wisdom-cosmic-glow-two {
    right: -150px;
    bottom: -120px;
    width: 580px;
    height: 580px;
    background: radial-gradient( circle, rgba(235, 153, 54, 0.26), rgba(176, 87, 28, 0.08) 48%, transparent 72% );
    animation: wisdomGlowBreathTwo 12s ease-in-out infinite;
}

.wisdom-container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    align-items: center;
    gap: 74px;
}

.wisdom-cinematic-container {
    min-height: 690px;
}

.wisdom-symbol-column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.wisdom-visual-column {
    align-self: stretch;
}

.wisdom-cosmic-stage {
    position: relative;
    width: 100%;
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgba(237, 183, 91, 0.18);
    border-radius: 42px;
    background: radial-gradient( circle at 58% 40%, rgba(244, 186, 83, 0.14), transparent 28% ), radial-gradient( circle at 22% 20%, rgba(64, 109, 203, 0.20), transparent 34% ), linear-gradient( 150deg, rgba(12, 18, 40, 0.90), rgba(16, 22, 43, 0.84) 52%, rgba(42, 24, 14, 0.78) );
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), inset 0 -80px 100px rgba(4, 7, 16, 0.26), 0 34px 90px rgba(0, 0, 0, 0.26);
    isolation: isolate;
}

.wisdom-cosmic-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient( circle at 54% 44%, rgba(255, 203, 107, 0.07), transparent 24% ), radial-gradient( circle at 54% 45%, rgba(15, 13, 18, 0.42), transparent 42% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.012), transparent 42%, rgba(0, 0, 0, 0.26) );
    pointer-events: none;
}

.wisdom-cosmic-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -130px;
    width: 82%;
    height: 250px;
    z-index: 5;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(232, 155, 59, 0.20), rgba(170, 80, 27, 0.06) 48%, transparent 72% );
    transform: translateX(-50%);
    filter: blur(9px);
    pointer-events: none;
}

.wisdom-cosmic-halo {
    position: absolute;
    z-index: 2;
    left: 54%;
    top: 45%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 223, 145, 0.16) 0%, rgba(214, 142, 45, 0.16) 26%, rgba(105, 58, 18, 0.22) 48%, rgba(24, 18, 22, 0.62) 72%, rgba(8, 10, 18, 0.88) 100% );
    transform: translate( -50%, -50% );
    filter: blur(2px);
    opacity: 0.92;
    animation: wisdomHaloPulse 7.5s ease-in-out infinite;
    pointer-events: none;
}

.wisdom-cosmic-rays {
    position: absolute;
    z-index: 3;
    left: 54%;
    top: 45%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: repeating-conic-gradient( from 0deg, rgba(0, 0, 0, 0) 0deg 7deg, rgba(164, 101, 28, 0.26) 7deg 8.3deg, rgba(255, 187, 79, 0.12) 8.3deg 9.2deg, rgba(0, 0, 0, 0) 9.2deg 15deg );
    -webkit-mask-image: radial-gradient( circle, transparent 0 19%, rgba(0, 0, 0, 0.95) 25%, rgba(0, 0, 0, 0.95) 68%, transparent 78% );
    mask-image: radial-gradient( circle, transparent 0 19%, rgba(0, 0, 0, 0.95) 25%, rgba(0, 0, 0, 0.95) 68%, transparent 78% );
    transform: translate( -50%, -50% );
    opacity: 0.52;
    filter: drop-shadow( 0 0 10px rgba(201, 132, 44, 0.14) );
    animation: wisdomRaysTurn 34s linear infinite;
    pointer-events: none;
}

.wisdom-cosmic-orbit {
    position: absolute;
    z-index: 4;
    left: 55%;
    top: 46%;
    border-radius: 50%;
    pointer-events: none;
}

.wisdom-cosmic-orbit-one {
    width: 360px;
    height: 360px;
    border: 1px solid rgba(183, 123, 45, 0.24);
    box-shadow: 0 0 0 1px rgba(57, 36, 18, 0.18) inset;
    transform: translate( -50%, -50% ) rotate(-9deg);
    animation: wisdomOrbitOne 25s linear infinite;
}

.wisdom-cosmic-orbit-one::before, .wisdom-cosmic-orbit-one::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f5c06a;
    box-shadow: 0 0 18px rgba(245, 192, 106, 0.82);
}

.wisdom-cosmic-orbit-one::before {
    left: 10%;
    top: 21%;
}

.wisdom-cosmic-orbit-one::after {
    right: 6%;
    bottom: 27%;
}

.wisdom-cosmic-orbit-two {
    width: 430px;
    height: 430px;
    border: 1px dashed rgba(126, 88, 39, 0.18);
    transform: translate( -50%, -50% ) rotate(11deg);
    animation: wisdomOrbitTwo 39s linear infinite;
}

.wisdom-vishwaroop-frame {
    position: absolute;
    z-index: 8;
    left: 50%;
    right: auto;
    bottom: -2px;
    width: min( 114%, 810px );
    opacity: 0;
    transform: translate3d( -50%, 28px, 0 ) scale(0.955);
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.wisdom-visual-column.is-visible .wisdom-vishwaroop-frame {
    animation: wisdomVishwaroopReveal 1.45s cubic-bezier( 0.18, 0.78, 0.22, 1 ) forwards;
}

.wisdom-vishwaroop-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow( 0 24px 34px rgba(0, 0, 0, 0.30) ) drop-shadow( 0 0 16px rgba(245, 181, 83, 0.12) );
    transform-origin: 55% 55%;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    animation: wisdomVishwaroopBreath 11s ease-in-out infinite;
}

.wisdom-visual-vignette {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient( 180deg, rgba(6, 10, 23, 0.02) 0%, transparent 42%, rgba(5, 7, 15, 0.42) 100% ), linear-gradient( 90deg, rgba(6, 9, 19, 0.13), transparent 18%, transparent 82%, rgba(18, 12, 10, 0.16) );
    pointer-events: none;
}

.wisdom-visual-caption {
    position: absolute;
    z-index: 13;
    left: 26px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 52px);
    padding: 9px 13px;
    border: 1px solid rgba(238, 194, 116, 0.20);
    border-radius: 999px;
    color: rgba(255, 245, 225, 0.88);
    background: rgba(7, 10, 21, 0.48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.wisdom-visual-caption span {
    color: #efb55e;
    font-size: 9px;
}

.wisdom-visual-caption p {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wisdom-content {
    position: relative;
    z-index: 5;
}

.wisdom-cinematic-content {
    padding: 40px 0;
}

.wisdom-cinematic-content .section-eyebrow {
    color: #e9af59;
}

.wisdom-sanskrit {
    max-width: 720px;
    margin-bottom: 26px;
    color: #efbd6f;
    font-family: "Nirmala UI", "Mangal", "Kohinoor Devanagari", serif;
    font-size: clamp( 25px, 2.35vw, 36px );
    line-height: 1.72;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 22px rgba(225, 147, 47, 0.12);
}

.wisdom-divider {
    width: min( 470px, 100% );
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin: 8px 0 27px;
}

.wisdom-divider span {
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(235, 183, 96, 0.32) );
}

.wisdom-divider span:last-child {
    background: linear-gradient( 90deg, rgba(235, 183, 96, 0.32), transparent );
}

.wisdom-divider i {
    color: #e8ac51;
    font-style: normal;
    font-size: 9px;
}

.wisdom-content blockquote {
    max-width: 730px;
    margin: 0 0 30px;
    color: rgba(255, 248, 237, 0.96);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp( 29px, 3vw, 45px );
    line-height: 1.42;
    letter-spacing: -0.025em;
}

.wisdom-reference {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    color: rgba(255, 236, 210, 0.58);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.wisdom-reference span + span::before {
    content: "•";
    margin-right: 14px;
    color: #dfa44d;
}

@keyframes wisdomVishwaroopReveal {
    from {
        opacity: 0;
        transform: translate3d( -50%, 28px, 0 ) scale(0.955);
    }

    to {
        opacity: 1;
        transform: translate3d( -50%, 0, 0 ) scale(1);
    }
}

@keyframes wisdomVishwaroopBreath {
    0%, 100% {
        transform: scale(1.015) translate3d( -0.4%, 0, 0 );
    }

    50% {
        transform: scale(1.055) translate3d( 0.6%, -0.45%, 0 );
    }
}

@keyframes wisdomHaloPulse {
    0%, 100% {
        opacity: 0.56;
        transform: translate( -50%, -50% ) scale(0.94);
    }

    50% {
        opacity: 0.90;
        transform: translate( -50%, -50% ) scale(1.08);
    }
}

@keyframes wisdomRaysTurn {
    from {
        transform: translate( -50%, -50% ) rotate(0deg);
    }

    to {
        transform: translate( -50%, -50% ) rotate(360deg);
    }
}

@keyframes wisdomOrbitOne {
    from {
        transform: translate( -50%, -50% ) rotate(-9deg);
    }

    to {
        transform: translate( -50%, -50% ) rotate(351deg);
    }
}

@keyframes wisdomOrbitTwo {
    from {
        transform: translate( -50%, -50% ) rotate(11deg);
    }

    to {
        transform: translate( -50%, -50% ) rotate(-349deg);
    }
}

@keyframes wisdomStarDriftOne {
    from {
        transform: translate3d( 0, 0, 0 );
    }

    to {
        transform: translate3d( 72px, 36px, 0 );
    }
}

@keyframes wisdomStarDriftTwo {
    from {
        transform: translate3d( 0, 0, 0 );
    }

    to {
        transform: translate3d( -64px, 44px, 0 );
    }
}

@keyframes wisdomGlowBreathOne {
    0%, 100% {
        opacity: 0.36;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.62;
        transform: scale(1.08);
    }
}

@keyframes wisdomGlowBreathTwo {
    0%, 100% {
        opacity: 0.30;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.56;
        transform: scale(1.09);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wisdom-star-field, .wisdom-cosmic-glow, .wisdom-cosmic-halo, .wisdom-cosmic-rays, .wisdom-cosmic-orbit, .wisdom-vishwaroop-frame, .wisdom-vishwaroop-image {
        animation: none !important;
    }

    .wisdom-vishwaroop-frame {
        opacity: 1;
        transform: translate3d( -50%, 0, 0 ) scale(1);
    }
}

.final-journey-section {
    background: #ffffff;
}

.final-journey-card {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px;
    border-radius: 40px;
    color: #ffffff;
    background: radial-gradient( circle at 78% 30%, rgba(255, 215, 159, 0.25), transparent 30% ), linear-gradient( 135deg, #9c4300, #cf6207 50%, #eb8a28 );
    box-shadow: 0 35px 90px rgba(122, 53, 2, 0.23);
}

.final-journey-content {
    position: relative;
    z-index: 5;
    width: min( 720px, 100% );
    text-align: center;
}

.final-journey-content .section-eyebrow {
    color: rgba( 255, 255, 255, 0.73 );
}

.final-journey-content h2 {
    margin-bottom: 22px;
    font-size: clamp( 42px, 5vw, 70px );
    line-height: 1.04;
    letter-spacing: -0.05em;
}

.final-journey-content h2 span {
    display: block;
    color: #ffe3b9;
}

.final-journey-content p {
    max-width: 620px;
    margin: 0 auto 30px;
    color: rgba( 255, 255, 255, 0.80 );
    font-size: 15px;
    line-height: 1.85;
}

.final-journey-button {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 24px;
    border-radius: 15px;
    color: #9b4301;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(87, 36, 0, 0.21);
    font-size: 13px;
    font-weight: 850;
    transition: transform var(--ag-transition);
}

.final-journey-button:hover {
    transform: translateY(-3px);
}

.final-journey-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.final-journey-rings span {
    position: absolute;
    border: 1px solid rgba( 255, 255, 255, 0.13 );
    border-radius: 50%;
}

.final-journey-rings span:nth-child(1) {
    width: 550px;
    height: 550px;
    left: -210px;
    top: -260px;
}

.final-journey-rings span:nth-child(2) {
    width: 350px;
    height: 350px;
    right: -80px;
    bottom: -160px;
}

.final-journey-rings span:nth-child(3) {
    width: 190px;
    height: 190px;
    right: 80px;
    top: 50px;
    border-style: dashed;
    animation: simpleSpin 25s linear infinite;
}

.final-journey-symbol {
    position: absolute;
    right: 70px;
    bottom: 20px;
    color: rgba( 255, 255, 255, 0.11 );
    font-size: 170px;
}

.site-footer {
    padding: 76px 0 25px;
    color: rgba( 255, 255, 255, 0.76 );
    background: #211108;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.45fr repeat( 3, 1fr );
    gap: 50px;
    padding-bottom: 52px;
}

.footer-brand .brand-copy strong {
    color: #ffffff;
}

.footer-brand .brand-copy span {
    color: rgba( 255, 255, 255, 0.49 );
}

.footer-brand p {
    max-width: 330px;
    margin-top: 20px;
    color: rgba( 255, 255, 255, 0.52 );
    font-size: 12px;
    line-height: 1.8;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin-bottom: 18px;
    color: #ffffff;
    font-size: 13px;
}

.footer-column a, .footer-logout-button {
    margin-bottom: 10px;
    color: rgba( 255, 255, 255, 0.56 );
    background: transparent;
    font-size: 12px;
    cursor: pointer;
    transition: color var(--ag-transition);
}

.footer-column a:hover, .footer-logout-button:hover {
    color: #e5b86e;
}

#footerGuestLinks, #footerUserLinks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid rgba( 255, 255, 255, 0.08 );
}

.footer-bottom p {
    margin: 0;
    color: rgba( 255, 255, 255, 0.40 );
    font-size: 10px;
}

.mobile-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--ag-border);
    border-radius: 15px;
    background: var(--ag-bg-soft);
}

.mobile-user-avatar {
    width: 42px;
    height: 42px;
}

.mobile-user-profile > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mobile-user-profile strong, .mobile-user-profile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-user-profile strong {
    font-size: 13px;
}

.mobile-user-profile small {
    margin-top: 2px;
    color: var(--ag-text-muted);
    font-size: 10px;
}

.mobile-account-link {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 11px;
    color: var(--ag-text-soft);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.back-to-top {
    position: fixed;
    left: 24px;
    right: auto;
    bottom: 24px;
    z-index: 900;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--ag-saffron), var(--ag-saffron-dark) );
    box-shadow: 0 14px 34px rgba(102, 47, 5, 0.24);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--ag-transition), visibility var(--ag-transition), transform var(--ag-transition);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.reveal-element {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 650ms ease, transform 650ms ease;
}

.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mandala-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ag-gold);
    background: radial-gradient( circle, #fff8e8, #ead4a5 );
    font-size: 72px;
}

:focus-visible {
    outline: 3px solid rgba(207, 98, 7, 0.26);
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .hero-section {
        min-height: auto;
        display: block;
        padding-top: calc( var(--ag-header-height) + 55px );
        padding-bottom: 80px;
    }

    .hero-content {
        transform: none;
    }

    .hero-mandala-column {
        transform: none;
    }
}

@keyframes loaderPulse {
    0%, 100% {
        opacity: 0.70;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes accountMenuOpen {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shlokaRingClockwise {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes shlokaRingAntiClockwise {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

@keyframes mandalaGlowPulse {
    0%, 100% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes simpleSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes reverseSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.visual-experience-section {
    position: relative;
    overflow: hidden;
    padding-top: 82px;
    padding-bottom: 82px;
    background: linear-gradient( 180deg, #fffdf9 0%, #fbf5ea 100% );
}

.visual-experience-section .container {
    max-width: 1240px;
}

.visual-experience-panel, .experience-cinematic-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr);
    min-height: 500px;
    max-height: 535px;
    overflow: hidden;
    border: 1px solid rgba(111, 68, 31, 0.16);
    border-radius: 30px;
    background: #21120b;
    box-shadow: 0 28px 72px rgba(55, 31, 13, 0.17);
    isolation: isolate;
}

.experience-battlefield-scene {
    position: relative;
    min-width: 0;
    min-height: 500px;
    height: 100%;
    overflow: hidden;
    background: #8f522f;
    isolation: isolate;
}

.experience-sky, .experience-sun-glow, .experience-distant-mountains, .experience-army, .experience-battlefield-ground, .experience-dust, .experience-character-glow {
    display: none !important;
}

.experience-character-stage {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: none;
    transform-origin: center center;
    overflow: hidden;
}

.visual-experience-panel.is-visible .experience-character-stage {
    opacity: 1;
    transform: none;
    animation: none;
}

.experience-character-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(1.04) contrast(1.025) brightness(0.99);
    transform: scale(1.012);
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.visual-experience-panel.is-visible .experience-character-image {
    animation: experiencePremiumImageBreath 14s ease-in-out infinite alternate;
}

@keyframes experiencePremiumImageBreath {
    from {
        transform: scale(1.012);
    }

    to {
        transform: scale(1.035);
    }
}

.experience-scene-vignette {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: linear-gradient( 180deg, rgba(38, 18, 9, 0.02) 0%, transparent 52%, rgba(44, 19, 9, 0.22) 100% ), linear-gradient( 90deg, rgba(37, 17, 9, 0.08), transparent 24%, transparent 78%, rgba(40, 18, 10, 0.12) );
    pointer-events: none;
}

.experience-scene-caption {
    left: 20px;
    bottom: 18px;
    z-index: 10;
    max-width: calc(100% - 40px);
    padding: 8px 12px;
    border-color: rgba(255, 230, 184, 0.22);
    background: rgba(47, 22, 11, 0.58);
    box-shadow: 0 8px 20px rgba(25, 11, 6, 0.16);
}

.experience-scene-caption p {
    font-size: 9px;
}

.visual-experience-content, .experience-content-panel {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px 48px;
    color: #ffffff;
    background: radial-gradient( circle at 100% 0%, rgba(229, 139, 40, 0.12), transparent 34% ), linear-gradient( 145deg, #2a170e 0%, #21120b 62%, #180e09 100% );
}

.visual-experience-content::before, .experience-content-panel::before {
    top: 8%;
    bottom: 8%;
}

.visual-experience-content .section-eyebrow {
    margin-bottom: 13px;
    color: #e6ad58;
    font-size: 10px;
    letter-spacing: 0.10em;
}

.visual-experience-content h2 {
    max-width: 500px;
    margin-bottom: 15px;
    color: #fffaf3;
    font-size: clamp( 38px, 3.35vw, 51px );
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.visual-experience-content > p {
    max-width: 500px;
    margin-bottom: 0;
    color: rgba(255, 245, 231, 0.68);
    font-size: 13px;
    line-height: 1.72;
}

.visual-feature-list {
    gap: 11px;
    margin-top: 22px;
}

.visual-feature-list li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    font-size: 11.5px;
    line-height: 1.4;
}

.visual-feature-list span {
    width: 31px;
    height: 31px;
    font-size: 9px;
}

.visual-play-button.experience-story-button {
    height: 44px;
    margin-top: 25px;
    padding: 0 18px;
    font-size: 11px;
}

.visual-play-button.experience-story-button strong {
    font-size: 11px;
}

@media (min-width: 1281px) {
    .visual-experience-panel, .experience-cinematic-panel {
        max-width: 1180px;
        margin: 0 auto;
    }
}

@media (max-width: 1180px) {
    .visual-experience-panel, .experience-cinematic-panel {
        min-height: 480px;
        max-height: none;
        grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    }

    .experience-battlefield-scene, .visual-experience-content, .experience-content-panel {
        min-height: 480px;
    }

    .visual-experience-content, .experience-content-panel {
        padding: 38px 40px;
    }
}

@media (max-width: 960px) {
    .visual-experience-panel, .experience-cinematic-panel {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .experience-battlefield-scene {
        min-height: 520px;
    }

    .visual-experience-content, .experience-content-panel {
        min-height: 0;
        padding: 44px 42px;
    }
}

@media (max-width: 640px) {
    .visual-experience-section {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .visual-experience-panel, .experience-cinematic-panel {
        border-radius: 24px;
    }

    .experience-battlefield-scene {
        min-height: 390px;
    }

    .experience-character-image {
        object-position: center 54%;
    }

    .visual-experience-content, .experience-content-panel {
        padding: 34px 24px;
    }

    .visual-experience-content h2 {
        font-size: clamp( 36px, 10vw, 48px );
    }

    .experience-scene-caption {
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .visual-experience-panel.is-visible .experience-character-image {
        animation: none !important;
        transform: scale(1.012);
    }
}

.site-header-refined {
    border-bottom: 1px solid rgba(156, 103, 39, 0.10);
    background: rgba( 255, 250, 241, 0.84 );
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
    box-shadow: 0 8px 28px rgba(76, 46, 19, 0.035);
}

.site-header-refined.scrolled {
    border-bottom-color: rgba(151, 98, 34, 0.15);
    background: rgba( 255, 250, 241, 0.96 );
    box-shadow: 0 12px 32px rgba(65, 39, 16, 0.07);
}

.site-header-refined .brand {
    gap: 13px;
}

.site-header-refined .brand-logo {
    width: 50px;
    height: 50px;
    border-color: rgba(184, 130, 40, 0.22);
    box-shadow: 0 8px 20px rgba(75, 46, 18, 0.07);
}

.site-header-refined .brand-copy strong {
    color: #2a190f;
    font-size: 18px;
    letter-spacing: -0.015em;
}

.site-header-refined .brand-copy span {
    color: #8b7664;
    font-size: 9.5px;
    letter-spacing: 0.05em;
}

.site-header-refined .desktop-nav {
    gap: 32px;
}

.site-header-refined .nav-link {
    color: #695547;
    font-size: 12.5px;
    font-weight: 760;
}

.site-header-refined .nav-link:hover, .site-header-refined .nav-link.active {
    color: #a64c0a;
}

.site-header-refined .nav-link::after {
    height: 1.5px;
    background: linear-gradient( 90deg, #b57922, #d76d11 );
}

.site-header-refined .nav-login-button, .site-header-refined .nav-primary-button {
    transform: none !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-header-refined .nav-login-button {
    color: #4a3528;
    border: 1px solid transparent;
    border-radius: 999px;
}

.site-header-refined .nav-login-button:hover {
    color: #9f4709;
    border-color: rgba(184, 130, 40, 0.16);
    background: rgba(255, 255, 255, 0.42);
}

.site-header-refined .nav-primary-button {
    min-height: 44px;
    padding: 0 19px;
    border: 1px solid rgba(166, 73, 5, 0.08);
    border-radius: 999px;
    background: linear-gradient( 135deg, #da6b0d, #b84c03 );
    box-shadow: 0 10px 24px rgba(166, 72, 5, 0.17);
}

.site-header-refined .nav-primary-button:hover {
    transform: none !important;
    background: linear-gradient( 135deg, #df7112, #bd5104 );
    box-shadow: 0 10px 24px rgba(166, 72, 5, 0.21);
}

.site-header-refined .user-account-button {
    min-height: 46px;
    gap: 9px;
    padding: 4px 10px 4px 5px;
    border: 1px solid rgba(140, 92, 37, 0.12);
    border-radius: 999px;
    background: rgba( 255, 255, 255, 0.48 );
    box-shadow: 0 8px 20px rgba(72, 43, 18, 0.045);
    transform: none !important;
}

.site-header-refined .user-account-button:hover {
    border-color: rgba(175, 113, 39, 0.20);
    box-shadow: 0 8px 20px rgba(72, 43, 18, 0.065);
    transform: none !important;
}

.site-header-refined .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.site-header-refined .user-account-copy strong {
    max-width: 118px;
    color: #352117;
    font-size: 11.5px;
}

.site-header-refined .user-account-copy small {
    margin-top: 1px;
    color: #9a806b;
    font-size: 8.5px;
}

.hero-section-refined {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--ag-header-height) + 20px) 0 28px;
    overflow: hidden;
    background: radial-gradient( circle at 78% 41%, rgba(211, 158, 64, 0.18), transparent 28% ), radial-gradient( circle at 18% 24%, rgba(232, 173, 86, 0.075), transparent 26% ), linear-gradient( 180deg, #fffaf1 0%, #fbf3e5 58%, #fffaf3 100% );
    isolation: isolate;
}

.hero-section-refined::before {
    content: "ॐ श्रीमद्भगवद्गीता कर्मण्येवाधिकारस्ते योगस्थः कुरु कर्माणि";
    position: absolute;
    left: -3%;
    top: 20%;
    z-index: 0;
    width: 108%;
    overflow: hidden;
    color: rgba(151, 101, 33, 0.035);
    font-family: "Nirmala UI", "Mangal", serif;
    font-size: clamp( 42px, 6vw, 90px );
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transform: rotate(-7deg);
    pointer-events: none;
    user-select: none;
}

.hero-section-refined::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -190px;
    z-index: 0;
    width: 900px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(199, 128, 38, 0.08), transparent 68% );
    transform: translateX(-50%);
    filter: blur(8px);
    pointer-events: none;
}

.hero-section-refined .hero-grain {
    opacity: 0.13;
}

.hero-section-refined .hero-light-one {
    width: 520px;
    height: 520px;
    right: -65px;
    top: 58px;
    background: radial-gradient( circle, rgba(216, 162, 72, 0.15), transparent 70% );
}

.hero-section-refined .hero-light-two {
    width: 290px;
    height: 290px;
    left: -110px;
    bottom: -75px;
    background: radial-gradient( circle, rgba(199, 92, 12, 0.055), transparent 72% );
}

.hero-container-refined {
    position: relative;
    z-index: 4;
    grid-template-columns: minmax(0, 0.96fr) minmax(500px, 1.04fr);
    gap: clamp( 38px, 4.8vw, 72px );
}

.hero-content-refined {
    max-width: 625px;
    transform: translateY(-10px);
}

.hero-content-refined .hero-kicker {
    gap: 10px;
    margin-bottom: 23px;
    padding: 8px 13px;
    border: 1px solid rgba(175, 118, 40, 0.22);
    color: #9f691b;
    background: rgba( 255, 252, 245, 0.58 );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.hero-content-refined .hero-kicker-symbol {
    color: #ac721c;
    font-size: 16px;
}

.hero-content-refined .hero-title {
    max-width: 660px;
    margin-bottom: 21px;
    color: #28180f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp( 58px, 5.35vw, 78px );
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.hero-content-refined .hero-title > span {
    display: block;
    margin-top: 9px;
    color: #c45808;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-weight: 850;
    letter-spacing: -0.06em;
}

.hero-content-refined .hero-description {
    max-width: 555px;
    margin-bottom: 27px;
    color: #6d5949;
    font-size: 15px;
    line-height: 1.82;
}

.hero-content-refined .hero-actions {
    gap: 18px;
    margin-bottom: 0;
}

.hero-content-refined .primary-button {
    min-height: 55px;
    padding: 0 23px;
    border: 1px solid rgba(160, 67, 4, 0.08);
    border-radius: 999px;
    background: linear-gradient( 135deg, #dc6e0f, #b74b03 );
    box-shadow: 0 14px 30px rgba(159, 67, 4, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: none !important;
    transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.hero-content-refined .primary-button:hover {
    transform: none !important;
    background: linear-gradient( 135deg, #e27514, #bd5004 );
    box-shadow: 0 14px 30px rgba(159, 67, 4, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-content-refined .primary-button:hover .button-arrow {
    transform: none !important;
}

.hero-content-refined .text-action-button {
    min-height: 55px;
    color: #3e2b20;
    font-size: 12.5px;
    transform: none !important;
}

.hero-content-refined .text-action-symbol {
    width: 32px;
    height: 32px;
    border-color: rgba(176, 117, 38, 0.24);
    color: #a66a1b;
    background: rgba(255, 255, 255, 0.36);
    transform: none !important;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.hero-content-refined .text-action-button:hover .text-action-symbol {
    transform: none !important;
    border-color: rgba(176, 117, 38, 0.34);
    background: rgba(255, 252, 244, 0.78);
}

.hero-mandala-column-refined {
    position: relative;
    min-height: 545px;
    transform: translateY(-22px);
}

.hero-mandala-column-refined::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: -3;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 243, 209, 0.56) 0%, rgba(225, 173, 89, 0.16) 39%, rgba(204, 133, 44, 0.055) 61%, transparent 74% );
    transform: translate( -50%, -50% );
    filter: blur(7px);
    pointer-events: none;
}

.hero-mandala-column-refined::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 23px;
    z-index: -3;
    width: 330px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(112, 66, 22, 0.14), transparent 70% );
    transform: translateX(-50%);
    filter: blur(10px);
    pointer-events: none;
}

.hero-section-refined .mandala-shloka-ring-outer {
    animation: shlokaRingClockwise 52s linear infinite;
}

.hero-section-refined .mandala-shloka-ring-inner {
    animation: shlokaRingAntiClockwise 39s linear infinite;
}

.hero-section-refined .mandala-decoration-ring-outer {
    border-color: rgba(170, 111, 31, 0.25);
    box-shadow: inset 0 0 62px rgba(184, 130, 40, 0.035), 0 0 24px rgba(185, 124, 37, 0.045);
}

.hero-section-refined .mandala-decoration-ring-middle {
    border-color: rgba(175, 115, 31, 0.28);
}

.hero-section-refined .mandala-inner-halo {
    border-color: rgba(176, 116, 31, 0.34);
    background: radial-gradient( circle, rgba(255, 249, 236, 0.24), rgba(245, 218, 162, 0.08) 50%, transparent 72% );
    box-shadow: 0 0 54px rgba(190, 136, 53, 0.10);
}

.hero-section-refined .mandala-image-border {
    padding: 8px;
    border: 1px solid rgba(168, 104, 25, 0.42);
    background: linear-gradient( 145deg, rgba(255, 253, 247, 0.98), rgba(239, 214, 166, 0.90) );
    box-shadow: 0 24px 56px rgba(84, 49, 17, 0.17), 0 0 0 5px rgba(255, 249, 236, 0.58), inset 0 1px 2px rgba(255, 255, 255, 0.88);
}

.hero-section-refined .mandala-image-frame::after {
    box-shadow: inset 0 0 34px rgba(84, 49, 17, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}

.hero-section-refined .mandala-center-image {
    transform: scale(1.018);
    filter: saturate(1.045) contrast(1.02) brightness(1.01);
}

.hero-section-refined .mandala-center:hover .mandala-center-image {
    transform: scale(1.018);
}

.hero-section-refined .mandala-caption {
    margin-top: -13px;
    color: #8a735f;
}

.hero-section-refined .mandala-caption p {
    max-width: 250px;
    color: #7e6958;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.home-info-strip {
    position: relative;
    z-index: 4;
    overflow: hidden;
    border-top: 1px solid rgba(226, 180, 105, 0.14);
    border-bottom: 1px solid rgba(226, 180, 105, 0.12);
    background: radial-gradient( circle at 50% 0%, rgba(207, 128, 34, 0.10), transparent 44% ), linear-gradient( 135deg, #2a180f 0%, #21130d 62%, #1b100b 100% );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.home-info-strip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 520px;
    height: 100%;
    background: radial-gradient( ellipse, rgba(216, 143, 48, 0.075), transparent 68% );
    transform: translateX(-50%);
    pointer-events: none;
}

.home-info-strip .container {
    position: relative;
    z-index: 2;
}

.home-info-strip-inner {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp( 30px, 5vw, 68px );
    padding: 16px 0;
}

.home-info-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.home-info-item strong {
    color: #fff8ec;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.home-info-item span {
    color: rgba(255, 237, 211, 0.58);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.home-info-separator {
    color: rgba(226, 168, 81, 0.62);
    font-size: 7px;
    line-height: 1;
}

.home-info-strip + .journey-section {
    border-top: 0;
}

@media (max-width: 1180px) {
    .hero-container-refined {
        grid-template-columns: minmax(0, 0.92fr) minmax(470px, 1.08fr);
        gap: 30px;
    }

    .hero-content-refined .hero-title {
        font-size: clamp( 54px, 5vw, 70px );
    }

    .hero-mandala-column-refined {
        transform: translateY(-18px) scale(0.94);
        transform-origin: center center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section-refined .mandala-shloka-ring-outer, .hero-section-refined .mandala-shloka-ring-inner {
        animation: none !important;
    }
}

.chapters-home-section.chapters-premium-section {
    position: relative;
    overflow: hidden;
    padding-top: 74px;
    padding-bottom: 74px;
    background: radial-gradient( circle at 18% 36%, rgba(193, 122, 37, 0.055), transparent 25% ), linear-gradient( 180deg, #fffdf9 0%, #faf4eb 100% );
}

.chapters-home-section.chapters-premium-section::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -235px;
    width: 980px;
    height: 410px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(164, 92, 24, 0.055), transparent 70% );
    transform: translateX(-50%);
    filter: blur(10px);
    pointer-events: none;
}

.chapters-premium-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(430px, 0.92fr) minmax(0, 1.08fr);
    min-height: 485px;
    max-height: 505px;
    overflow: hidden;
    border: 1px solid rgba(89, 53, 26, 0.15);
    border-radius: 30px;
    background: #fffaf2;
    box-shadow: 0 28px 72px rgba(61, 37, 18, 0.14), 0 1px 0 rgba(255, 255, 255, 0.68);
    isolation: isolate;
}

.chapters-premium-visual {
    position: relative;
    min-width: 0;
    min-height: 485px;
    overflow: hidden;
    background: radial-gradient( circle at 58% 35%, rgba(229, 159, 70, 0.24), transparent 28% ), radial-gradient( circle at 36% 72%, rgba(157, 74, 17, 0.14), transparent 36% ), linear-gradient( 145deg, #3a1f10 0%, #29150c 57%, #1c0f09 100% );
    isolation: isolate;
}

.chapters-premium-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient( 180deg, rgba(255, 225, 170, 0.07), transparent 38%, rgba(0, 0, 0, 0.16) );
    pointer-events: none;
}

.chapters-premium-light {
    position: absolute;
    left: 52%;
    top: 43%;
    z-index: 0;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 219, 148, 0.20), rgba(226, 149, 54, 0.075) 44%, transparent 72% );
    transform: translate( -50%, -50% );
    filter: blur(8px);
    pointer-events: none;
}

.chapters-premium-label {
    position: absolute;
    left: 22px;
    top: 20px;
    z-index: 7;
    padding: 7px 11px;
    border: 1px solid rgba(240, 191, 112, 0.19);
    border-radius: 999px;
    color: rgba(255, 239, 213, 0.78);
    background: rgba(33, 17, 10, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.chapters-premium-artwork {
    position: absolute;
    left: 50%;
    bottom: -3px;
    z-index: 3;
    width: auto;
    height: min(92%, 452px);
    max-width: 96%;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter: saturate(1.025) contrast(1.015) drop-shadow( 0 18px 24px rgba(0, 0, 0, 0.22) );
    transform: translateX(-50%);
    transform-origin: center bottom;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    animation: none !important;
}

.chapters-premium-vignette {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient( 90deg, rgba(8, 4, 2, 0.10), transparent 22%, transparent 80%, rgba(10, 5, 3, 0.12) ), linear-gradient( 180deg, transparent 58%, rgba(12, 6, 3, 0.16) );
    pointer-events: none;
}

.chapters-premium-content {
    position: relative;
    min-width: 0;
    min-height: 485px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 48px;
    background: radial-gradient( circle at 100% 0%, rgba(216, 154, 70, 0.09), transparent 29% ), linear-gradient( 145deg, #fffdf8 0%, #faf1e4 100% );
}

.chapters-premium-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9%;
    bottom: 9%;
    width: 1px;
    background: linear-gradient( 180deg, transparent, rgba(181, 120, 41, 0.25), transparent );
    pointer-events: none;
}

.chapters-premium-content .section-eyebrow {
    margin-bottom: 10px;
    color: #ad721c;
    font-size: 9.5px;
    letter-spacing: 0.12em;
}

.chapters-premium-content h2 {
    max-width: 570px;
    margin-bottom: 13px;
    color: #2b190f;
    font-size: clamp( 34px, 3.2vw, 46px );
    font-weight: 830;
    line-height: 1.03;
    letter-spacing: -0.047em;
}

.chapters-premium-content > p {
    max-width: 560px;
    margin-bottom: 0;
    color: #745f4f;
    font-size: 13px;
    line-height: 1.68;
}

.chapters-premium-section .chapters-premium-list {
    margin: 21px 0 20px;
    border-top: 1px solid rgba(126, 80, 35, 0.12);
    border-bottom: 1px solid rgba(126, 80, 35, 0.12);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;
    min-height: 56px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(126, 80, 35, 0.09);
    background: transparent;
    transform: none !important;
    transition: opacity 160ms ease;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item:last-child {
    border-bottom: 0;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item:hover {
    padding-left: 0;
    background: transparent;
    transform: none !important;
    opacity: 0.78;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item > span {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(174, 113, 33, 0.23);
    border-radius: 50%;
    color: #a96c19;
    background: rgba(255, 251, 243, 0.68);
    font-size: 8px;
    font-weight: 850;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item strong {
    color: #372319;
    font-size: 12.5px;
    line-height: 1.2;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item small {
    margin-top: 2px;
    color: #917a68;
    font-size: 9.5px;
    line-height: 1.35;
}

.chapters-premium-section .chapters-premium-button {
    min-height: 45px;
    width: fit-content;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid rgba(173, 98, 18, 0.20);
    border-radius: 999px;
    color: #fffaf1;
    background: linear-gradient( 135deg, #d66b0d, #b44903 );
    box-shadow: 0 10px 24px rgba(131, 54, 5, 0.15);
    font-size: 11px;
    font-weight: 800;
    transform: none !important;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.chapters-premium-section .chapters-premium-button:hover {
    transform: none !important;
    background: linear-gradient( 135deg, #dd7312, #bb4f04 );
    box-shadow: 0 10px 24px rgba(131, 54, 5, 0.19);
}

@media (max-width: 1024px) {
    .chapters-home-section.chapters-premium-section {
        padding-top: 66px;
        padding-bottom: 66px;
    }

    .chapters-premium-panel {
        grid-template-columns: minmax(390px, 0.95fr) minmax(0, 1.05fr);
        min-height: 460px;
        max-height: 480px;
    }

    .chapters-premium-visual, .chapters-premium-content {
        min-height: 460px;
    }

    .chapters-premium-artwork {
        height: min(91%, 420px);
        max-width: 95%;
    }

    .chapters-premium-content {
        padding: 34px 36px;
    }

    .chapters-premium-content h2 {
        font-size: clamp( 31px, 4vw, 41px );
    }
}

@media (max-width: 820px) {
    .chapters-premium-panel {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .chapters-premium-visual {
        min-height: 380px;
    }

    .chapters-premium-artwork {
        height: min(94%, 360px);
        max-width: 92%;
    }

    .chapters-premium-content {
        min-height: 0;
        padding: 34px 34px 36px;
    }

    .chapters-premium-content::before {
        left: 8%;
        right: 8%;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(181, 120, 41, 0.25), transparent );
    }
}

@media (max-width: 640px) {
    .chapters-home-section.chapters-premium-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .chapters-premium-panel {
        border-radius: 22px;
    }

    .chapters-premium-visual {
        min-height: 330px;
    }

    .chapters-premium-artwork {
        height: min(94%, 315px);
        max-width: 96%;
    }

    .chapters-premium-label {
        left: 14px;
        top: 14px;
        font-size: 7.5px;
    }

    .chapters-premium-content {
        padding: 29px 23px 31px;
    }

    .chapters-premium-content h2 {
        font-size: clamp( 29px, 8.5vw, 37px );
    }

    .chapters-premium-content > p {
        font-size: 12.2px;
    }

    .chapters-premium-section .chapters-premium-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 430px) {
    .chapters-premium-visual {
        min-height: 285px;
    }

    .chapters-premium-artwork {
        height: min(95%, 272px);
        max-width: 98%;
    }

    .chapters-premium-content {
        padding: 26px 18px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chapters-premium-artwork, .chapters-premium-button {
        animation: none !important;
        transition: none !important;
    }
}

.chapters-premium-visual {
    position: relative;
    min-height: 485px;
    overflow: hidden;
    background: radial-gradient( circle at 58% 32%, rgba(226, 149, 56, 0.24), transparent 30% ), radial-gradient( circle at 24% 72%, rgba(170, 83, 21, 0.15), transparent 36% ), linear-gradient( 145deg, #3b1f10 0%, #2a160d 54%, #1b0e08 100% );
}

.chapters-premium-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient( ellipse at 48% 72%, rgba(206, 126, 39, 0.12), transparent 44% ), linear-gradient( 180deg, transparent 45%, rgba(44, 20, 8, 0.10) 100% );
    pointer-events: none;
}

.chapters-premium-artwork {
    position: absolute;
    left: 46%;
    bottom: -84px;
    z-index: 3;
    width: min( 128%, 790px );
    height: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    filter: saturate(1.03) contrast(1.02) brightness(1.01) drop-shadow( 0 22px 30px rgba(0, 0, 0, 0.24) );
    transform: translate3d( -50%, 0, 0 ) scale(1.02);
    transform-origin: center bottom;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    animation: chaptersArtworkCinematicDrift 11s ease-in-out infinite !important;
}

.chapters-premium-vignette {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient( 90deg, rgba(8, 4, 2, 0.08) 0%, transparent 18%, transparent 84%, rgba(10, 5, 3, 0.09) 100% ), linear-gradient( 180deg, rgba(255, 220, 160, 0.015) 0%, transparent 56%, rgba(12, 6, 3, 0.20) 100% );
    pointer-events: none;
}

.chapters-premium-label {
    left: 22px;
    top: 20px;
    z-index: 8;
    padding: 7px 11px;
    border: 1px solid rgba(239, 190, 110, 0.20);
    color: rgba(255, 240, 216, 0.82);
    background: rgba(31, 15, 8, 0.54);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

@keyframes chaptersArtworkCinematicDrift {
    0%, 100% {
        transform: translate3d( -50%, 0, 0 ) scale(1.02);
    }

    50% {
        transform: translate3d( -48.5%, -8px, 0 ) scale(1.045);
    }
}

@media (max-width: 1024px) {
    .chapters-premium-artwork {
        left: 47%;
        bottom: -68px;
        width: min( 132%, 700px );
    }
}

@media (max-width: 820px) {
    .chapters-premium-visual {
        min-height: 390px;
    }

    .chapters-premium-artwork {
        left: 48%;
        bottom: -70px;
        width: min( 116%, 650px );
    }
}

@media (max-width: 640px) {
    .chapters-premium-visual {
        min-height: 350px;
    }

    .chapters-premium-artwork {
        left: 48%;
        bottom: -60px;
        width: min( 126%, 560px );
    }

    .chapters-premium-label {
        left: 13px;
        top: 13px;
    }
}

@media (max-width: 430px) {
    .chapters-premium-visual {
        min-height: 305px;
    }

    .chapters-premium-artwork {
        left: 47%;
        bottom: -48px;
        width: min( 136%, 510px );
    }
}

@media (prefers-reduced-motion: reduce) {
    .chapters-premium-artwork {
        animation: none !important;
        transform: translate3d( -50%, 0, 0 ) scale(1.025);
    }
}

.chapters-premium-panel {
    border: 1px solid rgba(116, 69, 28, 0.18);
    background: linear-gradient( 145deg, #fffdf8 0%, #f8ead4 100% );
    box-shadow: 0 34px 80px rgba(66, 38, 17, 0.17), 0 12px 28px rgba(90, 49, 18, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(137, 78, 29, 0.08);
}

.chapters-premium-content {
    position: relative;
    background: radial-gradient( circle at 88% 12%, rgba(231, 181, 96, 0.20), transparent 28% ), radial-gradient( circle at 12% 88%, rgba(184, 102, 31, 0.07), transparent 30% ), linear-gradient( 145deg, #fffdf7 0%, #fbf1df 48%, #f3dfbf 100% );
    box-shadow: inset 18px 0 34px rgba(96, 55, 21, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -18px 38px rgba(129, 74, 28, 0.045);
}

.chapters-premium-content::after {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 0;
    border: 1px solid rgba(178, 117, 36, 0.08);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(118, 70, 27, 0.04);
    pointer-events: none;
}

.chapters-premium-content > * {
    position: relative;
    z-index: 2;
}

.chapters-premium-content .section-eyebrow {
    width: fit-content;
    margin-bottom: 11px;
    padding: 6px 10px;
    border: 1px solid rgba(177, 112, 29, 0.13);
    border-radius: 999px;
    color: #9b6115;
    background: linear-gradient( 180deg, rgba(255, 252, 244, 0.88), rgba(242, 219, 180, 0.62) );
    box-shadow: 0 6px 14px rgba(101, 57, 21, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(134, 77, 26, 0.07);
}

.chapters-premium-content h2 {
    color: #2b170d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 7px 18px rgba(76, 40, 15, 0.055);
}

.chapters-premium-content > p {
    color: #705845;
}

.chapters-premium-section .chapters-premium-list {
    display: grid;
    gap: 8px;
    margin: 20px 0 20px;
    border: 0;
    background: transparent;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item {
    min-height: 58px;
    padding: 10px 13px;
    border: 1px solid rgba(133, 83, 39, 0.10);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.86), rgba(246, 232, 207, 0.74) );
    box-shadow: 0 8px 16px rgba(82, 46, 18, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(119, 70, 28, 0.045);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    transform: none !important;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item:hover {
    padding-left: 13px;
    border-color: rgba(171, 109, 32, 0.18);
    background: linear-gradient( 145deg, #fffdf8, #f4dfbc );
    box-shadow: 0 10px 20px rgba(82, 46, 18, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(119, 70, 28, 0.05);
    transform: none !important;
    opacity: 1;
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item > span {
    width: 29px;
    height: 29px;
    border: 1px solid rgba(154, 95, 26, 0.22);
    color: #7f4b0d;
    background: radial-gradient( circle at 32% 28%, #fff9df 0%, #efd09a 48%, #c99542 100% );
    box-shadow: 0 5px 10px rgba(112, 64, 21, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(110, 61, 18, 0.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item strong {
    color: #302016;
    font-size: 12.8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

.chapters-premium-section .chapters-premium-list .chapter-preview-item small {
    color: #8b725e;
}

.chapters-premium-section .chapters-premium-button {
    border: 1px solid rgba(128, 58, 7, 0.22);
    color: #fffaf0;
    background: linear-gradient( 180deg, #e17a19 0%, #c65b08 48%, #a94403 100% );
    box-shadow: 0 12px 24px rgba(117, 48, 4, 0.22), 0 3px 0 rgba(112, 45, 2, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(93, 36, 2, 0.16);
    text-shadow: 0 1px 1px rgba(83, 31, 0, 0.22);
    transform: none !important;
}

.chapters-premium-section .chapters-premium-button:hover {
    background: linear-gradient( 180deg, #e98521 0%, #cf620c 48%, #af4b04 100% );
    box-shadow: 0 13px 26px rgba(117, 48, 4, 0.24), 0 3px 0 rgba(112, 45, 2, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -2px 4px rgba(93, 36, 2, 0.15);
    transform: none !important;
}

.chapters-premium-content::before {
    left: 0;
    top: 7%;
    bottom: 7%;
    width: 2px;
    background: linear-gradient( 180deg, transparent, rgba(217, 161, 76, 0.18) 18%, rgba(170, 103, 29, 0.38) 50%, rgba(217, 161, 76, 0.18) 82%, transparent );
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.34);
    pointer-events: none;
}

@media (max-width: 820px) {
    .chapters-premium-content::after {
        inset: 9px;
    }

    .chapters-premium-content::before {
        left: 7%;
        right: 7%;
        top: 0;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient( 90deg, transparent, rgba(217, 161, 76, 0.18) 18%, rgba(170, 103, 29, 0.38) 50%, rgba(217, 161, 76, 0.18) 82%, transparent );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
    }
}

@media (max-width: 640px) {
    .chapters-premium-section .chapters-premium-list {
        gap: 7px;
    }

    .chapters-premium-section .chapters-premium-list .chapter-preview-item {
        min-height: 54px;
        padding: 9px 11px;
    }

    .chapters-premium-section .chapters-premium-list .chapter-preview-item:hover {
        padding-left: 11px;
    }
}

:root {
    --ag-section-space: 62px;
    --ag-section-space-tablet: 50px;
    --ag-section-space-mobile: 40px;
}

main .journey-section.section-padding,
main .chapters-home-section.section-padding,
main .visual-experience-section.section-padding,
main .wisdom-section.section-padding,
main .final-journey-section.section-padding {
    padding-top: var(--ag-section-space);
    padding-bottom: var(--ag-section-space);
}

.home-info-strip-inner {
    min-height: 72px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.journey-heading {
    margin-bottom: 44px;
}

.chapters-home-section.chapters-premium-section {
    padding-top: var(--ag-section-space);
    padding-bottom: var(--ag-section-space);
}

.visual-experience-section {
    padding-top: var(--ag-section-space);
    padding-bottom: var(--ag-section-space);
}

.wisdom-cinematic-container {
    min-height: 620px;
}

.wisdom-cosmic-stage {
    min-height: 570px;
}

.final-journey-card {
    min-height: 430px;
    padding: 58px;
}

.site-footer {
    padding-top: 58px;
    padding-bottom: 22px;
}

.footer-main {
    padding-bottom: 38px;
}

@media (max-width: 1024px) {
    main .journey-section.section-padding,
    main .chapters-home-section.section-padding,
    main .visual-experience-section.section-padding,
    main .wisdom-section.section-padding,
    main .final-journey-section.section-padding {
        padding-top: var(--ag-section-space-tablet);
        padding-bottom: var(--ag-section-space-tablet);
    }

    .journey-heading {
        margin-bottom: 36px;
    }

    .home-info-strip-inner {
        min-height: 66px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .wisdom-cinematic-container {
        min-height: 580px;
    }

    .wisdom-cosmic-stage {
        min-height: 540px;
    }

    .final-journey-card {
        min-height: 390px;
        padding: 48px;
    }
}

@media (max-width: 640px) {
    main .journey-section.section-padding,
    main .chapters-home-section.section-padding,
    main .visual-experience-section.section-padding,
    main .wisdom-section.section-padding,
    main .final-journey-section.section-padding {
        padding-top: var(--ag-section-space-mobile);
        padding-bottom: var(--ag-section-space-mobile);
    }

    .journey-heading {
        margin-bottom: 30px;
    }

    .home-info-strip-inner {
        min-height: 58px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .wisdom-cinematic-container,
    .wisdom-cosmic-stage {
        min-height: 0;
    }

    .final-journey-card {
        min-height: 0;
        padding: 38px 22px;
    }

    .site-footer {
        padding-top: 44px;
        padding-bottom: 20px;
    }

    .footer-main {
        padding-bottom: 30px;
    }
}

/* ============================================================
   47. HOME HERO — CLEAN DYNAMIC COSMIC BODIES
   ------------------------------------------------------------
   FINAL DIRECTION FOR THE HOME HERO:

   - No realistic / toy-looking CSS planets
   - No giant spotlight rays
   - No hard-coded galaxy / black-hole artwork
   - Dark cinematic universe atmosphere
   - Soft Milky-Way-style haze
   - Dynamic celestial bodies created by main.js
   - Dynamic asteroids / debris created by main.js
   - Point-A-to-Point-B motion handled by main.js
   - Physical-looking collision:
       white-hot core
       plasma bloom
       dark ejecta cloud
       rock fragments
       single broad shockwave
   - Krishna-Arjuna artwork remains static
   - Only the two Sanskrit rings rotate

   IMPORTANT:
   Every visual selector in this block is scoped to #home.
   Journey / Chapters / Experience / Wisdom / Footer / Sakha
   are intentionally untouched.
============================================================ */


/* ============================================================
   47.1 HERO FOUNDATION
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies {
    --hero-space-black:
        #020610;

    --hero-space-navy:
        #061126;

    --hero-space-blue:
        #0b1832;

    --hero-space-indigo:
        #14172f;

    --hero-space-warm:
        #21140f;

    --hero-cosmic-gold:
        #e9aa4a;

    --hero-cosmic-gold-soft:
        rgba(
            233,
            170,
            74,
            0.20
        );

    --hero-cosmic-blue:
        #88b5ff;

    --hero-cosmic-white:
        #fff9ed;


    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;


    background:
        radial-gradient(
            ellipse
            at 76% 50%,
            rgba(
                174,
                91,
                45,
                0.12
            )
            0%,
            transparent
            41%
        ),

        radial-gradient(
            ellipse
            at 21% 18%,
            rgba(
                57,
                96,
                178,
                0.14
            )
            0%,
            transparent
            38%
        ),

        radial-gradient(
            ellipse
            at 49% 82%,
            rgba(
                99,
                62,
                141,
                0.08
            )
            0%,
            transparent
            43%
        ),

        linear-gradient(
            120deg,
            var(--hero-space-black)
            0%,
            var(--hero-space-navy)
            29%,
            var(--hero-space-blue)
            49%,
            var(--hero-space-indigo)
            70%,
            var(--hero-space-warm)
            100%
        );
}


/*
   Remove the large light Sanskrit wallpaper from the original
   cream Hero. The actual rotating Sanskrit rings remain intact.
*/

#home.hero-section-refined.hero-cosmic-bodies::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    width:
        auto;

    color:
        transparent;

    font-size:
        0;

    letter-spacing:
        0;

    transform:
        none;

    background:
        radial-gradient(
            circle
            at 51% 48%,
            transparent
            0%,
            transparent
            50%,
            rgba(
                0,
                0,
                0,
                0.12
            )
            77%,
            rgba(
                0,
                0,
                0,
                0.38
            )
            100%
        );

    pointer-events:
        none;
}


/*
   Remove the old cream/golden floor glow.
*/

#home.hero-section-refined.hero-cosmic-bodies::after {
    content:
        "";

    position:
        absolute;

    inset:
        auto 0 0 0;

    left:
        0;

    bottom:
        0;

    z-index:
        1;

    width:
        auto;

    height:
        35%;

    border-radius:
        0;

    background:
        linear-gradient(
            to top,
            rgba(
                0,
                0,
                0,
                0.17
            )
            0%,
            transparent
            100%
        );

    transform:
        none;

    filter:
        none;

    pointer-events:
        none;
}


/* ============================================================
   47.2 COSMIC RUNTIME STAGE
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-scene {
    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    overflow:
        hidden;

    pointer-events:
        none;

    perspective:
        1450px;

    perspective-origin:
        57%
        46%;

    transform-style:
        preserve-3d;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-backdrop,

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-star-layer,

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-trail-layer,

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body-layer,

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-asteroid-layer,

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-layer,

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-light-layer {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-backdrop {
    z-index:
        1;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-canvas {
    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    pointer-events:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-star-layer {
    z-index:
        3;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-trail-layer {
    z-index:
        4;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body-layer {
    z-index:
        5;

    transform-style:
        preserve-3d;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-asteroid-layer {
    z-index:
        6;

    transform-style:
        preserve-3d;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-layer {
    z-index:
        8;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-light-layer {
    z-index:
        9;
}


/* ============================================================
   47.3 BACKGROUND NEBULA
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-space-nebula {
    position:
        absolute;

    border-radius:
        50%;

    opacity:
        0.22;

    filter:
        blur(
            68px
        );

    will-change:
        transform,
        opacity;

    pointer-events:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-space-nebula-one {
    width:
        720px;

    height:
        470px;

    left:
        -170px;

    top:
        -150px;

    background:
        radial-gradient(
            ellipse,
            rgba(
                47,
                103,
                205,
                0.30
            )
            0%,
            rgba(
                47,
                83,
                171,
                0.12
            )
            39%,
            transparent
            72%
        );

    animation:
        heroCleanNebulaOne
        24s
        ease-in-out
        infinite;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-space-nebula-two {
    width:
        690px;

    height:
        500px;

    right:
        -190px;

    top:
        -80px;

    background:
        radial-gradient(
            ellipse,
            rgba(
                177,
                83,
                48,
                0.24
            )
            0%,
            rgba(
                119,
                64,
                91,
                0.09
            )
            43%,
            transparent
            73%
        );

    animation:
        heroCleanNebulaTwo
        29s
        ease-in-out
        infinite;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-space-nebula-three {
    width:
        580px;

    height:
        410px;

    left:
        36%;

    bottom:
        -220px;

    background:
        radial-gradient(
            ellipse,
            rgba(
                111,
                69,
                161,
                0.20
            )
            0%,
            rgba(
                49,
                80,
                151,
                0.07
            )
            42%,
            transparent
            71%
        );

    animation:
        heroCleanNebulaThree
        33s
        ease-in-out
        infinite;
}


/* ============================================================
   47.4 MILKY-WAY-STYLE HAZE
   ------------------------------------------------------------
   This is intentionally atmospheric rather than a giant
   illustrated spiral galaxy.
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-space-milky-haze {
    position:
        absolute;

    left:
        49%;

    top:
        46%;

    width:
        148%;

    height:
        44%;

    border-radius:
        50%;

    opacity:
        0.44;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            -13deg
        );

    transform-origin:
        center;

    background:
        radial-gradient(
            ellipse
            at center,
            rgba(
                255,
                238,
                199,
                0.15
            )
            0%,
            rgba(
                126,
                164,
                237,
                0.13
            )
            19%,
            rgba(
                70,
                97,
                175,
                0.09
            )
            37%,
            rgba(
                91,
                65,
                131,
                0.05
            )
            52%,
            transparent
            71%
        );

    filter:
        blur(
            11px
        )
        saturate(
            1.16
        );

    mix-blend-mode:
        screen;

    animation:
        heroMilkyHazeDrift
        34s
        ease-in-out
        infinite;

    pointer-events:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-space-milky-haze::before {
    content:
        "";

    position:
        absolute;

    inset:
        14%
        2%;

    border-radius:
        50%;

    opacity:
        0.33;

    background-image:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.55
            )
            0
            0.7px,
            transparent
            1px
        ),

        radial-gradient(
            circle,
            rgba(
                173,
                198,
                255,
                0.35
            )
            0
            0.65px,
            transparent
            0.95px
        );

    background-size:
        18px
        15px,
        29px
        23px;

    background-position:
        0
        0,
        7px
        12px;

    filter:
        blur(
            0.25px
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-space-vignette {
    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            ellipse
            at 52% 46%,
            transparent
            0%,
            transparent
            46%,
            rgba(
                0,
                0,
                0,
                0.15
            )
            75%,
            rgba(
                0,
                0,
                0,
                0.42
            )
            100%
        );

    pointer-events:
        none;
}


/* ============================================================
   47.5 HERO CONTENT LAYER
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-container-refined {
    position:
        relative;

    z-index:
        20;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined {
    position:
        relative;

    z-index:
        22;
}


/*
   A soft local contrast field behind the copy.
   No visible card / rectangle.
*/

#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined::before {
    content:
        "";

    position:
        absolute;

    left:
        -74px;

    top:
        -54px;

    right:
        -54px;

    bottom:
        -48px;

    z-index:
        -1;

    border-radius:
        42px;

    background:
        radial-gradient(
            ellipse
            at 37% 49%,
            rgba(
                2,
                8,
                22,
                0.54
            )
            0%,
            rgba(
                2,
                8,
                22,
                0.27
            )
            45%,
            rgba(
                2,
                8,
                22,
                0.06
            )
            67%,
            transparent
            79%
        );

    filter:
        blur(
            10px
        );

    pointer-events:
        none;
}


/* ============================================================
   47.6 HERO TYPOGRAPHY
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.hero-kicker {
    border-color:
        rgba(
            222,
            163,
            76,
            0.26
        );

    color:
        #e7ad56;

    background:
        rgba(
            3,
            10,
            24,
            0.46
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.05
        );

    backdrop-filter:
        blur(
            9px
        );

    -webkit-backdrop-filter:
        blur(
            9px
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.hero-kicker-symbol {
    color:
        #e9b15d;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.hero-title {
    color:
        #fff9ef;

    text-shadow:
        0
        6px
        27px
        rgba(
            0,
            0,
            0,
            0.24
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.hero-title > span {
    color:
        #e9932e;

    background:
        linear-gradient(
            90deg,
            #dc7919
            0%,
            #f0a13b
            47%,
            #d8791d
            100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    text-shadow:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.hero-description {
    color:
        rgba(
            236,
            227,
            215,
            0.73
        );

    text-shadow:
        0
        2px
        11px
        rgba(
            0,
            0,
            0,
            0.42
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.text-action-button {
    color:
        rgba(
            255,
            248,
            238,
            0.90
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.text-action-symbol {
    border-color:
        rgba(
            224,
            165,
            79,
            0.27
        );

    color:
        #e7a84f;

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


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.text-action-button:hover
.text-action-symbol {
    border-color:
        rgba(
            232,
            176,
            92,
            0.40
        );

    background:
        rgba(
            232,
            168,
            73,
            0.08
        );
}


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

#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.primary-button {
    border-color:
        rgba(
            255,
            204,
            133,
            0.10
        );

    background:
        linear-gradient(
            135deg,
            #db690b
            0%,
            #bd5007
            100%
        );

    box-shadow:
        0
        16px
        34px
        rgba(
            0,
            0,
            0,
            0.24
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.17
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-content-refined
.primary-button:hover {
    background:
        linear-gradient(
            135deg,
            #e1720e
            0%,
            #c45508
            100%
        );

    box-shadow:
        0
        17px
        36px
        rgba(
            0,
            0,
            0,
            0.27
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.18
        );
}


/* ============================================================
   47.8 CLEAN MANDALA
   ------------------------------------------------------------
   Only the two Sanskrit text rings are visually retained.
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-mandala-column-refined {
    position:
        relative;

    z-index:
        24;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-mandala-column-refined::before {
    width:
        510px;

    height:
        510px;

    opacity:
        0.78;

    background:
        radial-gradient(
            circle,
            rgba(
                245,
                199,
                112,
                0.18
            )
            0%,
            rgba(
                211,
                142,
                58,
                0.07
            )
            39%,
            rgba(
                91,
                107,
                177,
                0.025
            )
            59%,
            transparent
            73%
        );

    filter:
        blur(
            11px
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-mandala-column-refined::after {
    opacity:
        0.58;

    background:
        radial-gradient(
            ellipse,
            rgba(
                0,
                0,
                0,
                0.34
            )
            0%,
            transparent
            72%
        );
}


/*
   Safety: even if an older cached HTML still contains decorative
   rings, do not render them in the final Hero.
*/

#home.hero-section-refined.hero-cosmic-bodies
.mandala-decoration-ring {
    display:
        none !important;
}


/*
   The inner halo is kept as illumination only.
   No visible third ring.
*/

#home.hero-section-refined.hero-cosmic-bodies
.mandala-inner-halo {
    border:
        0;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                234,
                188,
                0.12
            )
            0%,
            rgba(
                219,
                164,
                77,
                0.035
            )
            52%,
            transparent
            73%
        );

    box-shadow:
        0
        0
        48px
        rgba(
            224,
            161,
            68,
            0.06
        );
}


/*
   Keep only left/right markers.
*/

#home.hero-section-refined.hero-cosmic-bodies
.marker-top,

#home.hero-section-refined.hero-cosmic-bodies
.marker-bottom {
    display:
        none !important;
}


#home.hero-section-refined.hero-cosmic-bodies
.marker-left,

#home.hero-section-refined.hero-cosmic-bodies
.marker-right {
    color:
        #e3a348;

    opacity:
        0.82;

    text-shadow:
        0
        0
        13px
        rgba(
            226,
            158,
            67,
            0.14
        );
}


/* ============================================================
   47.9 SANSKRIT RINGS
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.mandala-shloka-ring-outer {
    animation:
        shlokaRingClockwise
        56s
        linear
        infinite;
}


#home.hero-section-refined.hero-cosmic-bodies
.mandala-shloka-ring-inner {
    animation:
        shlokaRingAntiClockwise
        43s
        linear
        infinite;
}


#home.hero-section-refined.hero-cosmic-bodies
.circular-shloka text {
    fill:
        #d99b41;

    filter:
        drop-shadow(
            0
            0
            3px
            rgba(
                229,
                166,
                76,
                0.10
            )
        );
}


/* ============================================================
   47.10 STATIC CENTER ARTWORK
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.mandala-image-border {
    border-color:
        rgba(
            200,
            142,
            58,
            0.38
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                251,
                240,
                0.96
            ),
            rgba(
                223,
                194,
                138,
                0.88
            )
        );

    box-shadow:
        0
        24px
        58px
        rgba(
            0,
            0,
            0,
            0.31
        ),
        0
        0
        0
        4px
        rgba(
            236,
            193,
            109,
            0.09
        ),
        0
        0
        38px
        rgba(
            213,
            143,
            56,
            0.11
        ),
        inset
        0
        1px
        2px
        rgba(
            255,
            255,
            255,
            0.76
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.mandala-center-image {
    transform:
        scale(
            1.018
        );

    filter:
        saturate(
            1.035
        )
        contrast(
            1.02
        )
        brightness(
            1.005
        );
}


/*
   Do not animate / scale the Krishna-Arjuna artwork on hover.
*/

#home.hero-section-refined.hero-cosmic-bodies
.mandala-center:hover
.mandala-center-image {
    transform:
        scale(
            1.018
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.mandala-caption {
    color:
        rgba(
            224,
            207,
            184,
            0.58
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.mandala-caption p {
    color:
        rgba(
            224,
            207,
            184,
            0.58
        );
}


/* ============================================================
   47.11 DYNAMIC STARS
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-star {
    --star-x:
        50%;

    --star-y:
        50%;

    --star-size:
        2px;

    --star-opacity:
        0.62;

    --star-scale:
        1;


    position:
        absolute;

    left:
        var(
            --star-x
        );

    top:
        var(
            --star-y
        );

    width:
        var(
            --star-size
        );

    height:
        var(
            --star-size
        );

    border-radius:
        50%;

    opacity:
        var(
            --star-opacity
        );

    background:
        #fff7e6;

    box-shadow:
        0
        0
        5px
        rgba(
            255,
            247,
            230,
            0.62
        );

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            var(
                --star-scale
            )
        );

    transform-origin:
        center;

    will-change:
        transform,
        opacity;

    pointer-events:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-star.hero-star-blue {
    background:
        #d8e7ff;

    box-shadow:
        0
        0
        6px
        rgba(
            169,
            201,
            255,
            0.72
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-star.hero-star-gold {
    background:
        #f1c06e;

    box-shadow:
        0
        0
        6px
        rgba(
            231,
            170,
            77,
            0.65
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-star.hero-star-bright {
    box-shadow:
        0
        0
        7px
        rgba(
            255,
            255,
            255,
            0.88
        ),
        0
        0
        16px
        rgba(
            146,
            181,
            255,
            0.20
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-star.is-twinkling {
    animation:
        heroCleanStarTwinkle
        var(
            --twinkle-duration,
            3.8s
        )
        ease-in-out
        infinite;
}


/* ============================================================
   47.12 DYNAMIC CELESTIAL BODIES
   ------------------------------------------------------------
   These are intentionally abstract cosmic objects, not Earth /
   Jupiter / Saturn illustrations.
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body {
    --body-x:
        0px;

    --body-y:
        0px;

    --body-size:
        42px;

    --body-scale:
        1;

    --body-opacity:
        0.88;

    --body-depth:
        0px;

    --body-rotation:
        0deg;

    --body-core-one:
        #6e90d2;

    --body-core-two:
        #344e87;

    --body-core-three:
        #151d34;

    --body-rim:
        rgba(
            142,
            184,
            255,
            0.24
        );

    --body-glow:
        rgba(
            100,
            150,
            244,
            0.14
        );


    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        var(
            --body-size
        );

    height:
        var(
            --body-size
        );

    border-radius:
        50%;

    opacity:
        var(
            --body-opacity
        );

    transform:
        translate3d(
            var(
                --body-x
            ),
            var(
                --body-y
            ),
            var(
                --body-depth
            )
        )
        rotate(
            var(
                --body-rotation
            )
        )
        scale(
            var(
                --body-scale
            )
        );

    transform-origin:
        center;

    filter:
        drop-shadow(
            0
            10px
            14px
            rgba(
                0,
                0,
                0,
                0.28
            )
        );

    will-change:
        transform,
        opacity;

    pointer-events:
        none;

    isolation:
        isolate;
}


/*
   Core surface is intentionally uneven / atmospheric rather
   than striped like a cartoon planet.
*/

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle
            at 29% 25%,
            rgba(
                255,
                255,
                255,
                0.54
            )
            0%,
            rgba(
                255,
                255,
                255,
                0.08
            )
            13%,
            transparent
            23%
        ),

        radial-gradient(
            circle
            at 67% 64%,
            rgba(
                0,
                0,
                0,
                0.19
            )
            0%,
            transparent
            28%
        ),

        radial-gradient(
            circle
            at 37% 36%,
            var(
                --body-core-one
            )
            0%,
            var(
                --body-core-two
            )
            43%,
            var(
                --body-core-three
            )
            75%,
            #070a12
            100%
        );

    box-shadow:
        inset
        -10px
        -12px
        17px
        rgba(
            0,
            0,
            0,
            0.54
        ),
        inset
        4px
        4px
        9px
        rgba(
            255,
            255,
            255,
            0.045
        ),
        0
        0
        0
        1px
        var(
            --body-rim
        );
}


/*
   Diffuse halo.
*/

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    z-index:
        1;

    width:
        175%;

    height:
        175%;

    border-radius:
        50%;

    opacity:
        0.78;

    background:
        radial-gradient(
            circle,
            var(
                --body-glow
            )
            0%,
            transparent
            69%
        );

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

    filter:
        blur(
            5px
        );
}


/* Body sizes */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-tiny {
    --body-size:
        18px;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-small {
    --body-size:
        29px;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-medium {
    --body-size:
        46px;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-large {
    --body-size:
        68px;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-near {
    --body-size:
        88px;
}


/* Abstract body palettes */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-blue {
    --body-core-one:
        #6389c8;

    --body-core-two:
        #2d4e82;

    --body-core-three:
        #141d34;

    --body-rim:
        rgba(
            132,
            184,
            255,
            0.26
        );

    --body-glow:
        rgba(
            95,
            148,
            240,
            0.15
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-ember {
    --body-core-one:
        #aa6544;

    --body-core-two:
        #613628;

    --body-core-three:
        #241419;

    --body-rim:
        rgba(
            232,
            139,
            78,
            0.22
        );

    --body-glow:
        rgba(
            223,
            98,
            46,
            0.13
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-violet {
    --body-core-one:
        #8269aa;

    --body-core-two:
        #473868;

    --body-core-three:
        #1e182f;

    --body-rim:
        rgba(
            181,
            139,
            239,
            0.20
        );

    --body-glow:
        rgba(
            142,
            96,
            210,
            0.12
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.hero-body-dark {
    --body-core-one:
        #595760;

    --body-core-two:
        #292a31;

    --body-core-three:
        #0d0f16;

    --body-rim:
        rgba(
            194,
            202,
            221,
            0.10
        );

    --body-glow:
        rgba(
            117,
            142,
            195,
            0.075
        );
}


/* Optional thin luminous rim created by JS */

#home.hero-section-refined.hero-cosmic-bodies
.hero-body-rim {
    position:
        absolute;

    inset:
        -3px;

    z-index:
        3;

    border:
        1px solid
        var(
            --body-rim,
            rgba(
                139,
                180,
                255,
                0.22
            )
        );

    border-radius:
        50%;

    opacity:
        0.72;

    pointer-events:
        none;
}


/* ============================================================
   47.13 BODY TRAILS
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-trail {
    --trail-length:
        105px;

    --trail-opacity:
        0.28;


    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        var(
            --trail-length
        );

    height:
        2px;

    border-radius:
        999px;

    opacity:
        var(
            --trail-opacity
        );

    transform-origin:
        left
        center;

    background:
        linear-gradient(
            90deg,
            rgba(
                221,
                174,
                95,
                0.46
            )
            0%,
            rgba(
                125,
                164,
                238,
                0.20
            )
            36%,
            rgba(
                88,
                126,
                210,
                0.07
            )
            68%,
            transparent
            100%
        );

    filter:
        blur(
            0.45px
        );

    pointer-events:
        none;
}


/* ============================================================
   47.14 ASTEROIDS / DEBRIS
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-asteroid {
    --asteroid-x:
        0px;

    --asteroid-y:
        0px;

    --asteroid-size:
        7px;

    --asteroid-scale:
        1;

    --asteroid-opacity:
        0.58;

    --asteroid-rotation:
        0deg;


    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        var(
            --asteroid-size
        );

    height:
        calc(
            var(
                --asteroid-size
            )
            *
            0.72
        );

    border-radius:
        47%
        34%
        55%
        31%;

    opacity:
        var(
            --asteroid-opacity
        );

    transform:
        translate3d(
            var(
                --asteroid-x
            ),
            var(
                --asteroid-y
            ),
            0
        )
        rotate(
            var(
                --asteroid-rotation
            )
        )
        scale(
            var(
                --asteroid-scale
            )
        );

    background:
        radial-gradient(
            circle
            at 31% 26%,
            rgba(
                255,
                222,
                179,
                0.23
            )
            0%,
            transparent
            24%
        ),

        linear-gradient(
            135deg,
            #755847
            0%,
            #443430
            43%,
            #211b1e
            76%,
            #0d0e13
            100%
        );

    box-shadow:
        inset
        -3px
        -3px
        5px
        rgba(
            0,
            0,
            0,
            0.58
        ),
        0
        5px
        11px
        rgba(
            0,
            0,
            0,
            0.24
        );

    will-change:
        transform,
        opacity;

    pointer-events:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-asteroid.hero-asteroid-near {
    filter:
        blur(
            0.25px
        )
        drop-shadow(
            0
            7px
            10px
            rgba(
                0,
                0,
                0,
                0.32
            )
        );
}


/* ============================================================
   47.15 COLLISION HEATING
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.is-impact-heating::after {
    width:
        210%;

    height:
        210%;

    opacity:
        1;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                230,
                173,
                0.31
            )
            0%,
            rgba(
                255,
                110,
                40,
                0.17
            )
            34%,
            transparent
            72%
        );

    filter:
        blur(
            7px
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-body.is-impact-heating::before {
    box-shadow:
        inset
        -10px
        -12px
        17px
        rgba(
            0,
            0,
            0,
            0.46
        ),
        inset
        7px
        5px
        12px
        rgba(
            255,
            182,
            107,
            0.10
        ),
        0
        0
        0
        1px
        rgba(
            255,
            161,
            80,
            0.32
        ),
        0
        0
        17px
        rgba(
            255,
            102,
            35,
            0.18
        );
}


/* ============================================================
   47.16 PHYSICAL IMPACT EVENT
   ------------------------------------------------------------
   No firework spark fountain.
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-event {
    --impact-x:
        50%;

    --impact-y:
        50%;

    --impact-scale:
        1;


    position:
        absolute;

    left:
        var(
            --impact-x
        );

    top:
        var(
            --impact-y
        );

    width:
        24px;

    height:
        24px;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            var(
                --impact-scale
            )
        );

    pointer-events:
        none;
}


/* white-hot compression core */

#home.hero-section-refined.hero-cosmic-bodies
.hero-impact-core {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        26px;

    height:
        26px;

    border-radius:
        50%;

    opacity:
        0;

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

    background:
        radial-gradient(
            circle,
            #ffffff
            0%,
            #fff8da
            27%,
            #ffd17e
            51%,
            #f37f2e
            72%,
            rgba(
                219,
                69,
                29,
                0.32
            )
            100%
        );

    box-shadow:
        0
        0
        17px
        rgba(
            255,
            255,
            255,
            0.98
        ),
        0
        0
        42px
        rgba(
            255,
            214,
            139,
            0.80
        ),
        0
        0
        84px
        rgba(
            231,
            111,
            39,
            0.43
        );
}


/* expanding plasma */

#home.hero-section-refined.hero-cosmic-bodies
.hero-impact-plasma {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        112px;

    height:
        78px;

    border-radius:
        50%;

    opacity:
        0;

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

    background:
        radial-gradient(
            ellipse,
            rgba(
                255,
                252,
                229,
                0.86
            )
            0%,
            rgba(
                246,
                174,
                81,
                0.64
            )
            18%,
            rgba(
                220,
                82,
                34,
                0.34
            )
            40%,
            rgba(
                111,
                74,
                128,
                0.13
            )
            61%,
            transparent
            79%
        );

    filter:
        blur(
            6px
        );

    mix-blend-mode:
        screen;
}


/* dark ejecta cloud */

#home.hero-section-refined.hero-cosmic-bodies
.hero-impact-dust {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        154px;

    height:
        92px;

    border-radius:
        50%;

    opacity:
        0;

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

    background:
        radial-gradient(
            ellipse,
            rgba(
                68,
                42,
                37,
                0.45
            )
            0%,
            rgba(
                35,
                27,
                35,
                0.30
            )
            39%,
            rgba(
                18,
                18,
                27,
                0.10
            )
            63%,
            transparent
            78%
        );

    filter:
        blur(
            8px
        );
}


/* one broad shockwave */

#home.hero-section-refined.hero-cosmic-bodies
.hero-impact-shockwave {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        54px;

    height:
        54px;

    border:
        1.5px solid
        rgba(
            255,
            225,
            165,
            0.70
        );

    border-radius:
        50%;

    opacity:
        0;

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

    box-shadow:
        0
        0
        17px
        rgba(
            235,
            175,
            78,
            0.14
        ),
        0
        0
        31px
        rgba(
            113,
            151,
            229,
            0.08
        );
}


/* impact fragments */

#home.hero-section-refined.hero-cosmic-bodies
.hero-impact-fragment {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        var(
            --fragment-size,
            9px
        );

    height:
        calc(
            var(
                --fragment-size,
                9px
            )
            *
            0.72
        );

    border-radius:
        44%
        31%
        55%
        34%;

    opacity:
        0;

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

    background:
        linear-gradient(
            135deg,
            #815039
            0%,
            #3c2c2e
            55%,
            #141218
            100%
        );

    box-shadow:
        inset
        -3px
        -3px
        4px
        rgba(
            0,
            0,
            0,
            0.54
        ),
        0
        0
        6px
        rgba(
            223,
            100,
            43,
            0.12
        );
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-event.is-active
.hero-impact-core {
    animation:
        heroPhysicalImpactCore
        1150ms
        cubic-bezier(
            0.12,
            0.76,
            0.17,
            1
        )
        forwards;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-event.is-active
.hero-impact-plasma {
    animation:
        heroPhysicalImpactPlasma
        1850ms
        ease-out
        forwards;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-event.is-active
.hero-impact-dust {
    animation:
        heroPhysicalImpactDust
        2300ms
        ease-out
        forwards;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-event.is-active
.hero-impact-shockwave {
    animation:
        heroPhysicalImpactShockwave
        1550ms
        cubic-bezier(
            0.10,
            0.79,
            0.16,
            1
        )
        forwards;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-impact-event.is-active
.hero-impact-fragment {
    animation:
        heroPhysicalImpactFragment
        var(
            --fragment-duration,
            1750ms
        )
        ease-out
        forwards;
}


/* ============================================================
   47.17 IMPACT LIGHTING
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-light-flash {
    position:
        absolute;

    inset:
        0;

    opacity:
        0;

    background:
        radial-gradient(
            circle
            at
            var(
                --flash-x,
                70%
            )
            var(
                --flash-y,
                42%
            ),
            rgba(
                255,
                246,
                214,
                0.42
            )
            0%,
            rgba(
                239,
                178,
                86,
                0.14
            )
            13%,
            rgba(
                111,
                150,
                231,
                0.045
            )
            28%,
            transparent
            55%
        );

    mix-blend-mode:
        screen;

    pointer-events:
        none;
}


#home.hero-section-refined.hero-cosmic-bodies
.hero-cosmic-light-flash.is-active {
    animation:
        heroImpactLightFlash
        820ms
        ease-out
        forwards;
}


/*
   Whole-Hero impact state.
*/

#home.hero-section-refined.hero-cosmic-bodies.is-cosmic-impact {
    filter:
        brightness(
            1.075
        )
        saturate(
            1.045
        );

    transition:
        filter
        170ms
        ease;
}


#home.hero-section-refined.hero-cosmic-bodies.is-cosmic-impact
.hero-cosmic-scene {
    filter:
        brightness(
            1.12
        );

    transition:
        filter
        170ms
        ease;
}


/* ============================================================
   47.18 SCROLL CUE
============================================================ */

#home.hero-section-refined.hero-cosmic-bodies
.hero-scroll-cue {
    color:
        rgba(
            224,
            208,
            187,
            0.54
        );
}


/* ============================================================
   47.19 KEYFRAMES — ATMOSPHERE
============================================================ */

@keyframes heroCleanNebulaOne {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(
                0.98
            );

        opacity:
            0.17;
    }

    50% {
        transform:
            translate3d(
                30px,
                19px,
                0
            )
            scale(
                1.055
            );

        opacity:
            0.24;
    }

}


@keyframes heroCleanNebulaTwo {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(
                1
            );

        opacity:
            0.18;
    }

    50% {
        transform:
            translate3d(
                -24px,
                15px,
                0
            )
            scale(
                1.045
            );

        opacity:
            0.24;
    }

}


@keyframes heroCleanNebulaThree {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(
                0.98
            );

        opacity:
            0.14;
    }

    50% {
        transform:
            translate3d(
                18px,
                -18px,
                0
            )
            scale(
                1.06
            );

        opacity:
            0.21;
    }

}


@keyframes heroMilkyHazeDrift {

    0%,
    100% {
        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                -13deg
            )
            scale(
                0.99
            );

        opacity:
            0.37;
    }

    50% {
        transform:
            translate(
                -49%,
                -51%
            )
            rotate(
                -11.8deg
            )
            scale(
                1.035
            );

        opacity:
            0.48;
    }

}


@keyframes heroCleanStarTwinkle {

    0%,
    100% {
        opacity:
            calc(
                var(
                    --star-opacity,
                    0.62
                )
                *
                0.58
            );

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                calc(
                    var(
                        --star-scale,
                        1
                    )
                    *
                    0.88
                )
            );
    }

    50% {
        opacity:
            var(
                --star-opacity,
                0.62
            );

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                calc(
                    var(
                        --star-scale,
                        1
                    )
                    *
                    1.10
                )
            );
    }

}


/* ============================================================
   47.20 KEYFRAMES — PHYSICAL IMPACT
============================================================ */

@keyframes heroPhysicalImpactCore {

    0% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.06
            );
    }

    12% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                1.95
            );
    }

    30% {
        opacity:
            0.96;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                2.72
            );
    }

    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.58
            );
    }

}


@keyframes heroPhysicalImpactPlasma {

    0% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.08
            );
    }

    18% {
        opacity:
            0.84;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.66
            );
    }

    58% {
        opacity:
            0.54;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                1.45
            );
    }

    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                2.35
            );
    }

}


@keyframes heroPhysicalImpactDust {

    0% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.12
            );
    }

    25% {
        opacity:
            0.52;
    }

    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                2.08
            );
    }

}


@keyframes heroPhysicalImpactShockwave {

    0% {
        opacity:
            0.72;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                0.12
            );
    }

    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(
                8.4
            );
    }

}


@keyframes heroPhysicalImpactFragment {

    0% {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                var(
                    --fragment-angle,
                    0deg
                )
            )
            translateX(
                0
            )
            rotate(
                0deg
            );
    }

    100% {
        opacity:
            0;

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(
                var(
                    --fragment-angle,
                    0deg
                )
            )
            translateX(
                var(
                    --fragment-distance,
                    115px
                )
            )
            rotate(
                var(
                    --fragment-spin,
                    220deg
                )
            );
    }

}


@keyframes heroImpactLightFlash {

    0% {
        opacity:
            0;
    }

    10% {
        opacity:
            0.08;
    }

    22% {
        opacity:
            0.70;
    }

    38% {
        opacity:
            0.18;
    }

    100% {
        opacity:
            0;
    }

}


/* ============================================================
   47.21 TABLET
============================================================ */

@media (max-width: 1024px) {

    #home.hero-section-refined.hero-cosmic-bodies
    .hero-space-milky-haze {
        width:
            175%;

        height:
            41%;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-body.hero-body-near {
        --body-size:
            74px;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-body.hero-body-large {
        --body-size:
            59px;
    }

}


/* ============================================================
   47.22 MOBILE
============================================================ */

@media (max-width: 640px) {

    #home.hero-section-refined.hero-cosmic-bodies {
        background:
            radial-gradient(
                ellipse
                at 72% 42%,
                rgba(
                    155,
                    82,
                    44,
                    0.10
                )
                0%,
                transparent
                42%
            ),

            linear-gradient(
                180deg,
                #030815
                0%,
                #07142a
                58%,
                #16121f
                100%
            );
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-space-nebula-three {
        display:
            none;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-space-milky-haze {
        width:
            220%;

        height:
            36%;

        opacity:
            0.30;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-content-refined::before {
        left:
            -22px;

        right:
            -22px;

        top:
            -22px;

        bottom:
            -25px;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-body.hero-body-near {
        --body-size:
            57px;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-body.hero-body-large {
        --body-size:
            48px;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-asteroid.hero-asteroid-near {
        display:
            none;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-impact-plasma {
        width:
            88px;

        height:
            62px;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-impact-dust {
        width:
            122px;

        height:
            76px;
    }

}


/* ============================================================
   47.23 REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    #home.hero-section-refined.hero-cosmic-bodies
    .hero-space-nebula,

    #home.hero-section-refined.hero-cosmic-bodies
    .hero-space-milky-haze,

    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-star,

    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-light-flash {
        animation:
            none !important;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-space-milky-haze {
        opacity:
            0.28;
    }


    #home.hero-section-refined.hero-cosmic-bodies
    .hero-cosmic-star {
        opacity:
            0.42;
    }

}


/* ============================================================
   END — CLEAN DYNAMIC COSMIC BODIES HERO
============================================================ */

/* ============================================================
   48. FINAL DARK NAVY HEADER — MATCHES COSMIC HOME HERO
   ------------------------------------------------------------
   Scope:
   - Header only
   - Does not modify Journey / Chapters / Experience / Wisdom
   - Does not modify Sakha widget
   - Does not modify the Hero cosmic engine

   Visual direction:
   - light black / charcoal base
   - effective navy-blue depth
   - soft warm-gold accents
   - readable off-white navigation
   - darker state after scrolling
============================================================ */


/* ============================================================
   48.1 HEADER SHELL
============================================================ */

.site-header.site-header-refined {
    border-bottom:
        1px solid
        rgba(
            221,
            164,
            78,
            0.12
        );

    background:
        linear-gradient(
            100deg,
            rgba(
                5,
                9,
                16,
                0.965
            )
            0%,
            rgba(
                7,
                18,
                36,
                0.965
            )
            42%,
            rgba(
                9,
                22,
                43,
                0.955
            )
            67%,
            rgba(
                12,
                15,
                22,
                0.972
            )
            100%
        );

    backdrop-filter:
        blur(
            20px
        )
        saturate(
            1.12
        );

    -webkit-backdrop-filter:
        blur(
            20px
        )
        saturate(
            1.12
        );

    box-shadow:
        0
        12px
        34px
        rgba(
            0,
            0,
            0,
            0.19
        );

    transition:
        background
        220ms
        ease,
        border-color
        220ms
        ease,
        box-shadow
        220ms
        ease;
}


/* slightly deeper when page scrolls */

.site-header.site-header-refined.scrolled {
    border-bottom-color:
        rgba(
            226,
            168,
            81,
            0.16
        );

    background:
        linear-gradient(
            100deg,
            rgba(
                3,
                7,
                13,
                0.988
            )
            0%,
            rgba(
                5,
                15,
                30,
                0.985
            )
            44%,
            rgba(
                7,
                18,
                35,
                0.982
            )
            70%,
            rgba(
                9,
                12,
                18,
                0.99
            )
            100%
        );

    box-shadow:
        0
        14px
        38px
        rgba(
            0,
            0,
            0,
            0.27
        );
}


/* subtle navy illumination — no bright rays */

.site-header.site-header-refined::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle
            at 54%
            -85%,
            rgba(
                71,
                113,
                190,
                0.14
            )
            0%,
            transparent
            50%
        );
}


/* ============================================================
   48.2 BRAND
============================================================ */

.site-header.site-header-refined
.brand {
    gap:
        13px;
}


.site-header.site-header-refined
.brand-logo {
    width:
        50px;

    height:
        50px;

    border:
        1px solid
        rgba(
            230,
            174,
            88,
            0.26
        );

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

    box-shadow:
        0
        0
        0
        3px
        rgba(
            225,
            162,
            66,
            0.035
        ),
        0
        8px
        22px
        rgba(
            0,
            0,
            0,
            0.27
        );
}


.site-header.site-header-refined
.brand-copy strong {
    color:
        #f5efe5;

    font-size:
        18px;

    font-weight:
        850;

    letter-spacing:
        -0.015em;

    text-shadow:
        0
        1px
        8px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.site-header.site-header-refined
.brand-copy span {
    margin-top:
        4px;

    color:
        rgba(
            221,
            207,
            190,
            0.58
        );

    font-size:
        9.5px;

    letter-spacing:
        0.05em;
}


/* ============================================================
   48.3 DESKTOP NAVIGATION
============================================================ */

.site-header.site-header-refined
.desktop-nav {
    gap:
        32px;
}


.site-header.site-header-refined
.nav-link {
    color:
        rgba(
            236,
            230,
            220,
            0.72
        );

    font-size:
        12.5px;

    font-weight:
        760;

    text-shadow:
        0
        1px
        7px
        rgba(
            0,
            0,
            0,
            0.18
        );

    transition:
        color
        180ms
        ease;
}


.site-header.site-header-refined
.nav-link:hover {
    color:
        #efb45b;
}


.site-header.site-header-refined
.nav-link.active {
    color:
        #f0a33d;
}


.site-header.site-header-refined
.nav-link::after {
    height:
        1.5px;

    background:
        linear-gradient(
            90deg,
            #d77a20
            0%,
            #f3b452
            55%,
            #d78327
            100%
        );

    box-shadow:
        0
        0
        8px
        rgba(
            231,
            158,
            58,
            0.20
        );
}


/* ============================================================
   48.4 GUEST LOGIN / SIGNUP
============================================================ */

.site-header.site-header-refined
.nav-login-button,

.site-header.site-header-refined
.nav-primary-button {
    transform:
        none !important;

    transition:
        color
        180ms
        ease,
        background
        180ms
        ease,
        border-color
        180ms
        ease,
        box-shadow
        180ms
        ease;
}


.site-header.site-header-refined
.nav-login-button {
    color:
        rgba(
            242,
            235,
            224,
            0.82
        );

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    background:
        transparent;
}


.site-header.site-header-refined
.nav-login-button:hover {
    color:
        #f1b35a;

    border-color:
        rgba(
            225,
            165,
            78,
            0.18
        );

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


.site-header.site-header-refined
.nav-primary-button {
    min-height:
        44px;

    padding:
        0
        19px;

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

    border-radius:
        999px;

    color:
        #fffaf1;

    background:
        linear-gradient(
            135deg,
            #d96a0c
            0%,
            #b84904
            100%
        );

    box-shadow:
        0
        9px
        24px
        rgba(
            0,
            0,
            0,
            0.26
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.14
        );
}


.site-header.site-header-refined
.nav-primary-button:hover {
    transform:
        none !important;

    background:
        linear-gradient(
            135deg,
            #e17210
            0%,
            #c25105
            100%
        );

    box-shadow:
        0
        11px
        27px
        rgba(
            0,
            0,
            0,
            0.29
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.16
        );
}


/* ============================================================
   48.5 LOGGED-IN ACCOUNT BUTTON
============================================================ */

.site-header.site-header-refined
.user-account-button {
    min-height:
        46px;

    gap:
        9px;

    padding:
        4px
        10px
        4px
        5px;

    border:
        1px solid
        rgba(
            219,
            166,
            84,
            0.15
        );

    border-radius:
        999px;

    color:
        #f3ede3;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.065
            )
            0%,
            rgba(
                255,
                255,
                255,
                0.025
            )
            100%
        );

    box-shadow:
        0
        8px
        22px
        rgba(
            0,
            0,
            0,
            0.22
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.045
        );

    backdrop-filter:
        blur(
            10px
        );

    -webkit-backdrop-filter:
        blur(
            10px
        );

    transform:
        none !important;
}


.site-header.site-header-refined
.user-account-button:hover {
    border-color:
        rgba(
            232,
            177,
            89,
            0.27
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.085
            )
            0%,
            rgba(
                255,
                255,
                255,
                0.038
            )
            100%
        );

    box-shadow:
        0
        10px
        25px
        rgba(
            0,
            0,
            0,
            0.26
        );

    transform:
        none !important;
}


.site-header.site-header-refined
.user-avatar {
    width:
        36px;

    height:
        36px;

    font-size:
        12px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #d4861e
            0%,
            #b95508
            100%
        );

    box-shadow:
        0
        5px
        14px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.site-header.site-header-refined
.user-account-copy strong {
    max-width:
        118px;

    color:
        #f4eee5;

    font-size:
        11.5px;
}


.site-header.site-header-refined
.user-account-copy small {
    margin-top:
        1px;

    color:
        rgba(
            218,
            204,
            188,
            0.52
        );

    font-size:
        8.5px;
}


.site-header.site-header-refined
.account-chevron {
    color:
        rgba(
            225,
            211,
            194,
            0.52
        );
}


/* ============================================================
   48.6 ACCOUNT DROPDOWN
============================================================ */

.site-header.site-header-refined
.user-account-menu {
    border:
        1px solid
        rgba(
            218,
            164,
            82,
            0.14
        );

    background:
        linear-gradient(
            155deg,
            rgba(
                8,
                17,
                32,
                0.985
            )
            0%,
            rgba(
                7,
                12,
                22,
                0.992
            )
            100%
        );

    box-shadow:
        0
        22px
        50px
        rgba(
            0,
            0,
            0,
            0.42
        );

    backdrop-filter:
        blur(
            18px
        );

    -webkit-backdrop-filter:
        blur(
            18px
        );
}


.site-header.site-header-refined
.account-menu-profile strong {
    color:
        #f4eee5;
}


.site-header.site-header-refined
.account-menu-profile small {
    color:
        rgba(
            217,
            204,
            188,
            0.54
        );
}


.site-header.site-header-refined
.account-menu-divider {
    background:
        rgba(
            255,
            255,
            255,
            0.075
        );
}


.site-header.site-header-refined
.account-menu-item {
    color:
        rgba(
            238,
            231,
            221,
            0.72
        );
}


.site-header.site-header-refined
.account-menu-item:hover {
    color:
        #efb056;

    background:
        rgba(
            230,
            164,
            72,
            0.08
        );
}


.site-header.site-header-refined
.account-logout-button {
    color:
        #df8a7a;
}


.site-header.site-header-refined
.account-logout-button:hover {
    color:
        #f0a091;

    background:
        rgba(
            214,
            89,
            70,
            0.08
        );
}


/* ============================================================
   48.7 MOBILE MENU BUTTON
============================================================ */

.site-header.site-header-refined
.mobile-menu-button {
    border:
        1px solid
        rgba(
            222,
            168,
            83,
            0.16
        );

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

    box-shadow:
        0
        7px
        18px
        rgba(
            0,
            0,
            0,
            0.19
        );
}


.site-header.site-header-refined
.mobile-menu-button span {
    background:
        rgba(
            246,
            239,
            228,
            0.88
        );
}


/* ============================================================
   48.8 MOBILE USER PROFILE ELEMENTS
   ------------------------------------------------------------
   These selectors matter when responsive.css displays mobile
   account/navigation content.
============================================================ */

.site-header.site-header-refined
.mobile-user-profile {
    border-color:
        rgba(
            220,
            164,
            78,
            0.14
        );

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


.site-header.site-header-refined
.mobile-user-profile strong {
    color:
        #f3ede4;
}


.site-header.site-header-refined
.mobile-user-profile small {
    color:
        rgba(
            219,
            205,
            189,
            0.52
        );
}


.site-header.site-header-refined
.mobile-account-link {
    color:
        rgba(
            239,
            232,
            221,
            0.74
        );
}


.site-header.site-header-refined
.mobile-account-link:hover {
    color:
        #efb057;

    background:
        rgba(
            226,
            160,
            69,
            0.075
        );
}


/* ============================================================
   48.9 SMALL-SCREEN POLISH
============================================================ */

@media (max-width: 1024px) {

    .site-header.site-header-refined {
        background:
            linear-gradient(
                105deg,
                rgba(
                    4,
                    9,
                    17,
                    0.985
                )
                0%,
                rgba(
                    7,
                    18,
                    35,
                    0.98
                )
                60%,
                rgba(
                    10,
                    14,
                    21,
                    0.988
                )
                100%
            );
    }


    .site-header.site-header-refined
    .brand-copy strong {
        color:
            #f5efe5;
    }


    .site-header.site-header-refined
    .brand-copy span {
        color:
            rgba(
                221,
                207,
                190,
                0.56
            );
    }

}


/* ============================================================
   48.10 REDUCED TRANSPARENCY FALLBACK
============================================================ */

@supports not (
    backdrop-filter:
        blur(
            1px
        )
) {

    .site-header.site-header-refined {
        background:
            #071426;
    }


    .site-header.site-header-refined.scrolled {
        background:
            #050f1d;
    }


    .site-header.site-header-refined
    .user-account-button {
        background:
            #0b192b;
    }


    .site-header.site-header-refined
    .user-account-menu {
        background:
            #07111f;
    }

}


/* ============================================================
   END — FINAL DARK NAVY HEADER
============================================================ */

/* ============================================================
   CHAPTERS SECTION — SPACING + READABILITY FIX
   ------------------------------------------------------------
   Scope: desktop / laptop only.
   Keeps the existing visual design intact while adding breathing
   room and improving the readability of normal text.
============================================================ */

@media (min-width: 1025px) {

    .chapters-home-section.chapters-premium-section {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .chapters-premium-panel {
        min-height: 560px;
        max-height: none;
    }

    .chapters-premium-visual {
        min-height: 560px;
    }

    .chapters-premium-content {
        min-height: 560px;
        padding: 56px 60px;
    }

    .chapters-premium-content h2 {
        max-width: 650px;
        margin-bottom: 18px;
        font-size: clamp(40px, 3.3vw, 50px);
        line-height: 1.08;
    }

    .chapters-premium-content > p {
        max-width: 650px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.75;
        color: #654d3c;
    }

    .chapters-premium-section .chapters-premium-list {
        gap: 10px;
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .chapters-premium-section
    .chapters-premium-list
    .chapter-preview-item {
        min-height: 70px;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 14px;
        padding: 13px 16px;
    }

    .chapters-premium-section
    .chapters-premium-list
    .chapter-preview-item > span {
        width: 32px;
        height: 32px;
        font-size: 9px;
        font-weight: 900;
    }

    .chapters-premium-section
    .chapters-premium-list
    .chapter-preview-item strong {
        font-size: 14px;
        font-weight: 800;
        line-height: 1.3;
    }

    .chapters-premium-section
    .chapters-premium-list
    .chapter-preview-item small {
        margin-top: 4px;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #806957;
    }

    .chapters-premium-section .chapters-premium-button {
        min-height: 49px;
        padding-left: 21px;
        padding-right: 21px;
        font-size: 12px;
    }
}

/* ============================================================
   49. JOURNEY — PREMIUM CARD / SKY + WATER / PROGRESSIVE STEPS
   ------------------------------------------------------------
   Scope: #journey only.

   Final direction:
   - Journey now sits inside one premium rounded panel
   - Visual language matches the Chapters card treatment
   - Sky on top, full-width water on bottom
   - No forest
   - No land
   - Four premium glass cards for 01 → 04
   - Connector animates first, destination step activates second
   - Existing main.js hooks remain unchanged
============================================================ */


/* ============================================================
   49.1 SECTION FOUNDATION
============================================================ */

#journey.journey-card-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 16% 24%,
            rgba(187, 117, 37, 0.065) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(116, 75, 32, 0.045) 0%,
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #f8f1e7 100%
        );
}


#journey.journey-card-section::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -255px;

    width: min(1060px, 92vw);
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(167, 97, 27, 0.08) 0%,
            transparent 70%
        );

    filter: blur(14px);

    transform: translateX(-50%);

    pointer-events: none;
}


#journey.journey-card-section.section-padding {
    padding-top: 82px;
    padding-bottom: 88px;
}


/* ============================================================
   49.2 OUTER PREMIUM PANEL
============================================================ */

#journey .journey-premium-panel {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 690px;

    overflow: hidden;
    isolation: isolate;

    border:
        1px solid
        rgba(91, 57, 27, 0.20);

    border-radius: 32px;

    background: #0b4a80;

    box-shadow:
        0 34px 80px rgba(61, 37, 18, 0.17),
        0 12px 30px rgba(71, 42, 18, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(66, 36, 13, 0.10);
}


#journey .journey-premium-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 11;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);

    pointer-events: none;
}


#journey .journey-premium-panel::after {
    content: "";

    position: absolute;

    left: 4%;
    right: 4%;
    top: 1px;

    z-index: 12;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 223, 162, 0.38) 28%,
            rgba(255, 242, 213, 0.62) 50%,
            rgba(255, 223, 162, 0.38) 72%,
            transparent 100%
        );

    opacity: 0.72;

    pointer-events: none;
}


#journey .journey-panel-frame {
    position: absolute;
    inset: 12px;

    z-index: 9;

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

    border-radius: 24px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045);

    pointer-events: none;
}


#journey .journey-panel-glow {
    position: absolute;

    left: 50%;
    top: -210px;

    z-index: 5;

    width: min(1050px, 90vw);
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(150, 219, 255, 0.18) 0%,
            rgba(86, 177, 231, 0.075) 42%,
            transparent 72%
        );

    filter: blur(20px);

    transform: translateX(-50%);

    pointer-events: none;
}


/* ============================================================
   49.3 SCENE LAYER
============================================================ */

#journey .journey-nature-scene,
#journey .journey-sky-water-scene,
#journey .journey-card-scene {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   49.4 CINEMATIC BLUE SKY
============================================================ */

#journey .journey-sky-layer {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            ellipse at 52% 12%,
            rgba(154, 222, 255, 0.28) 0%,
            rgba(89, 181, 235, 0.12) 30%,
            transparent 56%
        ),
        radial-gradient(
            ellipse at 16% 36%,
            rgba(74, 168, 228, 0.18) 0%,
            transparent 40%
        ),
        radial-gradient(
            ellipse at 88% 32%,
            rgba(68, 158, 220, 0.14) 0%,
            transparent 41%
        ),
        linear-gradient(
            180deg,
            #062b60 0%,
            #084b8b 25%,
            #0872b8 48%,
            #3090c7 68%,
            #73bad6 84%,
            #a4d2df 100%
        );
}


#journey .journey-sky-layer::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.018) 0%,
            rgba(255, 255, 255, 0.072) 34%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 50% 60%,
            rgba(237, 249, 255, 0.12) 0%,
            transparent 54%
        );

    opacity: 0.96;
}


#journey .journey-sky-layer::after {
    content: "";

    position: absolute;

    left: -8%;
    right: -8%;
    top: 44%;

    height: 22%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(221, 245, 252, 0.10) 44%,
            rgba(230, 249, 253, 0.24) 100%
        );

    filter: blur(12px);
}


#journey .journey-sky-glow {
    position: absolute;

    left: 50%;
    top: -2%;

    z-index: 2;

    width: min(76vw, 1080px);
    height: 410px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(164, 225, 255, 0.25) 0%,
            rgba(107, 192, 241, 0.10) 40%,
            transparent 72%
        );

    filter: blur(15px);

    transform: translateX(-50%);

    animation:
        journeyCardSkyGlow
        10s
        ease-in-out
        infinite;
}


/* ============================================================
   49.5 CLOUDS
============================================================ */

#journey .journey-cloud-layer {
    position: absolute;

    left: -18%;

    z-index: 3;

    width: 138%;

    border-radius: 50%;

    opacity: 0.28;

    filter: blur(13px);

    mix-blend-mode: screen;

    will-change: transform;
}


#journey .journey-cloud-layer-one {
    top: 14%;

    height: 142px;

    background:
        radial-gradient(
            ellipse at 14% 58%,
            rgba(255, 255, 255, 0.18),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 32% 38%,
            rgba(239, 249, 255, 0.16),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 53% 54%,
            rgba(255, 255, 255, 0.15),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 76% 36%,
            rgba(235, 248, 255, 0.14),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 91% 62%,
            rgba(255, 255, 255, 0.12),
            transparent 20%
        );

    animation:
        journeyCardCloudOne
        30s
        ease-in-out
        infinite
        alternate;
}


#journey .journey-cloud-layer-two {
    top: 31%;

    height: 120px;

    opacity: 0.18;

    background:
        radial-gradient(
            ellipse at 18% 50%,
            rgba(255, 255, 255, 0.15),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 43% 46%,
            rgba(238, 249, 255, 0.12),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 68% 56%,
            rgba(255, 255, 255, 0.12),
            transparent 26%
        ),
        radial-gradient(
            ellipse at 88% 42%,
            rgba(238, 249, 255, 0.10),
            transparent 23%
        );

    animation:
        journeyCardCloudTwo
        38s
        ease-in-out
        infinite
        alternate;
}


/* ============================================================
   49.6 METEORS + SPARKS
============================================================ */

#journey .journey-meteor-field {
    position: absolute;
    inset: 0;

    z-index: 4;

    overflow: hidden;
}


#journey .journey-meteor {
    position: absolute;

    width: 2px;
    height: 94px;

    border-radius: 999px;

    opacity: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(225, 244, 255, 0.30) 48%,
            rgba(255, 232, 176, 0.88) 86%,
            #fffdf4 100%
        );

    box-shadow:
        0 0 8px rgba(255, 230, 171, 0.23);

    transform:
        rotate(48deg);

    transform-origin:
        bottom center;

    will-change:
        transform,
        opacity;
}


#journey .journey-meteor::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -3px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #fff7de;

    box-shadow:
        0 0 10px rgba(255, 240, 198, 0.80),
        0 0 22px rgba(255, 201, 104, 0.44);

    transform:
        translateX(-50%);
}


#journey .journey-meteor-one {
    left: 10%;
    top: -17%;

    animation:
        journeyCardMeteorOne
        11s
        linear
        1.5s
        infinite;
}


#journey .journey-meteor-two {
    left: 69%;
    top: -20%;

    height: 82px;

    animation:
        journeyCardMeteorTwo
        15s
        linear
        5.6s
        infinite;
}


#journey .journey-meteor-three {
    left: 87%;
    top: -18%;

    height: 68px;

    animation:
        journeyCardMeteorThree
        18s
        linear
        8s
        infinite;
}


#journey .journey-meteor-four {
    left: 43%;
    top: -22%;

    height: 62px;

    animation:
        journeyCardMeteorFour
        21s
        linear
        10.8s
        infinite;
}


#journey .journey-spark {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        rgba(255, 246, 214, 0.92);

    box-shadow:
        0 0 8px rgba(255, 246, 214, 0.82),
        0 0 18px rgba(255, 194, 89, 0.38);

    opacity: 0;

    animation:
        journeyCardSpark
        5s
        ease-in-out
        infinite;
}


#journey .journey-spark-one {
    left: 22%;
    top: 16%;

    animation-delay: 0.5s;
}


#journey .journey-spark-two {
    right: 18%;
    top: 25%;

    animation-delay: 2.1s;
}


#journey .journey-spark-three {
    left: 56%;
    top: 10%;

    animation-delay: 3.3s;
}


/* ============================================================
   49.7 HORIZON
============================================================ */

#journey .journey-horizon-glow {
    position: absolute;

    left: -5%;
    right: -5%;
    top: 57%;

    z-index: 6;

    height: 92px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(218, 248, 255, 0.38) 0%,
            rgba(145, 216, 236, 0.16) 44%,
            transparent 74%
        );

    filter: blur(14px);

    transform: translateY(-50%);

    opacity: 0.92;
}


/* ============================================================
   49.8 FULL-WIDTH WATER
============================================================ */

#journey .journey-water-layer {
    position: absolute;

    left: -2%;
    right: -2%;
    bottom: 0;

    z-index: 7;

    height: 44%;

    overflow: hidden;

    border-radius:
        50% 50% 0 0 /
        5% 5% 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(112, 204, 229, 0.95) 0%,
            rgba(42, 151, 191, 0.98) 22%,
            rgba(13, 101, 151, 0.99) 58%,
            #06466f 100%
        );

    box-shadow:
        inset 0 16px 30px rgba(218, 249, 255, 0.12),
        0 -4px 22px rgba(144, 222, 239, 0.13);
}


#journey .journey-water-layer::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        repeating-linear-gradient(
            178deg,
            rgba(255, 255, 255, 0.00) 0 7px,
            rgba(226, 250, 255, 0.105) 7px 8px,
            rgba(255, 255, 255, 0.00) 8px 17px
        ),
        repeating-linear-gradient(
            92deg,
            rgba(255, 255, 255, 0.00) 0 52px,
            rgba(216, 246, 255, 0.07) 52px 78px,
            rgba(255, 255, 255, 0.00) 78px 132px
        );

    background-size:
        100% 34px,
        180px 100%;

    opacity: 0.88;

    animation:
        journeyCardWaterSurface
        10s
        linear
        infinite;
}


#journey .journey-water-layer::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;

    background:
        radial-gradient(
            ellipse at 25% 5%,
            rgba(255, 255, 255, 0.17),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 69% 8%,
            rgba(255, 255, 255, 0.12),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075),
            transparent 36%,
            rgba(0, 31, 58, 0.20)
        );

    animation:
        journeyCardWaterLight
        8s
        ease-in-out
        infinite
        alternate;
}


#journey .journey-water-depth {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(220, 248, 255, 0.11) 0%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(17, 128, 174, 0.04) 0%,
            rgba(0, 56, 94, 0.16) 56%,
            rgba(0, 35, 66, 0.32) 100%
        );
}


#journey .journey-water-reflection {
    position: absolute;

    left: 50%;
    top: -8%;

    z-index: 5;

    width: 54%;
    height: 58%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(226, 250, 255, 0.27) 0%,
            rgba(203, 239, 250, 0.11) 36%,
            transparent 72%
        );

    filter: blur(12px);

    transform: translateX(-50%);

    animation:
        journeyCardWaterReflection
        7s
        ease-in-out
        infinite;
}


#journey .journey-water-shimmer {
    position: absolute;

    left: -8%;
    right: -8%;
    top: 5%;

    z-index: 6;

    height: 44%;

    opacity: 0.62;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 55px,
            rgba(236, 252, 255, 0.10) 55px 78px,
            transparent 78px 150px
        );

    filter: blur(1.4px);

    transform:
        skewX(-8deg);

    animation:
        journeyCardWaterShimmer
        12s
        linear
        infinite;
}


#journey .journey-water-ripple {
    position: absolute;

    z-index: 7;

    border:
        1px solid
        rgba(225, 250, 255, 0.28);

    border-radius: 50%;

    opacity: 0;

    transform:
        scale(0.5);

    animation:
        journeyCardRipple
        6.4s
        ease-out
        infinite;
}


#journey .journey-water-ripple-one {
    left: 17%;
    top: 28%;

    width: 105px;
    height: 24px;
}


#journey .journey-water-ripple-two {
    left: 56%;
    top: 49%;

    width: 132px;
    height: 30px;

    animation-delay: 2.1s;
}


#journey .journey-water-ripple-three {
    right: 11%;
    top: 23%;

    width: 90px;
    height: 21px;

    animation-delay: 4.2s;
}


/* ============================================================
   49.9 FISH
============================================================ */

#journey .journey-fish-school {
    position: absolute;

    z-index: 8;

    width: 92px;
    height: 40px;

    opacity: 0.40;

    will-change: transform;
}


#journey .journey-fish {
    position: absolute;

    width: 10px;
    height: 4px;

    border-radius:
        70%
        45%
        45%
        70%;

    background:
        rgba(4, 45, 69, 0.68);
}


#journey .journey-fish::after {
    content: "";

    position: absolute;

    left: -4px;
    top: 50%;

    width: 0;
    height: 0;

    border-top:
        3px solid transparent;

    border-bottom:
        3px solid transparent;

    border-right:
        5px solid
        rgba(4, 45, 69, 0.66);

    transform:
        translateY(-50%);
}


#journey .journey-fish:nth-child(1) {
    left: 0;
    top: 8px;
}


#journey .journey-fish:nth-child(2) {
    left: 25px;
    top: 20px;

    transform: scale(0.82);
}


#journey .journey-fish:nth-child(3) {
    left: 51px;
    top: 5px;

    transform: scale(0.68);
}


#journey .journey-fish:nth-child(4) {
    left: 72px;
    top: 25px;

    transform: scale(0.56);
}


#journey .journey-fish-school-one {
    left: -10%;
    top: 35%;

    animation:
        journeyCardFishOne
        18s
        linear
        infinite;
}


#journey .journey-fish-school-two {
    right: -12%;
    top: 62%;

    opacity: 0.36;

    animation:
        journeyCardFishTwo
        22s
        linear
        4s
        infinite;
}


#journey .journey-fish-school-three {
    left: -14%;
    top: 76%;

    opacity: 0.31;

    animation:
        journeyCardFishThree
        27s
        linear
        9s
        infinite;
}


/* ============================================================
   49.10 SCENE VIGNETTE
============================================================ */

#journey .journey-scene-vignette {
    position: absolute;
    inset: 0;

    z-index: 10;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(1, 27, 62, 0.00) 0%,
            rgba(1, 27, 62, 0.05) 42%,
            rgba(1, 20, 43, 0.28) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 20, 54, 0.08) 0%,
            rgba(0, 31, 63, 0.03) 45%,
            rgba(0, 23, 39, 0.24) 100%
        );
}


/* ============================================================
   49.11 PANEL CONTENT
============================================================ */

#journey .journey-panel-content {
    position: relative;
    z-index: 15;

    min-height: 690px;

    padding:
        54px
        44px
        32px;
}


/* ============================================================
   49.12 HEADING
============================================================ */

#journey .journey-heading {
    position: relative;

    z-index: 2;

    width: min(860px, 100%);

    margin:
        0 auto 44px;

    text-align: center;
}


#journey .journey-heading::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: -1;

    width: min(920px, 105%);
    height: 245px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0, 34, 76, 0.42) 0%,
            rgba(0, 43, 88, 0.18) 46%,
            transparent 75%
        );

    filter: blur(18px);

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


#journey .journey-heading .section-eyebrow {
    width: fit-content;

    margin:
        0 auto 14px;

    padding:
        7px 12px;

    border:
        1px solid
        rgba(255, 219, 149, 0.24);

    border-radius: 999px;

    color: #ffd58d;

    background:
        linear-gradient(
            180deg,
            rgba(3, 45, 91, 0.58),
            rgba(2, 33, 73, 0.48)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 8px 20px rgba(0, 25, 58, 0.12);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    font-size: 9.5px;
    font-weight: 850;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


#journey .journey-heading h2 {
    margin-bottom: 16px;

    color: #fbfdff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(40px, 4.2vw, 62px);

    font-weight: 650;

    line-height: 1.06;

    letter-spacing: -0.042em;

    text-shadow:
        0 8px 30px rgba(0, 24, 56, 0.30);
}


#journey .journey-heading h2 span {
    display: block;

    margin-top: 3px;

    color: #ffd06f;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    font-weight: 860;
}


#journey .journey-heading p {
    max-width: 735px;

    margin: 0 auto;

    color:
        rgba(240, 249, 255, 0.83);

    font-size: 14px;
    font-weight: 570;

    line-height: 1.78;

    text-shadow:
        0 2px 12px rgba(0, 26, 58, 0.28);
}


/* ============================================================
   49.13 JOURNEY GRID
============================================================ */

#journey .journey-path,
#journey .journey-card-grid {
    position: relative;

    z-index: 4;

    display: grid;

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

    gap: 18px;

    align-items: stretch;

    margin-top: 8px;

    padding-top: 0;
}


/* ============================================================
   49.14 CONNECTOR
   ------------------------------------------------------------
   JS controls the inline width of .journey-line-progress.
   The gold line reaches the destination FIRST.
   Only then does main.js activate the destination card.
============================================================ */

#journey .journey-line {
    position: absolute;

    left: 12.5%;
    right: 12.5%;

    top: 93px;

    z-index: 1;

    height: 3px;

    border-radius: 999px;

    background:
        rgba(220, 241, 255, 0.24);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07);

    pointer-events: none;
}


#journey .journey-line::before {
    content: "";

    position: absolute;

    inset: -7px 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.025) 20%,
            rgba(255, 255, 255, 0.07) 50%,
            rgba(255, 255, 255, 0.025) 80%,
            transparent
        );

    filter: blur(4px);
}


#journey .journey-line-progress {
    position: absolute;

    left: 0;
    top: 0;

    width: 0%;
    height: 100%;

    overflow: visible;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #d99320 0%,
            #ffd676 50%,
            #eda42d 100%
        );

    box-shadow:
        0 0 9px rgba(255, 205, 102, 0.52),
        0 0 24px rgba(255, 181, 52, 0.20);

    transition:
        width
        720ms
        cubic-bezier(
            0.18,
            0.78,
            0.22,
            1
        );
}


#journey .journey-line-progress::after {
    content: "";

    position: absolute;

    right: -7px;
    top: 50%;

    width: 14px;
    height: 14px;

    border:
        2px solid
        rgba(255, 247, 221, 0.86);

    border-radius: 50%;

    background: #ffc95d;

    box-shadow:
        0 0 0 5px rgba(255, 191, 70, 0.14),
        0 0 20px rgba(255, 189, 64, 0.58);

    opacity: 0;

    transform:
        translateY(-50%);

    transition:
        opacity
        180ms
        ease;
}


#journey.is-journey-travelling
.journey-line-progress::after {
    opacity: 1;
}


/* ============================================================
   49.15 STEP CARD — BASE
============================================================ */

#journey .journey-step,
#journey .journey-step-card {
    position: relative;

    z-index: 3;

    min-width: 0;
    min-height: 270px;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding:
        16px
        18px
        22px;

    overflow: hidden;

    border:
        1px solid
        rgba(221, 240, 252, 0.18);

    border-radius: 22px;

    color:
        rgba(239, 248, 255, 0.72);

    text-align: center;

    cursor: pointer;

    outline: none;

    background:
        linear-gradient(
            155deg,
            rgba(5, 55, 103, 0.54) 0%,
            rgba(4, 47, 92, 0.40) 52%,
            rgba(3, 38, 77, 0.47) 100%
        );

    box-shadow:
        0 16px 34px rgba(0, 30, 65, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        inset 0 -1px 0 rgba(1, 26, 55, 0.20);

    backdrop-filter:
        blur(11px)
        saturate(1.06);

    -webkit-backdrop-filter:
        blur(11px)
        saturate(1.06);

    user-select: none;

    transition:
        border-color 360ms ease,
        background 360ms ease,
        box-shadow 360ms ease,
        transform 360ms cubic-bezier(0.18, 0.78, 0.22, 1),
        opacity 360ms ease;
}


#journey .journey-card-surface {
    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.075),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018),
            transparent 34%
        );

    pointer-events: none;
}


#journey .journey-step::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 221, 153, 0.00),
            transparent
        );

    opacity: 0;

    transition:
        opacity 320ms ease,
        background 320ms ease;
}


#journey .journey-step:hover {
    border-color:
        rgba(255, 226, 166, 0.30);

    background:
        linear-gradient(
            155deg,
            rgba(8, 67, 122, 0.64) 0%,
            rgba(4, 53, 101, 0.52) 52%,
            rgba(3, 43, 83, 0.56) 100%
        );

    box-shadow:
        0 20px 42px rgba(0, 27, 60, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.095);
}


#journey .journey-step:focus,
#journey .journey-step:focus-visible {
    outline: none;
}


#journey
.journey-step:focus-visible {
    border-color:
        rgba(255, 228, 173, 0.56);

    box-shadow:
        0 0 0 3px rgba(255, 211, 123, 0.14),
        0 18px 40px rgba(0, 27, 60, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}


/* ============================================================
   49.16 CARD HEADER
============================================================ */

#journey .journey-step-header {
    width: 100%;

    min-height: 20px;

    display: flex;

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

    gap: 10px;

    margin-bottom: 13px;
}


#journey .journey-step-index {
    color:
        rgba(224, 242, 253, 0.48);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    transition:
        color 320ms ease;
}


#journey .journey-step-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        rgba(218, 239, 252, 0.34);

    box-shadow:
        0 0 0 4px rgba(219, 241, 255, 0.035);

    transition:
        background 320ms ease,
        box-shadow 320ms ease,
        transform 320ms ease;
}


/* ============================================================
   49.17 NUMBER CIRCLE
============================================================ */

#journey .journey-number {
    position: relative;
    z-index: 4;

    width: 78px;
    height: 78px;

    display: flex;

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

    flex: 0 0 auto;

    margin:
        0 auto 18px;

    border:
        1px solid
        rgba(221, 241, 255, 0.34);

    border-radius: 50%;

    color:
        rgba(245, 251, 255, 0.82);

    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(255, 255, 255, 0.12),
            transparent 38%
        ),
        rgba(3, 47, 91, 0.62);

    box-shadow:
        0 12px 28px rgba(0, 27, 60, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.06em;

    transition:
        border-color 360ms ease,
        color 360ms ease,
        background 360ms ease,
        box-shadow 360ms ease,
        transform 420ms cubic-bezier(0.18, 0.78, 0.22, 1);
}


/* ============================================================
   49.18 STEP COPY
============================================================ */

#journey .journey-step-copy {
    position: relative;
    z-index: 4;

    width: 100%;
}


#journey .journey-symbol {
    margin-bottom: 8px;

    color:
        rgba(232, 245, 253, 0.70);

    font-family:
        "Nirmala UI",
        "Mangal",
        serif;

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

    text-shadow:
        0 2px 10px rgba(0, 27, 55, 0.24);

    transition:
        color 320ms ease,
        transform 320ms ease;
}


#journey .journey-step h3 {
    margin-bottom: 8px;

    color:
        rgba(249, 252, 255, 0.88);

    font-size: 16.5px;
    font-weight: 780;

    line-height: 1.28;

    text-shadow:
        0 2px 12px rgba(0, 28, 61, 0.20);

    transition:
        color 320ms ease,
        font-weight 320ms ease;
}


#journey .journey-step p {
    max-width: 220px;

    margin:
        0 auto;

    color:
        rgba(231, 244, 252, 0.66);

    font-size: 11.5px;
    font-weight: 540;

    line-height: 1.65;

    text-shadow:
        0 2px 10px rgba(0, 26, 55, 0.17);

    transition:
        color 320ms ease,
        font-weight 320ms ease;
}


/* ============================================================
   49.19 COMPLETED STEPS
============================================================ */

#journey .journey-step.is-active,
#journey .journey-step.is-complete {
    border-color:
        rgba(255, 217, 139, 0.30);

    background:
        linear-gradient(
            155deg,
            rgba(32, 81, 114, 0.66) 0%,
            rgba(19, 65, 103, 0.56) 54%,
            rgba(11, 54, 91, 0.62) 100%
        );

    box-shadow:
        0 18px 40px rgba(0, 28, 59, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}


#journey
.journey-step.is-active::after,
#journey
.journey-step.is-complete::after {
    opacity: 0.58;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 212, 123, 0.38),
            transparent
        );
}


#journey
.journey-step.is-active
.journey-step-index,
#journey
.journey-step.is-complete
.journey-step-index {
    color:
        rgba(255, 224, 161, 0.72);
}


#journey
.journey-step.is-active
.journey-step-dot,
#journey
.journey-step.is-complete
.journey-step-dot {
    background: #efb54a;

    box-shadow:
        0 0 0 4px rgba(239, 181, 74, 0.10),
        0 0 12px rgba(239, 181, 74, 0.24);
}


#journey
.journey-step.is-active
.journey-number,
#journey
.journey-step.is-complete
.journey-number {
    border-color:
        rgba(255, 224, 161, 0.76);

    color: #513509;

    background:
        radial-gradient(
            circle at 30% 26%,
            #fff6d7 0%,
            #f3d78a 35%,
            #d79d33 72%,
            #b87416 100%
        );

    box-shadow:
        0 14px 30px rgba(76, 44, 7, 0.24),
        0 0 0 5px rgba(255, 205, 105, 0.07),
        inset 0 1px 1px rgba(255, 255, 255, 0.70);

    font-weight: 900;
}


#journey
.journey-step.is-active
.journey-symbol,
#journey
.journey-step.is-complete
.journey-symbol {
    color: #ffe29b;

    font-weight: 800;
}


#journey
.journey-step.is-active
h3,
#journey
.journey-step.is-complete
h3 {
    color: #fff8e9;

    font-weight: 820;
}


#journey
.journey-step.is-active
p,
#journey
.journey-step.is-complete
p {
    color:
        rgba(247, 252, 255, 0.84);

    font-weight: 580;
}


/* ============================================================
   49.20 CURRENT CARD — STRONGEST STATE
============================================================ */

#journey .journey-step.is-current {
    border-color:
        rgba(255, 222, 154, 0.72);

    background:
        linear-gradient(
            150deg,
            rgba(21, 75, 112, 0.82) 0%,
            rgba(14, 61, 101, 0.74) 54%,
            rgba(8, 48, 85, 0.78) 100%
        );

    box-shadow:
        0 24px 50px rgba(0, 23, 52, 0.26),
        0 0 0 1px rgba(255, 205, 111, 0.08),
        0 0 34px rgba(255, 185, 63, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);

    transform:
        translateY(-7px);
}


#journey .journey-step.is-current::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 48px;

    z-index: -1;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 198, 75, 0.18) 0%,
            rgba(255, 181, 47, 0.07) 42%,
            transparent 72%
        );

    filter: blur(12px);

    transform:
        translateX(-50%);
}


#journey
.journey-step.is-current
.journey-step-index {
    color: #ffe2a3;
}


#journey
.journey-step.is-current
.journey-step-dot {
    background: #ffd16b;

    box-shadow:
        0 0 0 5px rgba(255, 205, 105, 0.13),
        0 0 18px rgba(255, 193, 75, 0.40);

    transform: scale(1.08);
}


#journey
.journey-step.is-current
.journey-number {
    border-color:
        rgba(255, 240, 201, 0.98);

    color: #3f2804;

    background:
        radial-gradient(
            circle at 28% 24%,
            #fffdf3 0%,
            #ffe7a3 28%,
            #f5bd4b 58%,
            #d78418 100%
        );

    box-shadow:
        0 16px 34px rgba(91, 49, 4, 0.31),
        0 0 0 6px rgba(255, 216, 121, 0.13),
        0 0 30px rgba(255, 191, 63, 0.30),
        inset 0 1px 1px rgba(255, 255, 255, 0.87);

    transform: scale(1.08);

    animation:
        journeyCardCurrentNumber
        3.2s
        ease-in-out
        infinite;
}


#journey
.journey-step.is-current
.journey-number::after {
    content: "";

    position: absolute;
    inset: -11px;

    border:
        1px solid
        rgba(255, 222, 150, 0.32);

    border-radius: 50%;

    animation:
        journeyCardCurrentRing
        3.2s
        ease-in-out
        infinite;
}


#journey
.journey-step.is-current
.journey-symbol {
    color: #ffe8ae;

    font-weight: 900;
}


#journey
.journey-step.is-current
h3 {
    color: #ffffff;

    font-size: 17.5px;
    font-weight: 900;

    text-shadow:
        0 4px 16px rgba(0, 27, 58, 0.30);
}


#journey
.journey-step.is-current
p {
    color:
        rgba(252, 254, 255, 0.95);

    font-weight: 630;
}


/* ============================================================
   49.21 PANEL FOOTER
============================================================ */

#journey .journey-panel-footer {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(30px, 1fr)
        auto
        minmax(30px, 1fr);

    align-items: center;

    gap: 14px;

    max-width: 610px;

    margin:
        26px auto 0;
}


#journey .journey-panel-footer span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 220, 150, 0.28)
        );
}


#journey .journey-panel-footer span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255, 220, 150, 0.28),
            transparent
        );
}


#journey .journey-panel-footer p {
    margin: 0;

    color:
        rgba(236, 246, 252, 0.52);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-align: center;
    text-transform: uppercase;
}


/* ============================================================
   49.22 ANIMATIONS
============================================================ */

@keyframes journeyCardSkyGlow {

    0%,
    100% {
        opacity: 0.72;

        transform:
            translateX(-50%)
            scale(0.96);
    }

    50% {
        opacity: 1;

        transform:
            translateX(-50%)
            scale(1.05);
    }
}


@keyframes journeyCardCloudOne {

    from {
        transform:
            translate3d(-3%, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(5%, -7px, 0)
            scale(1.035);
    }
}


@keyframes journeyCardCloudTwo {

    from {
        transform:
            translate3d(4%, 0, 0)
            scale(1.02);
    }

    to {
        transform:
            translate3d(-5%, 6px, 0)
            scale(0.99);
    }
}


@keyframes journeyCardMeteorOne {

    0%,
    73% {
        opacity: 0;

        transform:
            translate3d(0, -60px, 0)
            rotate(48deg);
    }

    77% {
        opacity: 0.80;
    }

    87% {
        opacity: 0.80;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(320px, 310px, 0)
            rotate(48deg);
    }
}


@keyframes journeyCardMeteorTwo {

    0%,
    81% {
        opacity: 0;

        transform:
            translate3d(0, -40px, 0)
            rotate(48deg);
    }

    84% {
        opacity: 0.66;
    }

    92% {
        opacity: 0.66;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(250px, 240px, 0)
            rotate(48deg);
    }
}


@keyframes journeyCardMeteorThree {

    0%,
    86% {
        opacity: 0;

        transform:
            translate3d(0, -30px, 0)
            rotate(48deg);
    }

    89% {
        opacity: 0.52;
    }

    95% {
        opacity: 0.52;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(190px, 190px, 0)
            rotate(48deg);
    }
}


@keyframes journeyCardMeteorFour {

    0%,
    89% {
        opacity: 0;

        transform:
            translate3d(0, -25px, 0)
            rotate(48deg);
    }

    92% {
        opacity: 0.46;
    }

    96% {
        opacity: 0.46;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(160px, 165px, 0)
            rotate(48deg);
    }
}


@keyframes journeyCardSpark {

    0%,
    100% {
        opacity: 0;

        transform:
            scale(0.55);
    }

    40% {
        opacity: 0.24;
    }

    50% {
        opacity: 0.82;

        transform:
            scale(1.30);
    }

    62% {
        opacity: 0.16;
    }
}


@keyframes journeyCardWaterSurface {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            0 34px,
            180px 0;
    }
}


@keyframes journeyCardWaterLight {

    from {
        opacity: 0.52;

        transform:
            translateX(-1.5%);
    }

    to {
        opacity: 0.90;

        transform:
            translateX(1.5%);
    }
}


@keyframes journeyCardWaterReflection {

    0%,
    100% {
        opacity: 0.50;

        transform:
            translateX(-50%)
            scaleX(0.92);
    }

    50% {
        opacity: 0.84;

        transform:
            translateX(-50%)
            scaleX(1.08);
    }
}


@keyframes journeyCardWaterShimmer {

    from {
        transform:
            translateX(-4%)
            skewX(-8deg);

        background-position:
            0 0;
    }

    to {
        transform:
            translateX(4%)
            skewX(-8deg);

        background-position:
            220px 0;
    }
}


@keyframes journeyCardRipple {

    0% {
        opacity: 0;

        transform:
            scale(0.42);
    }

    18% {
        opacity: 0.44;
    }

    100% {
        opacity: 0;

        transform:
            scale(1.85);
    }
}


@keyframes journeyCardFishOne {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate3d(55vw, -8px, 0);
    }

    to {
        transform:
            translate3d(112vw, 3px, 0);
    }
}


@keyframes journeyCardFishTwo {

    from {
        transform:
            translate3d(0, 0, 0)
            scaleX(-1);
    }

    50% {
        transform:
            translate3d(-55vw, 8px, 0)
            scaleX(-1);
    }

    to {
        transform:
            translate3d(-112vw, -2px, 0)
            scaleX(-1);
    }
}


@keyframes journeyCardFishThree {

    from {
        transform:
            translate3d(0, 0, 0)
            scale(0.82);
    }

    50% {
        transform:
            translate3d(58vw, 6px, 0)
            scale(0.82);
    }

    to {
        transform:
            translate3d(116vw, -4px, 0)
            scale(0.82);
    }
}


@keyframes journeyCardCurrentNumber {

    0%,
    100% {
        transform:
            scale(1.06);
    }

    50% {
        transform:
            scale(1.10);
    }
}


@keyframes journeyCardCurrentRing {

    0%,
    100% {
        opacity: 0.28;

        transform:
            scale(0.94);
    }

    50% {
        opacity: 0.70;

        transform:
            scale(1.08);
    }
}


/* ============================================================
   49.23 TABLET
============================================================ */

@media (max-width: 1024px) {

    #journey.journey-card-section.section-padding {
        padding-top: 64px;
        padding-bottom: 68px;
    }


    #journey .journey-premium-panel,
    #journey .journey-panel-content {
        min-height: 0;
    }


    #journey .journey-panel-content {
        padding:
            46px
            28px
            28px;
    }


    #journey .journey-heading {
        margin-bottom: 36px;
    }


    #journey .journey-heading h2 {
        font-size:
            clamp(38px, 5.2vw, 54px);
    }


    #journey .journey-path,
    #journey .journey-card-grid {
        gap: 12px;
    }


    #journey .journey-step,
    #journey .journey-step-card {
        min-height: 248px;

        padding:
            14px
            13px
            18px;

        border-radius: 19px;
    }


    #journey .journey-number {
        width: 70px;
        height: 70px;
    }


    #journey .journey-line {
        top: 85px;
    }


    #journey .journey-step h3 {
        font-size: 15px;
    }


    #journey .journey-step p {
        font-size: 10.8px;
    }
}


/* ============================================================
   49.24 SMALL TABLET / LARGE PHONE
============================================================ */

@media (max-width: 760px) {

    #journey.journey-card-section.section-padding {
        padding-top: 48px;
        padding-bottom: 52px;
    }


    #journey .journey-premium-panel {
        border-radius: 25px;
    }


    #journey .journey-panel-frame {
        inset: 8px;

        border-radius: 19px;
    }


    #journey .journey-panel-content {
        padding:
            40px
            18px
            24px;
    }


    #journey .journey-heading {
        margin-bottom: 30px;
    }


    #journey .journey-heading h2 {
        font-size:
            clamp(34px, 8.8vw, 46px);
    }


    #journey .journey-heading p {
        font-size: 12.5px;
    }


    #journey .journey-path,
    #journey .journey-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }


    /*
     * Keep the connector technically active so main.js transitionend
     * still works. We only make it visually transparent at this layout.
     */
    #journey .journey-line {
        opacity: 0;

        pointer-events: none;
    }


    #journey .journey-step,
    #journey .journey-step-card {
        min-height: 225px;
    }


    #journey .journey-water-layer {
        height: 46%;
    }


    #journey .journey-horizon-glow {
        top: 54%;
    }
}


/* ============================================================
   49.25 MOBILE
============================================================ */

@media (max-width: 520px) {

    #journey.journey-card-section.section-padding {
        padding-top: 38px;
        padding-bottom: 42px;
    }


    #journey .journey-premium-panel {
        border-radius: 22px;
    }


    #journey .journey-panel-content {
        padding:
            34px
            14px
            20px;
    }


    #journey .journey-heading {
        margin-bottom: 26px;
    }


    #journey .journey-heading .section-eyebrow {
        font-size: 8px;
    }


    #journey .journey-heading h2 {
        font-size:
            clamp(31px, 10.2vw, 40px);

        line-height: 1.08;
    }


    #journey .journey-heading p {
        font-size: 11.5px;

        line-height: 1.68;
    }


    #journey .journey-path,
    #journey .journey-card-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    #journey .journey-step,
    #journey .journey-step-card {
        min-height: 0;

        display: grid;

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

        grid-template-areas:
            "header header"
            "number copy";

        column-gap: 14px;

        row-gap: 9px;

        align-items: center;

        padding:
            13px
            14px
            15px;

        text-align: left;

        border-radius: 17px;
    }


    #journey .journey-step-header {
        grid-area: header;

        margin-bottom: 0;
    }


    #journey .journey-number {
        grid-area: number;

        width: 60px;
        height: 60px;

        margin: 0;

        font-size: 10px;
    }


    #journey .journey-step-copy {
        grid-area: copy;
    }


    #journey .journey-symbol {
        margin-bottom: 2px;

        font-size: 16px;
    }


    #journey .journey-step h3,
    #journey .journey-step.is-current h3 {
        margin-bottom: 4px;

        font-size: 16px;
    }


    #journey .journey-step p {
        max-width: none;

        margin: 0;

        font-size: 10.7px;

        line-height: 1.50;
    }


    #journey .journey-step.is-current {
        transform:
            translateY(-2px);
    }


    #journey .journey-panel-footer {
        gap: 9px;

        margin-top: 20px;
    }


    #journey .journey-panel-footer p {
        font-size: 6.8px;
    }


    #journey .journey-water-layer {
        height: 44%;
    }


    #journey .journey-horizon-glow {
        top: 56%;
    }


    #journey .journey-meteor-three,
    #journey .journey-meteor-four,
    #journey .journey-spark-three,
    #journey .journey-fish-school-three {
        display: none;
    }
}


/* ============================================================
   49.26 REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    #journey .journey-sky-glow,
    #journey .journey-cloud-layer,
    #journey .journey-meteor,
    #journey .journey-spark,
    #journey .journey-water-layer::before,
    #journey .journey-water-layer::after,
    #journey .journey-water-reflection,
    #journey .journey-water-shimmer,
    #journey .journey-water-ripple,
    #journey .journey-fish-school,
    #journey .journey-step.is-current .journey-number,
    #journey .journey-step.is-current .journey-number::after {
        animation:
            none !important;
    }


    #journey .journey-line-progress {
        transition-duration:
            0.01ms !important;
    }
}


/* ============================================================
   END — JOURNEY PREMIUM CARD
============================================================ */