/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translate3d(0px,0,0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

    .swiper-autoheight .swiper-wrapper {
        align-items: flex-start;
        transition-property: transform,height
    }

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

    .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
        transform-style: preserve-3d
    }

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

    .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
        display: none
    }

    .swiper-css-mode > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: start start
    }

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none
}

    .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: none
    }

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0,0,0,.15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color,var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color))
}

    .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
        opacity: .35;
        cursor: auto;
        pointer-events: none
    }

    .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
        opacity: 0;
        cursor: auto;
        pointer-events: none
    }

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg, .swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,10px);
    right: auto
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,10px);
    left: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,10px);
    left: auto
}

    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
        content: 'next'
    }

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10
}

    .swiper-pagination.swiper-pagination-hidden {
        opacity: 0
    }

    .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
        display: none !important
    }

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom,8px);
    top: var(--swiper-pagination-top,auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        transform: scale(.33);
        position: relative
    }

    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
        transform: scale(1)
    }

    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
        transform: scale(1)
    }

    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
        transform: scale(.66)
    }

    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
        transform: scale(.33)
    }

    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
        transform: scale(.66)
    }

    .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
        transform: scale(.33)
    }

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
    height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius,50%);
    background: var(--swiper-pagination-bullet-inactive-color,#000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color,var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    right: var(--swiper-pagination-right,8px);
    left: var(--swiper-pagination-left,auto);
    top: 50%;
    transform: translate3d(0px,-50%,0)
}

    .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: var(--swiper-pagination-bullet-vertical-gap,6px) 0;
        display: block
    }

    .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        top: 50%;
        transform: translateY(-50%);
        width: 8px
    }

        .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
            display: inline-block;
            transition: .2s transform,.2s top
        }

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

    .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        transition: .2s transform,.2s left
    }

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform,.2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color,inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));
    position: absolute
}

    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: var(--swiper-pagination-color,var(--swiper-theme-color));
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transform-origin: left top
    }

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size,4px);
    left: 0;
    top: 0
}

    .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
        width: var(--swiper-pagination-progressbar-size,4px);
        height: 100%;
        left: 0;
        top: 0
    }

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius,10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))
}

    .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
        display: none !important
    }

    .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
        position: absolute;
        left: var(--swiper-scrollbar-sides-offset,1%);
        bottom: var(--swiper-scrollbar-bottom,4px);
        top: var(--swiper-scrollbar-top,auto);
        z-index: 50;
        height: var(--swiper-scrollbar-size,4px);
        width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))
    }

    .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
        position: absolute;
        left: var(--swiper-scrollbar-left,auto);
        right: var(--swiper-scrollbar-right,4px);
        top: var(--swiper-scrollbar-sides-offset,1%);
        z-index: 50;
        width: var(--swiper-scrollbar-size,4px);
        height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))
    }

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));
    border-radius: var(--swiper-scrollbar-border-radius,10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

    .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

    .swiper-fade .swiper-slide .swiper-slide {
        pointer-events: none
    }

.swiper-fade .swiper-slide-active {
    pointer-events: auto
}

    .swiper-fade .swiper-slide-active .swiper-slide-active {
        pointer-events: auto
    }

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

    .swiper-cube .swiper-slide .swiper-slide {
        pointer-events: none
    }

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

    .swiper-cube .swiper-cube-shadow:before {
        content: '';
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        filter: blur(50px)
    }

.swiper-cube .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

    .swiper-flip .swiper-slide .swiper-slide {
        pointer-events: none
    }

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform,opacity,height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

[data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] {
    transition-duration: 50ms
}

[data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate {
        transition-delay: 50ms
    }

[data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] {
    transition-duration: .1s
}

[data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate {
        transition-delay: .1s
    }

[data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] {
    transition-duration: .15s
}

[data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate {
        transition-delay: .15s
    }

[data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] {
    transition-duration: .2s
}

[data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate {
        transition-delay: .2s
    }

[data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] {
    transition-duration: .25s
}

[data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate {
        transition-delay: .25s
    }

[data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] {
    transition-duration: .3s
}

[data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate {
        transition-delay: .3s
    }

[data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] {
    transition-duration: .35s
}

[data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate {
        transition-delay: .35s
    }

[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate {
        transition-delay: .4s
    }

[data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] {
    transition-duration: .45s
}

[data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="450"].aos-animate, body[data-aos-delay="450"] [data-aos].aos-animate {
        transition-delay: .45s
    }

[data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] {
    transition-duration: .5s
}

[data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate {
        transition-delay: .5s
    }

[data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] {
    transition-duration: .55s
}

[data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate {
        transition-delay: .55s
    }

[data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] {
    transition-duration: .6s
}

[data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="600"].aos-animate, body[data-aos-delay="600"] [data-aos].aos-animate {
        transition-delay: .6s
    }

[data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] {
    transition-duration: .65s
}

[data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="650"].aos-animate, body[data-aos-delay="650"] [data-aos].aos-animate {
        transition-delay: .65s
    }

[data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] {
    transition-duration: .7s
}

[data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="700"].aos-animate, body[data-aos-delay="700"] [data-aos].aos-animate {
        transition-delay: .7s
    }

[data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] {
    transition-duration: .75s
}

[data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="750"].aos-animate, body[data-aos-delay="750"] [data-aos].aos-animate {
        transition-delay: .75s
    }

[data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] {
    transition-duration: .8s
}

[data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="800"].aos-animate, body[data-aos-delay="800"] [data-aos].aos-animate {
        transition-delay: .8s
    }

[data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] {
    transition-duration: .85s
}

[data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate {
        transition-delay: .85s
    }

[data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] {
    transition-duration: .9s
}

[data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="900"].aos-animate, body[data-aos-delay="900"] [data-aos].aos-animate {
        transition-delay: .9s
    }

[data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] {
    transition-duration: .95s
}

[data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="950"].aos-animate, body[data-aos-delay="950"] [data-aos].aos-animate {
        transition-delay: .95s
    }

[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {
    transition-duration: 1s
}

[data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate {
        transition-delay: 1s
    }

[data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] {
    transition-duration: 1.05s
}

[data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1050"].aos-animate, body[data-aos-delay="1050"] [data-aos].aos-animate {
        transition-delay: 1.05s
    }

[data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] {
    transition-duration: 1.1s
}

[data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1100"].aos-animate, body[data-aos-delay="1100"] [data-aos].aos-animate {
        transition-delay: 1.1s
    }

[data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] {
    transition-duration: 1.15s
}

[data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1150"].aos-animate, body[data-aos-delay="1150"] [data-aos].aos-animate {
        transition-delay: 1.15s
    }

[data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] {
    transition-duration: 1.2s
}

[data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate {
        transition-delay: 1.2s
    }

[data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] {
    transition-duration: 1.25s
}

[data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1250"].aos-animate, body[data-aos-delay="1250"] [data-aos].aos-animate {
        transition-delay: 1.25s
    }

[data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] {
    transition-duration: 1.3s
}

[data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1300"].aos-animate, body[data-aos-delay="1300"] [data-aos].aos-animate {
        transition-delay: 1.3s
    }

[data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] {
    transition-duration: 1.35s
}

[data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1350"].aos-animate, body[data-aos-delay="1350"] [data-aos].aos-animate {
        transition-delay: 1.35s
    }

[data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] {
    transition-duration: 1.4s
}

[data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1400"].aos-animate, body[data-aos-delay="1400"] [data-aos].aos-animate {
        transition-delay: 1.4s
    }

[data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] {
    transition-duration: 1.45s
}

[data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1450"].aos-animate, body[data-aos-delay="1450"] [data-aos].aos-animate {
        transition-delay: 1.45s
    }

[data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] {
    transition-duration: 1.5s
}

[data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate {
        transition-delay: 1.5s
    }

[data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] {
    transition-duration: 1.55s
}

[data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1550"].aos-animate, body[data-aos-delay="1550"] [data-aos].aos-animate {
        transition-delay: 1.55s
    }

[data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] {
    transition-duration: 1.6s
}

[data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1600"].aos-animate, body[data-aos-delay="1600"] [data-aos].aos-animate {
        transition-delay: 1.6s
    }

[data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] {
    transition-duration: 1.65s
}

[data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1650"].aos-animate, body[data-aos-delay="1650"] [data-aos].aos-animate {
        transition-delay: 1.65s
    }

[data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] {
    transition-duration: 1.7s
}

[data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1700"].aos-animate, body[data-aos-delay="1700"] [data-aos].aos-animate {
        transition-delay: 1.7s
    }

[data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] {
    transition-duration: 1.75s
}

[data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1750"].aos-animate, body[data-aos-delay="1750"] [data-aos].aos-animate {
        transition-delay: 1.75s
    }

[data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] {
    transition-duration: 1.8s
}

[data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1800"].aos-animate, body[data-aos-delay="1800"] [data-aos].aos-animate {
        transition-delay: 1.8s
    }

[data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] {
    transition-duration: 1.85s
}

[data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1850"].aos-animate, body[data-aos-delay="1850"] [data-aos].aos-animate {
        transition-delay: 1.85s
    }

[data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] {
    transition-duration: 1.9s
}

[data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1900"].aos-animate, body[data-aos-delay="1900"] [data-aos].aos-animate {
        transition-delay: 1.9s
    }

[data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] {
    transition-duration: 1.95s
}

[data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="1950"].aos-animate, body[data-aos-delay="1950"] [data-aos].aos-animate {
        transition-delay: 1.95s
    }

[data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] {
    transition-duration: 2s
}

[data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate {
        transition-delay: 2s
    }

[data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] {
    transition-duration: 2.05s
}

[data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2050"].aos-animate, body[data-aos-delay="2050"] [data-aos].aos-animate {
        transition-delay: 2.05s
    }

[data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] {
    transition-duration: 2.1s
}

[data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2100"].aos-animate, body[data-aos-delay="2100"] [data-aos].aos-animate {
        transition-delay: 2.1s
    }

[data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] {
    transition-duration: 2.15s
}

[data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2150"].aos-animate, body[data-aos-delay="2150"] [data-aos].aos-animate {
        transition-delay: 2.15s
    }

[data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] {
    transition-duration: 2.2s
}

[data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2200"].aos-animate, body[data-aos-delay="2200"] [data-aos].aos-animate {
        transition-delay: 2.2s
    }

[data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] {
    transition-duration: 2.25s
}

[data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2250"].aos-animate, body[data-aos-delay="2250"] [data-aos].aos-animate {
        transition-delay: 2.25s
    }

[data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] {
    transition-duration: 2.3s
}

[data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2300"].aos-animate, body[data-aos-delay="2300"] [data-aos].aos-animate {
        transition-delay: 2.3s
    }

[data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] {
    transition-duration: 2.35s
}

[data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2350"].aos-animate, body[data-aos-delay="2350"] [data-aos].aos-animate {
        transition-delay: 2.35s
    }

[data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] {
    transition-duration: 2.4s
}

[data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2400"].aos-animate, body[data-aos-delay="2400"] [data-aos].aos-animate {
        transition-delay: 2.4s
    }

[data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] {
    transition-duration: 2.45s
}

[data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2450"].aos-animate, body[data-aos-delay="2450"] [data-aos].aos-animate {
        transition-delay: 2.45s
    }

[data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] {
    transition-duration: 2.5s
}

[data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2500"].aos-animate, body[data-aos-delay="2500"] [data-aos].aos-animate {
        transition-delay: 2.5s
    }

[data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] {
    transition-duration: 2.55s
}

[data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2550"].aos-animate, body[data-aos-delay="2550"] [data-aos].aos-animate {
        transition-delay: 2.55s
    }

[data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] {
    transition-duration: 2.6s
}

[data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2600"].aos-animate, body[data-aos-delay="2600"] [data-aos].aos-animate {
        transition-delay: 2.6s
    }

[data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] {
    transition-duration: 2.65s
}

[data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2650"].aos-animate, body[data-aos-delay="2650"] [data-aos].aos-animate {
        transition-delay: 2.65s
    }

[data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] {
    transition-duration: 2.7s
}

[data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2700"].aos-animate, body[data-aos-delay="2700"] [data-aos].aos-animate {
        transition-delay: 2.7s
    }

[data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] {
    transition-duration: 2.75s
}

[data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2750"].aos-animate, body[data-aos-delay="2750"] [data-aos].aos-animate {
        transition-delay: 2.75s
    }

[data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] {
    transition-duration: 2.8s
}

[data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2800"].aos-animate, body[data-aos-delay="2800"] [data-aos].aos-animate {
        transition-delay: 2.8s
    }

[data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] {
    transition-duration: 2.85s
}

[data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2850"].aos-animate, body[data-aos-delay="2850"] [data-aos].aos-animate {
        transition-delay: 2.85s
    }

[data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] {
    transition-duration: 2.9s
}

[data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2900"].aos-animate, body[data-aos-delay="2900"] [data-aos].aos-animate {
        transition-delay: 2.9s
    }

[data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] {
    transition-duration: 2.95s
}

[data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="2950"].aos-animate, body[data-aos-delay="2950"] [data-aos].aos-animate {
        transition-delay: 2.95s
    }

[data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] {
    transition-duration: 3s
}

[data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] {
    transition-delay: 0
}

    [data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate {
        transition-delay: 3s
    }

[data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] {
    transition-timing-function: cubic-bezier(.25,.25,.75,.75)
}

[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease
}

[data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] {
    transition-timing-function: ease-in
}

[data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] {
    transition-timing-function: ease-out
}

[data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] {
    transition-timing-function: ease-in-out
}

[data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] {
    transition-timing-function: cubic-bezier(.6,-.28,.735,.045)
}

[data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] {
    transition-timing-function: cubic-bezier(.175,.885,.32,1.275)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] {
    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55)
}

[data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.47,0,.745,.715)
}

[data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.39,.575,.565,1)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] {
    transition-timing-function: cubic-bezier(.445,.05,.55,.95)
}

[data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.55,.085,.68,.53)
}

[data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.25,.46,.45,.94)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] {
    transition-timing-function: cubic-bezier(.455,.03,.515,.955)
}

[data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.55,.085,.68,.53)
}

[data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.25,.46,.45,.94)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] {
    transition-timing-function: cubic-bezier(.455,.03,.515,.955)
}

[data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.55,.085,.68,.53)
}

[data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.25,.46,.45,.94)
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] {
    transition-timing-function: cubic-bezier(.455,.03,.515,.955)
}

[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity,transform
}

    [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        transform: translateZ(0)
    }

[data-aos=fade-up] {
    transform: translate3d(0,100px,0)
}

[data-aos=fade-down] {
    transform: translate3d(0,-100px,0)
}

[data-aos=fade-right] {
    transform: translate3d(-100px,0,0)
}

[data-aos=fade-left] {
    transform: translate3d(100px,0,0)
}

[data-aos=fade-up-right] {
    transform: translate3d(-100px,100px,0)
}

[data-aos=fade-up-left] {
    transform: translate3d(100px,100px,0)
}

[data-aos=fade-down-right] {
    transform: translate3d(-100px,-100px,0)
}

[data-aos=fade-down-left] {
    transform: translate3d(100px,-100px,0)
}

[data-aos^=zoom][data-aos^=zoom] {
    opacity: 0;
    transition-property: opacity,transform
}

    [data-aos^=zoom][data-aos^=zoom].aos-animate {
        opacity: 1;
        transform: translateZ(0) scale(1)
    }

[data-aos=zoom-in] {
    transform: scale(.6)
}

[data-aos=zoom-in-up] {
    transform: translate3d(0,100px,0) scale(.6)
}

[data-aos=zoom-in-down] {
    transform: translate3d(0,-100px,0) scale(.6)
}

[data-aos=zoom-in-right] {
    transform: translate3d(-100px,0,0) scale(.6)
}

[data-aos=zoom-in-left] {
    transform: translate3d(100px,0,0) scale(.6)
}

[data-aos=zoom-out] {
    transform: scale(1.2)
}

[data-aos=zoom-out-up] {
    transform: translate3d(0,100px,0) scale(1.2)
}

[data-aos=zoom-out-down] {
    transform: translate3d(0,-100px,0) scale(1.2)
}

[data-aos=zoom-out-right] {
    transform: translate3d(-100px,0,0) scale(1.2)
}

[data-aos=zoom-out-left] {
    transform: translate3d(100px,0,0) scale(1.2)
}

[data-aos^=slide][data-aos^=slide] {
    transition-property: transform
}

    [data-aos^=slide][data-aos^=slide].aos-animate {
        transform: translateZ(0)
    }

[data-aos=slide-up] {
    transform: translate3d(0,100%,0)
}

[data-aos=slide-down] {
    transform: translate3d(0,-100%,0)
}

[data-aos=slide-right] {
    transform: translate3d(-100%,0,0)
}

[data-aos=slide-left] {
    transform: translate3d(100%,0,0)
}

[data-aos^=flip][data-aos^=flip] {
    backface-visibility: hidden;
    transition-property: transform
}

[data-aos=flip-left] {
    transform: perspective(2500px) rotateY(-100deg)
}

    [data-aos=flip-left].aos-animate {
        transform: perspective(2500px) rotateY(0)
    }

[data-aos=flip-right] {
    transform: perspective(2500px) rotateY(100deg)
}

    [data-aos=flip-right].aos-animate {
        transform: perspective(2500px) rotateY(0)
    }

[data-aos=flip-up] {
    transform: perspective(2500px) rotateX(-100deg)
}

    [data-aos=flip-up].aos-animate {
        transform: perspective(2500px) rotateX(0)
    }

[data-aos=flip-down] {
    transform: perspective(2500px) rotateX(100deg)
}

    [data-aos=flip-down].aos-animate {
        transform: perspective(2500px) rotateX(0)
    }
/* ============================================================
   TOKENS
============================================================ */
:root {
    --ink: #071731; /* deep dark — brand */
    --violet: #123C7C; /* refined royal blue — logo harmony */
    --violet2: #0E7490; /* elegant teal-blue depth */
    --magenta: #D73A7C; /* soft rose accent — logo harmony */
    --blue: #1F5FBF; /* primary clean school blue */
    --blue2: #68B7FF; /* sky highlight */
    --gold: #E3B655;
    --gold2: #F3D58A;
    --cream: #F8FAFF; /* background — brand */
    --soft: #F2EFFA;
    --text: #16213A;
    --muted: #65728A;
    --white: #FFFFFF;
    --shadow: 0 20px 55px rgba(7,23,49,.13);
    --shadow-lg: 0 30px 80px rgba(7,23,49,.20);
    --radius: 24px;
    --radius-sm: 14px;
    --aurora: linear-gradient(120deg,var(--violet) 0%,var(--magenta) 48%,var(--blue) 100%);
    --aurora-2: linear-gradient(135deg,var(--blue2),var(--magenta));
    --ease: cubic-bezier(.16,.84,.44,1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%
}

section[id], header[id] {
    scroll-margin-top: 96px
}

body {
    font-family: "Almarai","Cairo",sans-serif;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

    body.lock {
        overflow: hidden
    }

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

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

ul {
    list-style: none
}

button {
    font-family: inherit
}

.container {
    width: min(1220px,calc(100% - 40px));
    margin: auto
}

.eyebrow {
    font-family: "Plus Jakarta Sans",sans-serif;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-weight: 700;
}

::selection {
    background: var(--magenta);
    color: #fff
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: var(--cream)
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--violet),var(--magenta));
    border-radius: 10px
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
    }
}

/* ============================================================
   PRELOADER
============================================================ */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .7s var(--ease), visibility .7s var(--ease);
}

    #preloader.hide {
        opacity: 0;
        visibility: hidden
    }

.pre-mark {
    position: relative;
    width: 96px;
    height: 96px
}

    .pre-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        animation: preFloat 1.8s ease-in-out infinite
    }

.pre-ring {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--magenta);
    border-right-color: var(--blue2);
    animation: spin 1.1s linear infinite;
}

@keyframes preFloat {
    50% {
        transform: translateY(-8px) scale(1.04)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ============================================================
   SCROLL PROGRESS
============================================================ */
#scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--aurora);
    z-index: 1001;
    transition: width .12s linear;
}

/* ============================================================
   NAVBAR — floating glass, transparent over hero → solid on scroll
============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}

    .navbar.scrolled {
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(7,23,49,.06);
        box-shadow: 0 10px 34px rgba(7,23,49,.10);
    }

.nav-topline {
    overflow: hidden;
    max-height: 42px;
    opacity: 1;
    transition: max-height .4s var(--ease),opacity .3s var(--ease),padding .4s var(--ease);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.navbar.scrolled .nav-topline {
    max-height: 0;
    opacity: 0;
    border-color: transparent
}

.nav-topline .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 9px 0;
    font-size: 13px
}

.topbar-group {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.nav-topline span, .nav-topline a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.85);
    font-weight: 500;
    transition: .25s
}

    .nav-topline a:hover {
        color: var(--gold2)
    }

.topbar-social {
    gap: 12px !important
}

    .topbar-social a {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        justify-content: center
    }

        .topbar-social a:hover {
            background: var(--gold);
            color: var(--ink)
        }

.nav-inner {
    min-height: 94px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: .4s var(--ease)
}

.navbar.scrolled .nav-inner {
    min-height: 76px
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    font-weight: 900;
    font-size: 21px;
    white-space: nowrap;
    color: #fff;
    transition: .35s
}

.navbar.scrolled .brand {
    color: var(--violet)
}

.brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    transition: .35s var(--ease);
    filter: drop-shadow(0 8px 18px rgba(7,23,49,.35))
}

.navbar.scrolled .brand-logo {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 8px 16px rgba(53,91,168,.18))
}

.brand small {
    display: block;
    font-family: "Plus Jakarta Sans",sans-serif;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    font-weight: 700;
    color: var(--gold2);
    text-transform: uppercase;
    margin-top: 2px;
    transition: .35s
}

.navbar.scrolled .brand small {
    color: var(--magenta)
}

.menu {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #fff;
    font-size: 15px;
    transition: .35s
}

.navbar.scrolled .menu {
    color: var(--text)
}

.menu a {
    position: relative;
    padding: 10px 14px;
    border-radius: 10px;
    transition: .25s
}

    .menu a::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 6px;
        height: 2px;
        background: linear-gradient(90deg,var(--gold2),#fff);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: center;
        transition: .3s var(--ease);
    }

.navbar.scrolled .menu a::after {
    background: var(--aurora)
}

.menu a:hover {
    color: var(--gold2)
}

.navbar.scrolled .menu a:hover {
    color: var(--magenta)
}

.menu a:hover::after, .menu a.active::after {
    transform: scaleX(1)
}

.navbar.scrolled .menu a.active {
    color: var(--violet)
}

.menu a.active {
    color: var(--gold2)
}

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

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 14.5px;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.4);
    backdrop-filter: blur(8px);
    box-shadow: none;
    transition: .3s var(--ease);
    white-space: nowrap;
}

.navbar.scrolled .nav-btn, .sidebar-foot .nav-btn {
    background: var(--aurora);
    background-size: 180% 180%;
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(193,38,131,.28);
}

.nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(193,38,131,.38)
}

.navbar.scrolled .nav-btn:hover {
    background-position: 100% 0
}

.burger {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.4);
    cursor: pointer;
    flex-shrink: 0;
    transition: .35s;
}

.navbar.scrolled .burger {
    background: var(--soft);
    border-color: transparent
}

.burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    position: relative;
    transition: .25s
}

.navbar.scrolled .burger span {
    background: var(--violet)
}

.burger span::before, .burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: #fff;
    transition: .25s
}

.navbar.scrolled .burger span::before, .navbar.scrolled .burger span::after {
    background: var(--violet)
}

.burger span::before {
    top: -6px
}

.burger span::after {
    top: 6px
}

.burger.active span {
    background: transparent
}

    .burger.active span::before {
        top: 0;
        transform: rotate(45deg)
    }

    .burger.active span::after {
        top: 0;
        transform: rotate(-45deg)
    }

/* Mobile sidebar */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(7,23,49,.55);
    backdrop-filter: blur(3px);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: .35s var(--ease);
}

    .overlay.show {
        opacity: 1;
        visibility: visible
    }

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(360px,86vw);
    background: #fff;
    z-index: 151;
    overflow: hidden;
    transform: translateX(100%);
    transition: .45s var(--ease);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(7,23,49,.25);
}

    .sidebar.show {
        transform: translateX(0)
    }

.sidebar-head {
    position: relative;
    padding: 24px 22px 22px;
    background: var(--aurora);
    overflow: hidden;
    flex-shrink: 0;
}

    .sidebar-head::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        top: -110px;
        left: -70px;
    }

    .sidebar-head::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        bottom: -80px;
        right: 30px;
    }

.sidebar-head-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.sidebar-head .brand {
    color: #fff;
    min-width: 0
}

    .sidebar-head .brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.sidebar-head .brand-logo {
    background: rgba(255,255,255,.16);
    border-radius: 13px;
    padding: 6px;
    flex-shrink: 0;
    box-shadow: none;
    filter: none;
}

.sidebar-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(7,23,49,.28);
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--violet);
    cursor: pointer;
    transition: .3s var(--ease);
}

    .sidebar-close:hover {
        background: var(--gold2);
        color: var(--ink);
        transform: rotate(90deg) scale(1.08);
        box-shadow: 0 10px 24px rgba(7,23,49,.35)
    }

    .sidebar-close:active {
        transform: rotate(90deg) scale(.95)
    }

.sidebar-tagline {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-menu {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    flex: 1
}

    .sidebar-menu a {
        padding: 13px 14px;
        border-radius: 14px;
        font-weight: 800;
        color: var(--text);
        font-size: 14.5px;
        display: flex;
        align-items: center;
        gap: 13px;
        transition: .25s var(--ease);
        position: relative;
    }

        .sidebar-menu a .si {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            background: var(--soft);
            color: var(--violet);
            display: grid;
            place-items: center;
            font-size: 16px;
            flex-shrink: 0;
            transition: .25s;
        }

        .sidebar-menu a span {
            flex: 1
        }

        .sidebar-menu a i.bi-chevron-left {
            color: var(--muted);
            font-size: 12px;
            transform: scaleX(-1);
            transition: .25s
        }

        .sidebar-menu a:hover {
            background: var(--soft)
        }

            .sidebar-menu a:hover .si {
                background: var(--aurora);
                color: #fff;
                transform: scale(1.06)
            }

            .sidebar-menu a:hover i.bi-chevron-left {
                transform: scaleX(-1) translateX(-4px);
                color: var(--magenta)
            }

        .sidebar-menu a.active {
            background: linear-gradient(90deg,rgba(193,38,131,.08),rgba(53,91,168,.06))
        }

            .sidebar-menu a.active .si {
                background: var(--aurora);
                color: #fff
            }

        .sidebar-menu a.active {
            color: var(--violet)
        }

.sidebar-foot {
    margin-top: auto;
    padding: 20px 22px 24px;
    border-top: 1px solid #EEF0F8;
    flex-shrink: 0
}

    .sidebar-foot .nav-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 16px;
        color: #fff
    }

.sidebar-social {
    display: flex;
    gap: 10px;
    justify-content: center
}

    .sidebar-social a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--soft);
        display: grid;
        place-items: center;
        color: var(--violet);
        transition: .25s
    }

        .sidebar-social a:hover {
            background: var(--aurora);
            color: #fff;
            transform: translateY(-3px)
        }

/* ============================================================
   HERO
============================================================ */
.hero {
    position: relative;
    min-height: 840px;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink)
}

    .hero .swiper, .hero .swiper-slide {
        height: 840px
    }

.hero-slide {
    position: relative;
    height: 100%;
    display: grid;
    align-items: center;
    overflow: hidden
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.12);
    transition: 6s ease
}

@media(min-width:993px) {
    .hero-bg {
        background-attachment: fixed
    }
}

.swiper-slide-active .hero-bg {
    transform: scale(1)
}

.bg1 {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%22900%22%20viewBox%3D%220%200%201400%20900%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23123d79%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e54b8b%22/%3E%3C/linearGradient%3E%0A%3CradialGradient%20id%3D%22r%22%20cx%3D%2225%25%22%20cy%3D%2220%25%22%20r%3D%2270%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.35%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%0A%3Cpattern%20id%3D%22p%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M0%2080L80%200M-20%2020L20%20-20M60%20100L100%2060%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22/%3E%3C/pattern%3E%0A%3C/defs%3E%0A%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23r%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23p%29%22/%3E%0A%3Ccircle%20cx%3D%221130%22%20cy%3D%22160%22%20r%3D%22150%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22760%22%20r%3D%22210%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%0A%3Cg%20transform%3D%22translate%28700%20390%29%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20fill%3D%22%23fff%22%3E%0A%3Ctext%20y%3D%22-75%22%20font-size%3D%2298%22%20font-weight%3D%22700%22%3E%F0%9F%93%B0%3C/text%3E%0A%3Ctext%20y%3D%2225%22%20font-size%3D%2258%22%20font-weight%3D%22800%22%3E%D9%85%D8%AF%D8%B1%D8%B3%D8%A9%20%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81%D8%A9%3C/text%3E%0A%3Ctext%20y%3D%2288%22%20font-size%3D%2230%22%20opacity%3D%22.9%22%3E%D8%A3%D8%AE%D8%A8%D8%A7%D8%B1%D9%86%D8%A7%20%D8%A7%D9%84%D9%85%D8%AF%D8%B1%D8%B3%D9%8A%D8%A9%3C/text%3E%0A%3C/g%3E%3C/svg%3E")
}

.bg2 {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%22900%22%20viewBox%3D%220%200%201400%20900%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230f62a8%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2321b7c9%22/%3E%3C/linearGradient%3E%0A%3CradialGradient%20id%3D%22r%22%20cx%3D%2225%25%22%20cy%3D%2220%25%22%20r%3D%2270%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.35%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%0A%3Cpattern%20id%3D%22p%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M0%2080L80%200M-20%2020L20%20-20M60%20100L100%2060%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22/%3E%3C/pattern%3E%0A%3C/defs%3E%0A%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23r%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23p%29%22/%3E%0A%3Ccircle%20cx%3D%221130%22%20cy%3D%22160%22%20r%3D%22150%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22760%22%20r%3D%22210%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%0A%3Cg%20transform%3D%22translate%28700%20390%29%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20fill%3D%22%23fff%22%3E%0A%3Ctext%20y%3D%22-75%22%20font-size%3D%2298%22%20font-weight%3D%22700%22%3E%F0%9F%8F%AB%3C/text%3E%0A%3Ctext%20y%3D%2225%22%20font-size%3D%2258%22%20font-weight%3D%22800%22%3E%D8%A8%D9%8A%D8%A6%D8%A9%20%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D9%8A%D8%A9%3C/text%3E%0A%3Ctext%20y%3D%2288%22%20font-size%3D%2230%22%20opacity%3D%22.9%22%3E%D8%AE%D8%A8%D8%B1%20%D8%AC%D8%AF%D9%8A%D8%AF%3C/text%3E%0A%3C/g%3E%3C/svg%3E")
}

.bg3 {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%22900%22%20viewBox%3D%220%200%201400%20900%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23113d73%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f4a21d%22/%3E%3C/linearGradient%3E%0A%3CradialGradient%20id%3D%22r%22%20cx%3D%2225%25%22%20cy%3D%2220%25%22%20r%3D%2270%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.35%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%0A%3Cpattern%20id%3D%22p%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M0%2080L80%200M-20%2020L20%20-20M60%20100L100%2060%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22/%3E%3C/pattern%3E%0A%3C/defs%3E%0A%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23r%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23p%29%22/%3E%0A%3Ccircle%20cx%3D%221130%22%20cy%3D%22160%22%20r%3D%22150%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22760%22%20r%3D%22210%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%0A%3Cg%20transform%3D%22translate%28700%20390%29%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20fill%3D%22%23fff%22%3E%0A%3Ctext%20y%3D%22-75%22%20font-size%3D%2298%22%20font-weight%3D%22700%22%3E%F0%9F%93%8C%3C/text%3E%0A%3Ctext%20y%3D%2225%22%20font-size%3D%2258%22%20font-weight%3D%22800%22%3E%D8%A5%D8%B9%D9%84%D8%A7%D9%86%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D8%AF%D8%B1%D8%B3%D8%A9%3C/text%3E%0A%3Ctext%20y%3D%2288%22%20font-size%3D%2230%22%20opacity%3D%22.9%22%3E%D8%AA%D8%A7%D8%A8%D8%B9%20%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF%3C/text%3E%0A%3C/g%3E%3C/svg%3E")
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 18%,rgba(95,160,245,.38),transparent 30%), radial-gradient(circle at 12% 85%,rgba(200,31,126,.30),transparent 32%), linear-gradient(95deg,rgba(10,15,31,.94),rgba(62,23,104,.66) 45%,rgba(43,78,150,.62));
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    z-index: 1;
    pointer-events: none
}

.blob-a {
    width: 420px;
    height: 420px;
    left: -100px;
    top: -80px;
    background: var(--magenta);
    animation: drift1 16s ease-in-out infinite
}

.blob-b {
    width: 380px;
    height: 380px;
    right: -90px;
    bottom: -100px;
    background: var(--blue2);
    animation: drift2 19s ease-in-out infinite
}

.blob-c {
    width: 260px;
    height: 260px;
    left: 38%;
    top: 55%;
    background: var(--gold);
    opacity: .22;
    animation: drift3 14s ease-in-out infinite
}

@keyframes drift1 {
    0%,100% {
        transform: translate(0,0)
    }

    50% {
        transform: translate(40px,50px)
    }
}

@keyframes drift2 {
    0%,100% {
        transform: translate(0,0)
    }

    50% {
        transform: translate(-50px,-30px)
    }
}

@keyframes drift3 {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-30px,20px) scale(1.15)
    }
}

.spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.5),transparent 60%);
}

.particle {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    animation: rise linear infinite
}

@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(0)
    }

    10% {
        opacity: .7
    }

    90% {
        opacity: .3
    }

    100% {
        opacity: 0;
        transform: translateY(-220px)
    }
}

.particle:nth-child(1) {
    left: 8%;
    width: 4px;
    height: 4px;
    animation-duration: 9s;
    animation-delay: 0s
}

.particle:nth-child(2) {
    left: 18%;
    width: 3px;
    height: 3px;
    animation-duration: 11s;
    animation-delay: 1.5s
}

.particle:nth-child(3) {
    left: 30%;
    width: 5px;
    height: 5px;
    animation-duration: 8s;
    animation-delay: 3s
}

.particle:nth-child(4) {
    left: 46%;
    width: 3px;
    height: 3px;
    animation-duration: 13s;
    animation-delay: .5s
}

.particle:nth-child(5) {
    left: 58%;
    width: 4px;
    height: 4px;
    animation-duration: 10s;
    animation-delay: 2.2s
}

.particle:nth-child(6) {
    left: 69%;
    width: 3px;
    height: 3px;
    animation-duration: 12s;
    animation-delay: 4s
}

.particle:nth-child(7) {
    left: 80%;
    width: 5px;
    height: 5px;
    animation-duration: 9.5s;
    animation-delay: 1s
}

.particle:nth-child(8) {
    left: 91%;
    width: 3px;
    height: 3px;
    animation-duration: 11.5s;
    animation-delay: 2.8s
}

.particle:nth-child(9) {
    left: 24%;
    width: 2px;
    height: 2px;
    animation-duration: 7.5s;
    animation-delay: 3.6s
}

.particle:nth-child(10) {
    left: 63%;
    width: 2px;
    height: 2px;
    animation-duration: 8.6s;
    animation-delay: .8s
}

.hero-content {
    position: relative;
    z-index: 6;
    color: #fff;
    max-width: 740px;
    padding-top: 0
}

.hero-logo-mark {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 16px;
    padding: 11px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 48px rgba(0,0,0,.2);
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 9px 18px 9px 14px;
    font-weight: 800;
    margin-bottom: 16px;
    font-size: 14.5px;
}

    .kicker i {
        color: var(--gold2)
    }

.hero h1 {
    font-size: clamp(36px,5.2vw,66px);
    line-height: 1.18;
    font-weight: 900;
    margin-bottom: 18px;
    letter-spacing: -1px;
}

    .hero h1 span {
        display: inline-block;
        color: transparent;
        background: linear-gradient(100deg,#fff 10%,var(--blue2) 45%,#ffc4e8 80%);
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 220% auto;
        animation: shine 5s linear infinite;
    }

@keyframes shine {
    to {
        background-position: 220% center
    }
}

.hero p {
    color: rgba(255,255,255,.84);
    font-size: 17.5px;
    line-height: 1.9;
    font-weight: 500;
    max-width: 600px;
    margin-bottom: 24px
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px
}


.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 16px 28px;
    border-radius: 13px;
    font-weight: 800;
    font-size: 15px;
    transition: transform .25s var(--ease),box-shadow .25s var(--ease);
    border: 0;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
}

    .btn.solid {
        background: var(--aurora);
        color: #fff;
        box-shadow: 0 16px 32px rgba(193,31,126,.32)
    }

        .btn.solid:hover {
            box-shadow: 0 20px 42px rgba(193,31,126,.42)
        }

    .btn.alt {
        background: linear-gradient(135deg,var(--blue),var(--blue2));
        color: #fff;
        box-shadow: 0 16px 32px rgba(43,78,150,.3)
    }

        .btn.alt:hover {
            box-shadow: 0 20px 42px rgba(43,78,150,.4)
        }

    .btn.ghost {
        background: rgba(255,255,255,.1);
        color: #fff;
        border: 1px solid rgba(255,255,255,.35);
        backdrop-filter: blur(8px)
    }

        .btn.ghost:hover {
            background: rgba(255,255,255,.18)
        }

    .btn.light {
        background: #fff;
        color: var(--violet)
    }

        .btn.light:hover {
            box-shadow: 0 16px 32px rgba(0,0,0,.16)
        }

    .btn:active {
        transform: scale(.97)
    }

.trust-row {
    display: flex;
    gap: 30px;
    flex-wrap: wrap
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px
}

    .trust-item .avatars {
        display: flex
    }

        .trust-item .avatars img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--ink);
            object-fit: cover;
            margin-right: -12px
        }

    .trust-item strong {
        display: block;
        font-size: 14px
    }

    .trust-item span {
        display: block;
        font-size: 12.5px;
        color: rgba(255,255,255,.65)
    }

.trust-stars {
    color: var(--gold2);
    font-size: 13px;
    letter-spacing: 1px
}

.hero-card {
    position: absolute;
    z-index: 7;
    left: 7%;
    bottom: 130px;
    width: 300px;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
    animation: float 4.5s ease-in-out infinite;
}

@keyframes float {
    50% {
        transform: translateY(-16px)
    }
}

.hero-card h3 {
    color: var(--violet);
    font-size: 21px;
    margin-bottom: 8px
}

.hero-card p {
    color: var(--muted);
    line-height: 1.8;
    font-weight: 600;
    font-size: 14.5px
}

.hero-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px
}

    .hero-card-row i {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 20px;
        background: linear-gradient(135deg,var(--blue),var(--magenta))
    }

    .hero-card-row strong {
        font-size: 13.5px
    }

.scroll-cue {
    position: absolute;
    z-index: 7;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    opacity: .8;
}

    .scroll-cue .mouse {
        width: 26px;
        height: 40px;
        border: 1.5px solid rgba(255,255,255,.55);
        border-radius: 14px;
        position: relative
    }

        .scroll-cue .mouse::before {
            content: "";
            position: absolute;
            top: 7px;
            left: 50%;
            width: 4px;
            height: 8px;
            border-radius: 2px;
            background: var(--gold2);
            transform: translateX(-50%);
            animation: cueMove 1.6s ease-in-out infinite;
        }

@keyframes cueMove {
    0% {
        opacity: 1;
        top: 7px
    }

    80% {
        opacity: 0;
        top: 20px
    }

    100% {
        opacity: 0;
        top: 7px
    }
}

.hero-shape {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 110px;
    z-index: 5;
    background: #fff;
    clip-path: ellipse(62% 100% at 50% 100%)
}

.swiper-pagination {
    bottom: 50px !important;
    z-index: 8
}

.swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #fff;
    opacity: .45
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--gold2);
    width: 26px;
    border-radius: 5px;
    transition: .3s
}

/* ============================================================
   MARQUEE STRIP
============================================================ */
.marquee-strip {
    background: var(--violet);
    overflow: hidden;
    padding: 16px 0;
    position: relative;
    z-index: 9
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
    gap: 0
}

    .marquee-track span {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 34px;
        font-family: "Plus Jakarta Sans",sans-serif;
        font-weight: 700;
        letter-spacing: 1.5px;
        font-size: 13px;
        color: rgba(255,255,255,.88);
        text-transform: uppercase;
        white-space: nowrap;
    }

        .marquee-track span i {
            color: var(--gold2);
            font-size: 8px
        }

@keyframes marquee {
    to {
        transform: translateX(50%)
    }
}

.marquee-strip:hover .marquee-track {
    animation-play-state: paused
}

/* ============================================================
   SECTION GENERIC
============================================================ */
section {
    padding: 108px 0;
    position: relative
}

.section-title {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--magenta);
    font-weight: 800;
    margin-bottom: 14px;
    font-size: 14.5px
}

    .label .dot {
        width: 7px;
        height: 24px;
        border-radius: 4px;
        background: var(--aurora);
        display: inline-block
    }

.section-title h2 {
    font-size: clamp(30px,3.8vw,48px);
    line-height: 1.28;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -.5px
}

.section-title p {
    color: var(--muted);
    line-height: 2;
    font-weight: 500;
    font-size: 16.5px
}

/* ============================================================
   FEATURES (overlap hero)
============================================================ */
.features {
    padding: 0 0 80px;
    margin-top: -60px;
    z-index: 30
}

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

.feature {
    background: #fff;
    border-radius: 22px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: .4s var(--ease);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

    .feature::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: var(--aurora)
    }

    .feature::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        padding: 1.5px;
        background: var(--aurora);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: .35s;
    }

    .feature:hover {
        transform: translateY(-10px)
    }

        .feature:hover::after {
            opacity: 1
        }

.feature-icon {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 32px;
    background: linear-gradient(135deg,var(--blue),var(--violet2));
    box-shadow: 0 16px 30px rgba(53,91,168,.25);
}

.feature:nth-child(2) .feature-icon {
    background: linear-gradient(135deg,var(--magenta),var(--violet2))
}

.feature:nth-child(3) .feature-icon {
    background: linear-gradient(135deg,var(--blue2),var(--blue))
}

.feature:nth-child(4) .feature-icon {
    background: linear-gradient(135deg,var(--violet),var(--magenta))
}

.feature h3 {
    font-size: 21px;
    color: var(--ink);
    margin-bottom: 10px;
    font-weight: 800
}

.feature p {
    color: var(--muted);
    line-height: 1.85;
    font-weight: 500;
    font-size: 14.5px
}

/* ============================================================
   TRUST / ACCREDITATION STRIP
============================================================ */
.trust-strip {
    padding: 54px 0;
    background: #fff;
    border-bottom: 1px solid #EEF0F8
}

    .trust-strip .trust-head {
        text-align: center;
        margin-bottom: 32px
    }

        .trust-strip .trust-head span {
            font-family: "Plus Jakarta Sans",sans-serif;
            text-transform: uppercase;
            letter-spacing: 2.2px;
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
        }

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 16px;
    background: var(--cream);
    border: 1px solid #ECE9F8;
    transition: .3s var(--ease);
}

    .trust-badge:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        background: #fff
    }

    .trust-badge i {
        font-size: 24px;
        background: var(--aurora);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .trust-badge div strong {
        display: block;
        font-size: 13.5px;
        color: var(--ink);
        font-weight: 800
    }

    .trust-badge div span {
        font-size: 11.5px;
        color: var(--muted);
        font-weight: 600
    }

/* ============================================================
   CAMPUS LIFE — masonry gallery
============================================================ */
.campus {
    background: var(--cream)
}

.campus-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 130px;
    gap: 18px;
}

.campus-item {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(7,23,49,.08);
}

    .campus-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s var(--ease)
    }

    .campus-item:hover img {
        transform: scale(1.12)
    }

    .campus-item::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to top,rgba(7,23,49,.78),transparent 55%);
        opacity: 0;
        transition: .35s;
    }

    .campus-item:hover::after {
        opacity: 1
    }

.campus-tag {
    position: absolute;
    right: 16px;
    bottom: 14px;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    transform: translateY(10px);
    opacity: 0;
    transition: .35s var(--ease);
}

.campus-item:hover .campus-tag {
    transform: translateY(0);
    opacity: 1
}

.campus-zoom {
    position: absolute;
    left: 16px;
    top: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    color: #fff;
    pointer-events: none;
    display: grid;
    place-items: center;
    font-size: 14px;
    transform: scale(.6);
    opacity: 0;
    transition: .35s var(--ease);
}

.campus-item:hover .campus-zoom {
    transform: scale(1);
    opacity: 1
}

.campus-item.tall {
    grid-row: span 2
}

.campus-item.wide {
    grid-column: span 2
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(7,11,23,.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

    .lightbox.show {
        opacity: 1;
        visibility: visible
    }

    .lightbox img {
        max-width: min(900px,92vw);
        max-height: 84vh;
        border-radius: 18px;
        box-shadow: 0 30px 80px rgba(0,0,0,.5)
    }

.lightbox-close {
    position: absolute;
    top: 26px;
    left: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
}

/* ============================================================
   PROGRAM FILTER TABS
============================================================ */
.program-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 42px
}

.program-tab {
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #E7E5F3;
    color: var(--muted);
    transition: .25s var(--ease);
}

    .program-tab:hover {
        border-color: var(--magenta);
        color: var(--magenta)
    }

    .program-tab.active {
        background: var(--aurora);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 26px rgba(193,38,131,.28)
    }

.program.hide-out {
    display: none
}

/* ============================================================
   ADMISSIONS TIMELINE
============================================================ */
.adm-timeline {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
    margin-top: 36px
}

.adm-step {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 22px;
    position: relative;
    backdrop-filter: blur(6px);
    transition: .3s var(--ease);
}

    .adm-step:hover {
        background: rgba(255,255,255,.12);
        transform: translateY(-6px)
    }

    .adm-step strong.num {
        display: inline-flex;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: var(--aurora);
        font-family: "Plus Jakarta Sans",sans-serif;
        font-size: 14px;
        margin-bottom: 12px;
    }

    .adm-step h4 {
        font-size: 16px;
        margin-bottom: 7px;
        font-weight: 800
    }

    .adm-step p {
        font-size: 13.5px;
        color: rgba(255,255,255,.7);
        line-height: 1.75;
        font-weight: 500
    }

/* ============================================================
   ABOUT
============================================================ */
.about {
    padding-top: 24px;
    background: #fff
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.about-media {
    min-height: 560px;
    position: relative
}

.about-main {
    position: absolute;
    inset: 0 80px 60px 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

    .about-main img, .about-small img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.about-small {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 230px;
    border: 9px solid #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.experience {
    position: absolute;
    right: 24px;
    bottom: 24px;
    padding: 22px 28px;
    border-radius: 20px;
    color: #fff;
    font-weight: 900;
    text-align: center;
    background: var(--aurora);
    box-shadow: 0 18px 40px rgba(193,31,126,.3);
}

    .experience strong {
        display: block;
        font-size: 40px;
        line-height: 1;
        font-family: "Plus Jakarta Sans",sans-serif
    }

.about-content .label {
    margin-bottom: 14px
}

.about-content h2 {
    font-size: clamp(30px,3.8vw,46px);
    line-height: 1.28;
    color: var(--ink);
    margin-bottom: 20px;
    font-weight: 900;
    letter-spacing: -.5px
}

.about-content p {
    color: var(--muted);
    line-height: 2;
    font-weight: 500;
    margin-bottom: 26px;
    font-size: 16px
}

.about-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px
}

    .about-list div {
        display: flex;
        align-items: center;
        gap: 11px;
        font-weight: 800;
        color: var(--ink);
        font-size: 14.5px
    }

    .about-list i {
        color: #fff;
        background: var(--aurora);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 13px;
        flex-shrink: 0
    }

/* ============================================================
   PROGRAMS
============================================================ */
.programs {
    background: linear-gradient(180deg,var(--cream),#fff)
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px
}

.program {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: .4s var(--ease);
    will-change: transform;
}

    .program:hover {
        transform: translateY(-12px)
    }

.program-img {
    height: 250px;
    overflow: hidden;
    position: relative
}

    .program-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,rgba(10,15,31,.55),transparent 45%)
    }

    .program-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s var(--ease)
    }

.program:hover .program-img img {
    transform: scale(1.1)
}

.program-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    background: var(--aurora);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 800;
}

.program-body {
    padding: 28px
}

.program-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 14px
}

    .program-meta span {
        display: flex;
        align-items: center;
        gap: 6px
    }

.program-body h3 {
    font-size: 23px;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 10px;
    font-weight: 800
}

.program-body p {
    color: var(--muted);
    line-height: 1.85;
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 14.5px
}

.program-footer {
    border-top: 1px solid #EEF0F8;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    font-size: 14.5px
}

    .program-footer a {
        color: var(--magenta);
        display: flex;
        align-items: center;
        gap: 6px
    }

.stars {
    color: var(--gold);
    letter-spacing: 1px
}

/* ============================================================
   ADMISSION / WHY-CHOOSE-US (replaces the old contact form)
============================================================ */
.admission {
    color: #fff;
    position: relative;
    isolation: isolate;
    text-align: center;
    background: linear-gradient(100deg,rgba(10,15,31,.95),rgba(62,23,104,.88) 50%,rgba(43,78,150,.9)), url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%22900%22%20viewBox%3D%220%200%201400%20900%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23143f8f%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e54b8b%22/%3E%3C/linearGradient%3E%0A%3CradialGradient%20id%3D%22r%22%20cx%3D%2225%25%22%20cy%3D%2220%25%22%20r%3D%2270%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.35%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%0A%3Cpattern%20id%3D%22p%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M0%2080L80%200M-20%2020L20%20-20M60%20100L100%2060%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22/%3E%3C/pattern%3E%0A%3C/defs%3E%0A%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23r%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23p%29%22/%3E%0A%3Ccircle%20cx%3D%221130%22%20cy%3D%22160%22%20r%3D%22150%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22760%22%20r%3D%22210%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%0A%3Cg%20transform%3D%22translate%28700%20390%29%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20fill%3D%22%23fff%22%3E%0A%3Ctext%20y%3D%22-75%22%20font-size%3D%2298%22%20font-weight%3D%22700%22%3E%F0%9F%8E%93%3C/text%3E%0A%3Ctext%20y%3D%2225%22%20font-size%3D%2258%22%20font-weight%3D%22800%22%3E%D8%A3%D9%86%D8%B4%D8%B7%D8%A9%20%D9%88%D9%81%D8%B9%D8%A7%D9%84%D9%8A%D8%A7%D8%AA%3C/text%3E%0A%3Ctext%20y%3D%2288%22%20font-size%3D%2230%22%20opacity%3D%22.9%22%3E%D8%AD%D9%8A%D8%A7%D8%A9%20%D9%85%D8%AF%D8%B1%D8%B3%D9%8A%D8%A9%3C/text%3E%0A%3C/g%3E%3C/svg%3E") center/cover fixed;
}

    .admission .label {
        color: #dbe8ff;
        justify-content: center
    }

        .admission .label .dot {
            background: linear-gradient(135deg,var(--gold),var(--gold2))
        }

    .admission h2 {
        font-size: clamp(32px,3.8vw,52px);
        line-height: 1.28;
        margin-bottom: 16px;
        font-weight: 900;
        letter-spacing: -.5px
    }

    .admission > .container > p.lead {
        color: rgba(255,255,255,.78);
        line-height: 2;
        font-size: 17px;
        font-weight: 500;
        max-width: 680px;
        margin: 0 auto 26px
    }

.admission-points {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 0 auto 8px
}

    .admission-points span {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.18);
        padding: 10px 16px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 700;
    }

    .admission-points i {
        color: var(--gold2)
    }

.whyus-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin: 46px 0 56px;
    text-align: right
}

.whyus-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 30px 26px;
    backdrop-filter: blur(8px);
    transition: .35s var(--ease);
    position: relative;
    overflow: hidden;
}

    .whyus-card:hover {
        background: rgba(255,255,255,.1);
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(0,0,0,.22)
    }

    .whyus-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background: var(--aurora);
        opacity: 0;
        transition: .3s
    }

    .whyus-card:hover::before {
        opacity: 1
    }

.whyus-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(255,255,255,.1);
    display: grid;
    place-items: center;
    font-size: 25px;
    margin-bottom: 18px;
    color: var(--gold2);
}

.whyus-card h4 {
    font-size: 17.5px;
    margin-bottom: 9px;
    font-weight: 800
}

.whyus-card p {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    line-height: 1.8;
    font-weight: 500
}

.adm-timeline.full {
    grid-template-columns: repeat(4,1fr);
    max-width: 1000px;
    margin: 0 auto
}

.admission-cta {
    text-align: center;
    margin-top: 54px
}

    .admission-cta .cta-row {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 22px
    }

/* ============================================================
   STATS
============================================================ */
.stats {
    background: #fff;
    padding: 90px 0
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    text-align: center
}

.stat {
    padding: 38px 22px;
    border-radius: 24px;
    background: linear-gradient(180deg,#fff,var(--soft));
    box-shadow: 0 14px 36px rgba(21,35,58,.08);
    border: 1px solid #EEF0FA;
    transition: .35s var(--ease);
}

    .stat:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow)
    }

    .stat i {
        font-size: 42px;
        color: var(--blue);
        margin-bottom: 14px;
        display: inline-block;
        background: var(--aurora);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .stat strong {
        display: block;
        font-size: 46px;
        line-height: 1;
        color: var(--violet);
        margin-bottom: 10px;
        font-family: "Plus Jakarta Sans",sans-serif;
        font-weight: 800
    }

    .stat span {
        color: var(--muted);
        font-weight: 700;
        font-size: 14.5px
    }

/* ============================================================
   TEACHERS
============================================================ */
.teachers {
    background: var(--cream)
}

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

.teacher {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    text-align: center;
    box-shadow: var(--shadow);
    transition: .4s var(--ease)
}

    .teacher:hover {
        transform: translateY(-10px)
    }

.teacher-img {
    height: 260px;
    overflow: hidden;
    position: relative
}

    .teacher-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s var(--ease)
    }

.teacher:hover .teacher-img img {
    transform: scale(1.08)
}

.teacher-body {
    padding: 24px
}

    .teacher-body h3 {
        font-size: 20px;
        color: var(--ink);
        margin-bottom: 4px;
        font-weight: 800
    }

    .teacher-body p {
        color: var(--magenta);
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 14px
    }

.social {
    display: flex;
    justify-content: center;
    gap: 10px
}

    .social a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--blue);
        background: var(--cream);
        transition: .25s
    }

        .social a:hover {
            background: var(--aurora);
            color: #fff;
            transform: translateY(-3px)
        }

/* ============================================================
   EVENTS
============================================================ */
.events {
    background: #fff
}

.event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px
}

.event {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid #EEF0F8;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(21,35,58,.06);
    transition: .35s var(--ease);
}

    .event:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow)
    }

.event-date {
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg,var(--blue),var(--violet2));
    padding: 20px
}

.event:nth-child(2) .event-date {
    background: linear-gradient(135deg,var(--magenta),var(--violet2))
}

.event:nth-child(3) .event-date {
    background: linear-gradient(135deg,var(--blue2),var(--blue))
}

.event:nth-child(4) .event-date {
    background: linear-gradient(135deg,var(--violet),var(--magenta))
}

.event-date strong {
    display: block;
    font-size: 42px;
    line-height: 1;
    font-family: "Plus Jakarta Sans",sans-serif
}

.event-date small {
    font-size: 12.5px;
    letter-spacing: 1px
}

.event-content {
    padding: 22px 24px
}

    .event-content h3 {
        font-size: 20px;
        color: var(--ink);
        margin-bottom: 9px;
        font-weight: 800
    }

    .event-content p {
        color: var(--muted);
        line-height: 1.8;
        font-weight: 500;
        margin-bottom: 13px;
        font-size: 14px
    }

.event-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonials {
    color: #fff;
    position: relative;
    background: linear-gradient(rgba(62,23,104,.92),rgba(10,15,31,.94)), url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221400%22%20height%3D%22900%22%20viewBox%3D%220%200%201400%20900%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235b2fa0%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2321b7c9%22/%3E%3C/linearGradient%3E%0A%3CradialGradient%20id%3D%22r%22%20cx%3D%2225%25%22%20cy%3D%2220%25%22%20r%3D%2270%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.35%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%0A%3Cpattern%20id%3D%22p%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M0%2080L80%200M-20%2020L20%20-20M60%20100L100%2060%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22/%3E%3C/pattern%3E%0A%3C/defs%3E%0A%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23r%29%22/%3E%3Crect%20width%3D%221400%22%20height%3D%22900%22%20fill%3D%22url%28%23p%29%22/%3E%0A%3Ccircle%20cx%3D%221130%22%20cy%3D%22160%22%20r%3D%22150%22%20fill%3D%22%23fff%22%20opacity%3D%22.12%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22760%22%20r%3D%22210%22%20fill%3D%22%23fff%22%20opacity%3D%22.10%22/%3E%0A%3Cg%20transform%3D%22translate%28700%20390%29%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20fill%3D%22%23fff%22%3E%0A%3Ctext%20y%3D%22-75%22%20font-size%3D%2298%22%20font-weight%3D%22700%22%3E%F0%9F%8F%85%3C/text%3E%0A%3Ctext%20y%3D%2225%22%20font-size%3D%2258%22%20font-weight%3D%22800%22%3E%D8%A5%D9%86%D8%AC%D8%A7%D8%B2%D8%A7%D8%AA%20%D8%A7%D9%84%D8%B7%D9%84%D8%A7%D8%A8%3C/text%3E%0A%3Ctext%20y%3D%2288%22%20font-size%3D%2230%22%20opacity%3D%22.9%22%3E%D9%81%D8%AE%D8%B1%20%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81%D8%A9%3C/text%3E%0A%3C/g%3E%3C/svg%3E") center/cover fixed;
}

    .testimonials .section-title h2, .testimonials .section-title p {
        color: #fff
    }

    .testimonials .section-title p {
        color: rgba(255,255,255,.7)
    }

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px
}

.testimonial {
    background: #fff;
    color: var(--text);
    border-radius: 24px;
    padding: 32px;
    box-shadow: var(--shadow);
    position: relative
}

    .testimonial::before {
        content: "\201C";
        position: absolute;
        top: 0;
        left: 24px;
        font-size: 90px;
        color: rgba(200,31,126,.12);
        font-family: Georgia,serif
    }

    .testimonial .quote-stars {
        color: var(--gold);
        margin-bottom: 14px;
        font-size: 13px;
        position: relative;
        z-index: 2
    }

    .testimonial p {
        color: var(--muted);
        line-height: 2;
        font-weight: 500;
        margin-bottom: 22px;
        position: relative;
        z-index: 2;
        font-size: 15px
    }

.person {
    display: flex;
    align-items: center;
    gap: 13px;
    font-weight: 800
}

    .person img {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        object-fit: cover
    }

    .person span {
        display: block;
        color: var(--magenta);
        font-size: 13px;
        font-weight: 600
    }

/* ============================================================
   BLOG
============================================================ */
.blog {
    background: var(--cream)
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px
}

.blog-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: .4s var(--ease)
}

    .blog-card:hover {
        transform: translateY(-10px)
    }

.blog-img {
    height: 230px;
    overflow: hidden;
    position: relative
}

    .blog-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s var(--ease)
    }

.blog-card:hover img {
    transform: scale(1.1)
}

.blog-date-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 9px 14px;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

    .blog-date-badge strong {
        display: block;
        font-size: 19px;
        color: var(--violet);
        font-family: "Plus Jakarta Sans",sans-serif
    }

    .blog-date-badge span {
        font-size: 10.5px;
        color: var(--muted);
        font-weight: 700
    }

.blog-body {
    padding: 26px
}

.blog-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 13px;
    font-weight: 600
}

.blog-body h3 {
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 16px;
    font-weight: 800
}

.read-more {
    color: var(--magenta);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px
}

    .read-more i {
        transition: .25s
    }

.blog-card:hover .read-more i {
    transform: translateX(-4px)
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
    background: var(--ink);
    color: #fff;
    padding: 84px 0 28px;
    position: relative;
    overflow: hidden
}

    .footer::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -150px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: var(--violet);
        filter: blur(120px);
        opacity: .35
    }

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    margin-bottom: 64px;
    position: relative;
    z-index: 2
}

.footer-map {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 300px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

    .footer-map iframe {
        width: 100%;
        height: 100%;
        min-height: 300px;
        display: block;
        border: 0;
        filter: grayscale(.4) contrast(1.05) brightness(.92)
    }

    .footer-map::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(180deg,rgba(7,23,49,.25),transparent 30%,transparent 70%,rgba(7,23,49,.5));
    }

.map-pin-card {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    right: 16px;
    left: 16px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: 0 14px 34px rgba(0,0,0,.3);
    color: var(--text);
}

    .map-pin-card i {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--aurora);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 17px;
        flex-shrink: 0
    }

    .map-pin-card .mp-text {
        flex: 1;
        min-width: 0
    }

    .map-pin-card strong {
        display: block;
        font-size: 13.5px
    }

    .map-pin-card span {
        font-size: 12px;
        color: var(--muted)
    }

    .map-pin-card a {
        flex-shrink: 0;
        color: #fff;
        font-weight: 800;
        font-size: 12.5px;
        display: flex;
        align-items: center;
        gap: 5px;
        background: var(--aurora);
        padding: 9px 13px;
        border-radius: 10px;
        white-space: nowrap;
        transition: .25s;
    }

        .map-pin-card a:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(193,38,131,.35)
        }

.visit-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

    .visit-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background: var(--aurora)
    }

    .visit-card h4 {
        font-size: 18.5px;
        margin-bottom: 20px;
        color: #fff;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 10px
    }

.visit-row {
    display: flex;
    gap: 14px;
    margin-bottom: 18px
}

    .visit-row i {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        background: rgba(255,255,255,.08);
        color: var(--gold2);
        display: grid;
        place-items: center;
        font-size: 18px;
        flex-shrink: 0
    }

    .visit-row strong {
        display: block;
        font-size: 14px;
        margin-bottom: 3px;
        color: #fff
    }

    .visit-row span {
        font-size: 13px;
        color: rgba(255,255,255,.6);
        line-height: 1.7
    }

.visit-card .btn {
    margin-top: 8px;
    justify-content: center
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: 36px;
    position: relative;
    z-index: 2
}

.footer .brand {
    color: #fff;
    margin-bottom: 18px
}

.footer p, .footer li {
    color: rgba(255,255,255,.62);
    line-height: 2;
    margin-bottom: 9px;
    font-size: 14.5px
}

    .footer li a {
        transition: .25s
    }

        .footer li a:hover {
            color: var(--gold2)
        }

.footer h4 {
    margin-bottom: 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 800
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px
}

.footer-contact i {
    color: var(--gold2)
}

.f-social {
    display: flex;
    gap: 10px;
    margin-top: 18px
}

    .f-social a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        display: grid;
        place-items: center;
        transition: .25s
    }

        .f-social a:hover {
            background: var(--aurora);
            transform: translateY(-3px)
        }

.newsletter {
    display: flex;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 6px;
    margin-top: 16px
}

    .newsletter input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 0 14px;
        font-family: inherit;
        background: transparent;
        color: #fff
    }

        .newsletter input::placeholder {
            color: rgba(255,255,255,.45)
        }

    .newsletter button {
        border: 0;
        border-radius: 10px;
        padding: 13px 18px;
        color: #fff;
        background: var(--aurora);
        font-family: inherit;
        font-weight: 800;
        cursor: pointer
    }

.copy {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 50px;
    padding-top: 24px;
    text-align: center;
    color: rgba(255,255,255,.5);
    font-size: 13.5px;
    position: relative;
    z-index: 2
}

    .copy span {
        color: var(--gold2)
    }

/* ============================================================
   FLOATING BUTTONS
============================================================ */
.float-stack {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
    transition: .3s var(--ease);
    border: 0;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(.8);
    pointer-events: none;
}

    .fab.show {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto
    }

    .fab:hover {
        transform: translateY(-4px) scale(1.06)
    }

.fab-wa {
    background: #25D366;
    position: relative
}

    .fab-wa::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid #25D366;
        animation: pulseRing 2.2s ease-out infinite
    }

@keyframes pulseRing {
    0% {
        opacity: .7;
        transform: scale(1)
    }

    100% {
        opacity: 0;
        transform: scale(1.6)
    }
}

.fab-top {
    background: var(--aurora)
}

/* ============================================================
   AOS — premium cinematic reveal layer
============================================================ */
[data-aos] {
    pointer-events: auto;
}

[data-aos] {
    transition-property: opacity, transform, filter !important;
}

[data-aos="zoom-in"].aos-init {
    filter: blur(10px);
}

[data-aos^="fade"].aos-init {
    filter: blur(6px);
}

[data-aos].aos-animate {
    filter: blur(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-aos].aos-init, [data-aos].aos-animate {
        filter: none !important;
    }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1180px) {
    .features-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .about-grid {
        gap: 40px
    }
}

@media(max-width:992px) {
    .menu, .nav-actions .nav-btn {
        display: none
    }

    .burger {
        display: flex
    }

    .program-grid, .teacher-grid, .testimonial-grid, .blog-grid, .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-grid, .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-grid {
        gap: 44px
    }

    .footer-top {
        grid-template-columns: 1fr;
        margin-bottom: 44px
    }

    .hero-card {
        display: none
    }

    .scroll-cue {
        display: none
    }

    .hero {
        min-height: 720px
    }

        .hero .swiper, .hero .swiper-slide {
            height: 720px
        }

    .about-media {
        min-height: 460px;
        margin-bottom: 10px
    }

    .admission {
        background-attachment: scroll
    }

    .testimonials {
        background-attachment: scroll
    }

    .campus-grid {
        grid-template-columns: repeat(3,1fr);
        grid-auto-rows: 120px
    }

    .campus-item.wide {
        grid-column: span 2
    }

    .adm-timeline {
        margin-top: 30px
    }

    .whyus-grid {
        grid-template-columns: 1fr 1fr;
        text-align: center
    }

    .adm-timeline.full {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:768px) {
    .nav-topline {
        display: none
    }

    .features-grid {
        grid-template-columns: 1fr 1fr
    }

    .event-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:650px) {
    .nav-inner {
        min-height: 74px
    }

    .navbar.scrolled .nav-inner {
        min-height: 64px
    }

    .brand {
        font-size: 15px;
        gap: 9px
    }

        .brand small {
            display: none
        }

    .brand-logo {
        width: 40px;
        height: 40px
    }

    .navbar.scrolled .brand-logo {
        width: 34px;
        height: 34px
    }

    .nav-actions {
        gap: 8px
    }

    .features {
        margin-top: 0;
        padding-top: 54px
    }

    .features-grid, .program-grid, .teacher-grid, .testimonial-grid, .blog-grid, .stats-grid {
        grid-template-columns: 1fr
    }

    .event {
        grid-template-columns: 1fr
    }

    .event-date {
        padding: 14px;
        flex-direction: row;
        gap: 8px
    }

        .event-date div {
            display: flex;
            align-items: baseline;
            gap: 6px
        }

    section {
        padding: 76px 0
    }

    .hero {
        min-height: 700px
    }

        .hero .swiper, .hero .swiper-slide {
            height: 700px
        }

        .hero p {
            font-size: 16.5px
        }

        .hero h1 {
            font-size: clamp(32px,8vw,46px)
        }

    .about-list {
        grid-template-columns: 1fr
    }

    .about-main {
        inset: 0
    }

    .about-small, .experience {
        display: none
    }

    .about-media {
        min-height: 320px
    }

    .admission-points {
        gap: 10px
    }

    .whyus-grid {
        grid-template-columns: 1fr
    }

    .cta-row {
        flex-direction: column;
        align-items: stretch
    }

        .cta-row .btn {
            justify-content: center
        }

    .trust-row {
        gap: 18px
    }

    .float-stack {
        left: 14px;
        bottom: 14px
    }

    .fab {
        width: 48px;
        height: 48px;
        font-size: 19px
    }

    .marquee-track span {
        font-size: 11.5px;
        padding: 0 22px
    }

    .campus-grid {
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows: 140px
    }

    .campus-item.wide {
        grid-column: span 2
    }

    .campus-item.tall {
        grid-row: span 1
    }

    .program-tabs {
        gap: 8px
    }

    .program-tab {
        padding: 9px 16px;
        font-size: 13px
    }

    .trust-badges {
        gap: 10px
    }

    .trust-badge {
        padding: 11px 16px
    }
}


/* ===== Admissions Page Premium Form ===== */
.admission-page {
    position: relative;
    background: linear-gradient(180deg,#fff 0%,#f7fbff 42%,#fff 100%);
    overflow: hidden
}

.section-padding {
    padding: 90px 0
}

.admission-head {
    max-width: 850px;
    margin: 0 auto 42px;
    text-align: center
}

    .admission-head h2 {
        font-size: clamp(2rem,4vw,3.4rem);
        line-height: 1.25;
        margin: 14px 0;
        color: var(--ink)
    }

    .admission-head p {
        font-size: 1.08rem;
        color: var(--muted);
        line-height: 2
    }

.admission-quick-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

.admission-info-card {
    position: relative;
    padding: 30px;
    border-radius: 30px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(29,104,174,.12);
    box-shadow: 0 24px 70px rgba(20,72,130,.1);
    overflow: hidden;
    transition: .35s ease
}

    .admission-info-card:before {
        content: "";
        position: absolute;
        inset: auto -40px -70px auto;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(38,170,225,.16),transparent 68%)
    }

    .admission-info-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 34px 90px rgba(20,72,130,.16)
    }

    .admission-info-card.featured {
        background: linear-gradient(135deg,rgba(14,92,170,.96),rgba(36,168,223,.92));
        color: #fff
    }

        .admission-info-card.featured p, .admission-info-card.featured li {
            color: rgba(255,255,255,.88)
        }

.info-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg,rgba(19,105,184,.12),rgba(236,49,128,.1));
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 18px
}

.featured .info-icon {
    background: rgba(255,255,255,.18);
    color: #fff
}

.admission-info-card h3 {
    font-size: 1.35rem;
    margin: 0 0 14px
}

.admission-info-card ul {
    margin: 0;
    padding: 0 18px 0 0;
    color: var(--muted);
    line-height: 2
}

.fees-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

    .fees-mini span {
        padding: 8px 13px;
        border-radius: 999px;
        background: rgba(255,255,255,.17);
        font-size: .9rem
    }

.registration-section {
    padding: 30px 0 100px
}

.form-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 28px;
    align-items: start
}

.form-aside {
    position: sticky;
    top: 110px;
    border-radius: 34px;
    padding: 34px;
    background: linear-gradient(180deg,#081e3c,#123f78);
    color: #fff;
    box-shadow: 0 30px 90px rgba(8,30,60,.22);
    overflow: hidden
}

    .form-aside:after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(236,49,128,.32),transparent 68%);
        left: -80px;
        bottom: -90px
    }

    .form-aside h2 {
        font-size: 2rem;
        line-height: 1.35;
        margin: 14px 0
    }

    .form-aside p {
        color: rgba(255,255,255,.78);
        line-height: 2
    }

.form-progress-list {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    position: relative;
    z-index: 2
}

    .form-progress-list div {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 14px;
        border-radius: 18px;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.1)
    }

.admission-form {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(29,104,174,.12);
    border-radius: 34px;
    padding: 30px;
    box-shadow: 0 28px 90px rgba(20,72,130,.12)
}

    .admission-form fieldset {
        border: 0;
        margin: 0 0 28px;
        padding: 0 0 26px;
        border-bottom: 1px solid rgba(29,104,174,.12)
    }

        .admission-form fieldset:last-child {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0
        }

    .admission-form legend {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        color: var(--ink);
        font-size: 1.22rem;
        margin-bottom: 18px
    }

        .admission-form legend i {
            color: var(--primary)
        }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

    .form-group.full {
        grid-column: 1/-1
    }

    .form-group label {
        font-weight: 800;
        color: #17365f;
        font-size: .95rem
    }

    .form-group input, .form-group select, .form-group textarea {
        width: 100%;
        border: 1px solid rgba(29,104,174,.16);
        border-radius: 18px;
        background: #f8fbff;
        padding: 15px 16px;
        font-family: inherit;
        font-size: 1rem;
        color: #17365f;
        outline: none;
        transition: .25s ease
    }

    .form-group textarea {
        resize: vertical;
        min-height: 110px
    }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            border-color: rgba(35,151,218,.75);
            box-shadow: 0 0 0 5px rgba(35,151,218,.12);
            background: #fff
        }

    .form-group input[type=file] {
        padding: 12px;
        background: #fff
    }

.agree-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.9;
    color: #345;
    cursor: pointer;
    margin-top: 10px
}

    .agree-line input {
        margin-top: 8px;
        accent-color: var(--primary)
    }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px
}

.submit-btn {
    border: 0;
    border-radius: 18px;
    padding: 15px 24px;
    background: linear-gradient(135deg,var(--primary),#25aee8);
    color: #fff;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 18px 42px rgba(18,105,184,.25);
    transition: .3s ease
}

    .submit-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 24px 54px rgba(18,105,184,.32)
    }

.secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 900;
    text-decoration: none
}

.admission-page .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

@media (max-width: 992px) {
    .admission-quick-grid {
        grid-template-columns: 1fr
    }

    .form-shell {
        grid-template-columns: 1fr
    }

    .form-aside {
        position: relative;
        top: auto
    }

    .registration-section {
        padding-top: 10px
    }

    .section-padding {
        padding: 70px 0
    }
}

@media (max-width: 640px) {
    .admission-head {
        text-align: right
    }

    .admission-form, .form-aside {
        border-radius: 24px;
        padding: 22px
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .form-actions {
        align-items: stretch
    }

    .submit-btn, .secondary-link {
        width: 100%;
        justify-content: center;
        text-align: center
    }

    .admission-info-card {
        padding: 24px;
        border-radius: 24px
    }

    .form-aside h2 {
        font-size: 1.55rem
    }
}

:root {
    --hy-ink: #071731;
    --hy-blue: #4070B0;
    --hy-blue-2: #5080C0;
    --hy-violet: #703090;
    --hy-magenta: #A03080;
    --hy-rose: #C03080;
    --hy-soft: #F2EFFA;
    --hy-paper: #F8FAFF;
    --hy-line: rgba(64,112,176,.14);
    --hy-ease: cubic-bezier(.2,.75,.2,1);
}

html {
    scroll-padding-top: 112px
}

body {
    font-family: "Cairo","Almarai",sans-serif;
    background: var(--hy-paper)
}

    body.hybrid-menu-open {
        overflow: hidden
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -3;
        pointer-events: none;
        background: radial-gradient(circle at 8% 12%,rgba(160,48,128,.08),transparent 24%), radial-gradient(circle at 92% 58%,rgba(64,112,176,.10),transparent 28%);
    }

:focus-visible {
    outline: 3px solid var(--hy-magenta);
    outline-offset: 4px
}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;
}

.hybrid-navbar {
    position: fixed;
    inset: 18px 0 auto;
    z-index: 1000;
    pointer-events: none;
    transition: .4s var(--hy-ease)
}

.hybrid-nav-shell {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 14px 10px 18px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 30px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 20px 62px rgba(7,23,49,.14);
    backdrop-filter: blur(24px) saturate(150%);
    pointer-events: auto;
    transition: .42s var(--hy-ease)
}

.hybrid-navbar.scrolled {
    top: 10px
}

    .hybrid-navbar.scrolled .hybrid-nav-shell {
        min-height: 78px;
        transform: translateY(-6px);
        background: rgba(255,255,255,.93);
        box-shadow: 0 14px 46px rgba(7,23,49,.18)
    }

.hybrid-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: max-content
}

.hybrid-logo-wrap {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    padding: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 25px 25px 25px 10px;
    background: linear-gradient(145deg,#fff,var(--hy-soft));
    box-shadow: 0 15px 36px rgba(64,48,128,.25),0 0 0 4px rgba(160,48,128,.06);
    transition: .5s var(--hy-ease)
}

.hybrid-brand:hover .hybrid-logo-wrap {
    transform: rotate(-4deg) scale(1.055);
    border-radius: 32px 13px 32px 13px
}

.hybrid-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 11px rgba(64,32,96,.2))
}

.hybrid-brand-copy {
    display: grid;
    line-height: 1.2
}

    .hybrid-brand-copy strong {
        font-size: clamp(19px,1.7vw,26px);
        font-weight: 900;
        color: var(--hy-ink)
    }

    .hybrid-brand-copy small {
        margin-top: 5px;
        color: var(--hy-magenta);
        font-family: "Almarai",sans-serif;
        font-size: 10px;
        font-weight: 800
    }

.hybrid-header-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0
}

    .hybrid-header-links a {
        min-width: 66px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 7px;
        border: 1px solid transparent;
        border-radius: 16px;
        color: #64708A;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.15;
        transition: color .35s var(--hy-ease),background .35s var(--hy-ease),transform .35s var(--hy-ease),border-radius .35s var(--hy-ease)
    }

        .hybrid-header-links a .material-symbols-rounded {
            font-size: 22px;
            color: var(--hy-blue);
            transition: .35s var(--hy-ease)
        }

        .hybrid-header-links a:hover {
            color: var(--hy-magenta);
            background: var(--hy-soft);
            transform: translateY(-3px);
            border-radius: 22px 10px 22px 10px
        }

            .hybrid-header-links a:hover .material-symbols-rounded {
                color: var(--hy-magenta);
                transform: scale(1.08)
            }

        .hybrid-header-links a.active {
            color: #fff;
            background: linear-gradient(145deg,var(--hy-blue),var(--hy-violet) 58%,var(--hy-magenta));
            box-shadow: 0 10px 24px rgba(80,70,165,.24)
        }

            .hybrid-header-links a.active .material-symbols-rounded {
                color: #fff;
                font-variation-settings: "FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24
            }

.hybrid-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.hybrid-cta {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 21px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(120deg,var(--hy-blue),var(--hy-violet) 56%,var(--hy-magenta));
    box-shadow: 0 14px 32px rgba(64,80,170,.25);
    font-weight: 800;
    transform: translate3d(var(--mx,0),var(--my,0),0);
    transition: .42s var(--hy-ease)
}

    .hybrid-cta:hover {
        border-radius: 28px 13px 28px 13px;
        box-shadow: 0 20px 44px rgba(112,48,144,.32)
    }

.hybrid-menu-toggle, .hybrid-panel-close {
    width: 50px;
    height: 50px;
    display: none;
    place-items: center;
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: var(--hy-ink);
    cursor: pointer;
    transition: .35s var(--hy-ease)
}

    .hybrid-menu-toggle:hover, .hybrid-panel-close:hover {
        transform: scale(1.06);
        border-radius: 50%;
        background: var(--hy-magenta)
    }

.hybrid-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    opacity: 0;
    background: rgba(7,23,49,.66);
    backdrop-filter: blur(8px);
    transition: .35s
}

.hybrid-panel {
    position: fixed;
    z-index: 1110;
    top: 0;
    right: 0;
    width: min(400px,92vw);
    height: 100dvh;
    padding: 24px;
    overflow-y: auto;
    color: #fff;
    background: radial-gradient(circle at 15% 8%,rgba(192,48,128,.24),transparent 30%),linear-gradient(155deg,#402060,#071731 68%);
    box-shadow: -30px 0 80px rgba(0,0,0,.3);
    transform: translateX(105%);
    transition: .55s var(--hy-ease)
}

.hybrid-menu-open .hybrid-overlay {
    visibility: visible;
    opacity: 1
}

.hybrid-menu-open .hybrid-panel {
    transform: translateX(0)
}

.hybrid-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.12)
}

.hybrid-panel .hybrid-brand-copy strong {
    color: #fff
}

.hybrid-panel .hybrid-brand-copy small {
    color: #D8B9EA
}

.hybrid-panel-close {
    display: grid;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08)
}

.hybrid-panel-nav {
    display: grid;
    gap: 8px;
    padding: 26px 0
}

    .hybrid-panel-nav a {
        display: grid;
        grid-template-columns: 26px 1fr 22px;
        align-items: center;
        gap: 13px;
        padding: 14px 15px;
        border: 1px solid transparent;
        border-radius: 18px;
        color: rgba(255,255,255,.75);
        font-weight: 800;
        transition: .35s var(--hy-ease)
    }

        .hybrid-panel-nav a:hover, .hybrid-panel-nav a.active {
            color: #fff;
            background: rgba(255,255,255,.09);
            border-color: rgba(255,255,255,.12);
            transform: translateX(-6px)
        }

        .hybrid-panel-nav a > .material-symbols-rounded:first-child {
            color: #D8B9EA
        }

.hybrid-panel-contact {
    display: grid;
    gap: 11px;
    padding-top: 21px;
    border-top: 1px solid rgba(255,255,255,.12)
}

    .hybrid-panel-contact a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255,255,255,.68);
        font-size: 13px
    }

.hero {
    padding-top: 0
}

.hero-content {
    padding-top: 88px !important
}

.hero-logo-mark {
    width: 96px !important;
    height: 96px !important;
    padding: 5px !important;
    object-fit: contain !important;
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,.95) !important;
    filter: drop-shadow(0 14px 24px rgba(7,23,49,.24))
}

.hero h1 span {
    background: linear-gradient(100deg,#fff 5%,#68B7FF 34%,#D8B9EA 66%,#FFD3E6 92%);
    -webkit-background-clip: text;
    background-clip: text
}

.feature, .program, .whyus-card, .teacher, .testimonial, .blog-card {
    transition: transform .5s var(--hy-ease),box-shadow .5s var(--hy-ease),border-radius .5s var(--hy-ease) !important
}

    .feature:hover, .program:hover, .whyus-card:hover, .teacher:hover, .testimonial:hover, .blog-card:hover {
        border-radius: 34px 16px 34px 16px !important
    }

    .program:hover, .teacher:hover, .blog-card:hover {
        transform: translateY(-11px) !important;
        box-shadow: 0 28px 70px rgba(7,23,49,.18) !important
    }

.btn {
    transition: transform .4s var(--hy-ease),box-shadow .4s var(--hy-ease),border-radius .4s var(--hy-ease) !important
}

    .btn:hover {
        border-radius: 28px 13px 28px 13px !important
    }

    .btn .material-symbols-rounded {
        font-size: 19px;
        transition: .3s var(--hy-ease)
    }

    .btn:hover .material-symbols-rounded {
        transform: translateX(-4px)
    }

.feature-icon .material-symbols-rounded {
    font-size: 34px
}

.trust-badge > .material-symbols-rounded {
    font-size: 25px;
    background: var(--aurora);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.program-meta .material-symbols-rounded, .blog-meta .material-symbols-rounded {
    font-size: 16px;
    vertical-align: -3px
}

.admission-points .material-symbols-rounded {
    color: var(--gold2);
    font-size: 19px
}

.whyus-icon .material-symbols-rounded {
    font-size: 28px
}

.visit-row > .material-symbols-rounded {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: rgba(255,255,255,.08);
    color: var(--gold2);
    font-size: 20px
}

.footer-contact .material-symbols-rounded {
    color: var(--gold2);
    font-size: 20px
}

.f-social .material-symbols-rounded {
    font-size: 18px
}

.fab .material-symbols-rounded {
    font-size: 23px
}

.testimonials .testimonial-label {
    color: #dbe8ff
}

    .testimonials .testimonial-label .dot {
        background: linear-gradient(135deg,var(--gold),var(--gold2))
    }

.newsletter-social {
    margin-top: 20px
}

.read-more .material-symbols-rounded, .program-footer .material-symbols-rounded {
    font-size: 17px;
    vertical-align: -3px
}

.section-title h2, .about-content h2 {
    letter-spacing: -.45px
}

@media(max-width:1120px) {
    .hybrid-header-links {
        display: none
    }

    .hybrid-menu-toggle {
        display: grid
    }
}

@media(max-width:720px) {
    html {
        scroll-padding-top: 92px
    }

    .hybrid-navbar {
        inset: 9px 0 auto
    }

    .hybrid-nav-shell {
        width: calc(100% - 18px);
        min-height: 74px;
        padding: 8px 9px;
        border-radius: 23px
    }

    .hybrid-logo-wrap {
        width: 59px;
        height: 59px;
        padding: 4px;
        border-radius: 19px 19px 19px 8px
    }

    .hybrid-brand {
        gap: 9px
    }

    .hybrid-brand-copy strong {
        font-size: 17px
    }

    .hybrid-brand-copy small {
        font-size: 8.5px
    }

    .hybrid-cta {
        display: none
    }

    .hybrid-menu-toggle {
        width: 46px;
        height: 46px;
        border-radius: 15px
    }

    .hero-content {
        padding-top: 105px !important
    }

    .hero-logo-mark {
        width: 82px !important;
        height: 82px !important
    }
}

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

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


/* ============================================================
     NAVIGATION V3 — premium navbar + always-alive mobile panel
  ============================================================ */
.hybrid-navbar .hybrid-nav-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden
}

    .hybrid-navbar .hybrid-nav-shell::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        right: 3%;
        left: 3%;
        height: 2px;
        pointer-events: none;
        background: linear-gradient(90deg,transparent,var(--hy-blue),#68d7ff,var(--hy-magenta),transparent);
        background-size: 240% 100%;
        animation: navLightRun 5.5s linear infinite;
    }

    .hybrid-navbar .hybrid-nav-shell::after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 260px;
        height: 260px;
        left: -120px;
        top: -160px;
        border-radius: 50%;
        pointer-events: none;
        background: conic-gradient(from 0deg,rgba(64,112,176,.18),rgba(160,48,128,.2),rgba(104,215,255,.15),rgba(64,112,176,.18));
        filter: blur(28px);
        animation: navAuraSpin 12s linear infinite;
    }

.hybrid-nav-shell > *:not(.hybrid-nav-ambient) {
    position: relative;
    z-index: 2
}

.hybrid-nav-ambient {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

    .hybrid-nav-ambient span {
        position: absolute;
        border: 1px solid rgba(64,112,176,.1);
        border-radius: 50%;
        animation: navBubbleFloat 7s ease-in-out infinite
    }

        .hybrid-nav-ambient span:nth-child(1) {
            width: 54px;
            height: 54px;
            right: 27%;
            top: -34px
        }

        .hybrid-nav-ambient span:nth-child(2) {
            width: 22px;
            height: 22px;
            left: 31%;
            bottom: -12px;
            animation-delay: -2.4s;
            background: rgba(160,48,128,.04)
        }

        .hybrid-nav-ambient span:nth-child(3) {
            width: 10px;
            height: 10px;
            left: 11%;
            top: 15px;
            animation-delay: -4.8s;
            background: rgba(104,215,255,.14);
            border: 0
        }

.hybrid-navbar .hybrid-logo-wrap {
    position: relative;
    isolation: isolate
}

    .hybrid-navbar .hybrid-logo-wrap::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: -48%;
        background: conic-gradient(transparent 0 28%,rgba(104,215,255,.5),transparent 42% 65%,rgba(214,67,151,.42),transparent 80%);
        animation: navLogoOrbit 8s linear infinite
    }

    .hybrid-navbar .hybrid-logo-wrap::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 4px;
        border-radius: inherit;
        background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,241,252,.94))
    }

.hybrid-navbar .hybrid-logo {
    position: relative;
    z-index: 2
}

.hybrid-header-links a {
    position: relative;
    overflow: hidden;
    transform: none !important
}

    .hybrid-header-links a::before {
        content: "";
        position: absolute;
        inset: auto 18% 0;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg,var(--hy-blue),var(--hy-magenta));
        transform: scaleX(0);
        transition: transform .35s var(--hy-ease)
    }

    .hybrid-header-links a:hover {
        transform: none !important
    }

        .hybrid-header-links a:hover::before {
            transform: scaleX(1)
        }

    .hybrid-header-links a.active::before {
        inset: auto 20% 5px;
        background: rgba(255,255,255,.72);
        transform: scaleX(1)
    }

.nav-admission-status {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(34,197,94,.17);
    border-radius: 13px;
    color: #176c3b;
    background: rgba(235,250,240,.82);
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: inset 0 1px rgba(255,255,255,.8)
}

    .nav-admission-status i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 0 rgba(34,197,94,.38);
        animation: navStatusPulse 1.9s ease-out infinite
    }

.hybrid-navbar .hybrid-cta {
    transform: none !important;
    position: relative;
    overflow: hidden
}

    .hybrid-navbar .hybrid-cta::before {
        content: "";
        position: absolute;
        top: -70%;
        bottom: -70%;
        width: 28px;
        left: -45px;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
        transform: rotate(20deg);
        animation: navCtaShine 4.8s ease-in-out infinite
    }

    .hybrid-navbar .hybrid-cta:hover {
        transform: none !important
    }

.hybrid-menu-toggle {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: none !important
}

    .hybrid-menu-toggle::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: -45%;
        background: conic-gradient(var(--hy-blue),#68d7ff,var(--hy-magenta),var(--hy-violet),var(--hy-blue));
        animation: navMenuSpin 5s linear infinite
    }

    .hybrid-menu-toggle::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 2px;
        border-radius: 14px;
        background: var(--hy-ink)
    }

    .hybrid-menu-toggle:hover {
        border-radius: 17px;
        transform: none !important
    }

        .hybrid-menu-toggle:hover::after {
            background: #341a57
        }

    .hybrid-menu-toggle .material-symbols-rounded {
        position: relative;
        z-index: 2
    }

.hybrid-overlay {
    background: rgba(3,11,28,.74)
}

.hybrid-panel {
    width: min(440px,94vw);
    padding: 20px 20px 17px;
    isolation: isolate;
    overflow-x: hidden;
    background: radial-gradient(circle at 13% 9%,rgba(192,48,128,.28),transparent 29%),radial-gradient(circle at 85% 72%,rgba(64,112,176,.22),transparent 31%),linear-gradient(155deg,#301750 0%,#0b1c3a 48%,#050f25 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(216,185,234,.35) transparent;
}

    .hybrid-panel::before {
        content: "";
        position: absolute;
        z-index: -3;
        inset: 0;
        opacity: .25;
        pointer-events: none;
        background-image: linear-gradient(rgba(104,215,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(104,215,255,.07) 1px,transparent 1px);
        background-size: 42px 42px;
        animation: panelGridMove 13s linear infinite
    }

    .hybrid-panel::after {
        content: "";
        position: absolute;
        z-index: -2;
        right: -25%;
        left: -25%;
        height: 170px;
        top: -220px;
        pointer-events: none;
        background: linear-gradient(to bottom,transparent,rgba(104,215,255,.03),rgba(104,215,255,.19),transparent);
        transform: skewY(-7deg);
        animation: panelScanner 7s ease-in-out infinite
    }

.hybrid-panel-motion {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.panel-orbit {
    position: absolute;
    border: 1px dashed rgba(216,185,234,.16);
    border-radius: 50%;
    animation: panelOrbitSpin 18s linear infinite
}

    .panel-orbit::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        right: 9%;
        top: 16%;
        border-radius: 50%;
        background: #68d7ff;
        box-shadow: 0 0 18px #68d7ff
    }

    .panel-orbit.o1 {
        width: 240px;
        height: 240px;
        left: -125px;
        top: 20%
    }

    .panel-orbit.o2 {
        width: 150px;
        height: 150px;
        right: -82px;
        bottom: 12%;
        animation-direction: reverse;
        animation-duration: 13s
    }

.panel-spark {
    position: absolute;
    color: rgba(255,255,255,.16);
    font-size: 20px;
    animation: panelSparkFloat 6s ease-in-out infinite
}

    .panel-spark.s1 {
        top: 16%;
        left: 11%
    }

    .panel-spark.s2 {
        top: 56%;
        right: 7%;
        animation-delay: -2s
    }

    .panel-spark.s3 {
        bottom: 8%;
        left: 17%;
        animation-delay: -4s
    }

.hybrid-panel-head, .hybrid-panel-welcome, .panel-section-title, .hybrid-panel-nav, .panel-quick-actions, .hybrid-panel-contact, .hybrid-panel-footer {
    position: relative;
    z-index: 2
}

.hybrid-panel-head {
    padding: 1px 0 16px
}

.hybrid-panel .hybrid-logo-wrap {
    width: 54px;
    height: 54px;
    padding: 4px;
    border-radius: 17px 17px 17px 6px
}

.hybrid-panel .hybrid-brand-copy strong {
    font-size: 17px
}

.hybrid-panel .hybrid-brand-copy small {
    font-size: 8.5px
}

.hybrid-panel-close {
    position: relative;
    overflow: hidden;
    transform: none !important
}

    .hybrid-panel-close::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 1px solid rgba(255,255,255,.12);
        animation: panelCloseRing 2.8s ease-in-out infinite
    }

    .hybrid-panel-close:hover {
        border-radius: 17px;
        transform: none !important;
        background: rgba(255,255,255,.13)
    }

.hybrid-panel-welcome {
    margin-top: 15px;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px 22px 22px 8px;
    background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
    box-shadow: 0 18px 40px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    overflow: hidden
}

    .hybrid-panel-welcome::before {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        left: -50px;
        top: -60px;
        border-radius: 50%;
        background: rgba(104,215,255,.1);
        filter: blur(10px);
        animation: panelWelcomeGlow 6s ease-in-out infinite
    }

.panel-welcome-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.panel-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(74,222,128,.17);
    border-radius: 999px;
    color: #c5f8d5;
    background: rgba(36,116,76,.18);
    font-size: 9.5px;
    font-weight: 900
}

    .panel-live i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 0 0 rgba(74,222,128,.35);
        animation: navStatusPulse 1.9s ease-out infinite
    }

.panel-welcome-top > .material-symbols-rounded {
    color: #f3d58a;
    font-size: 21px;
    animation: panelStarTwinkle 2.5s ease-in-out infinite
}

.hybrid-panel-welcome h3 {
    position: relative;
    z-index: 1;
    margin: 12px 0 5px;
    color: #fff;
    font-size: 18px;
    font-weight: 900
}

.hybrid-panel-welcome p {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    color: rgba(255,255,255,.56) !important;
    font-size: 10.5px !important;
    line-height: 1.8 !important
}

.panel-mini-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 12px
}

.panel-mini-stat {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(0,0,0,.09);
    color: rgba(255,255,255,.68);
    font-size: 9.5px;
    font-weight: 800
}

    .panel-mini-stat .material-symbols-rounded {
        color: #f3d58a;
        font-size: 16px
    }

.panel-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 2px 9px;
    color: rgba(255,255,255,.48);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .04em
}

    .panel-section-title::after {
        content: "";
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg,rgba(255,255,255,.12),transparent)
    }

.hybrid-panel-nav {
    gap: 6px;
    padding: 0
}

    .hybrid-panel-nav a {
        position: relative;
        grid-template-columns: 38px minmax(0,1fr) 22px;
        gap: 10px;
        min-height: 54px;
        padding: 8px 10px;
        border-color: rgba(255,255,255,.055);
        background: rgba(255,255,255,.025);
        overflow: hidden;
        transform: none !important
    }

        .hybrid-panel-nav a::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg,transparent 15%,rgba(255,255,255,.09),transparent 72%);
            transform: translateX(120%);
            transition: transform .55s var(--hy-ease)
        }

        .hybrid-panel-nav a:hover, .hybrid-panel-nav a.active {
            transform: none !important;
            border-color: rgba(255,255,255,.15);
            background: rgba(255,255,255,.09)
        }

            .hybrid-panel-nav a:hover::before, .hybrid-panel-nav a.active::before {
                transform: translateX(-120%)
            }

        .hybrid-panel-nav a > .material-symbols-rounded:first-child {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 12px;
            color: #f3d58a;
            background: rgba(255,255,255,.055);
            font-size: 19px
        }

        .hybrid-panel-nav a:hover > .material-symbols-rounded:first-child, .hybrid-panel-nav a.active > .material-symbols-rounded:first-child {
            color: #fff;
            background: linear-gradient(135deg,var(--hy-blue),var(--hy-magenta));
            box-shadow: 0 8px 18px rgba(42,20,83,.28)
        }

        .hybrid-panel-nav a > span:nth-child(2) {
            font-size: 11.5px
        }

        .hybrid-panel-nav a > .material-symbols-rounded:last-child {
            color: rgba(255,255,255,.3);
            font-size: 16px
        }

.panel-link-copy {
    display: flex !important;
    align-items: center;
    gap: 7px
}

.panel-link-badge {
    padding: 3px 6px;
    border: 1px solid rgba(74,222,128,.17);
    border-radius: 999px;
    color: #bff6d0;
    background: rgba(36,116,76,.17);
    font-size: 7.5px;
    font-weight: 900
}

.panel-quick-actions {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin-top: 14px
}

.panel-quick-action {
    min-width: 0;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.04);
    font-size: 8.5px;
    font-weight: 900;
    text-align: center;
    transform: none !important;
    transition: background .3s,border-color .3s,box-shadow .3s !important
}

    .panel-quick-action:hover {
        color: #fff;
        border-color: rgba(255,255,255,.17);
        background: rgba(255,255,255,.09);
        box-shadow: 0 12px 25px rgba(0,0,0,.18);
        transform: none !important
    }

    .panel-quick-action .material-symbols-rounded {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: #f3d58a;
        background: rgba(255,255,255,.07);
        font-size: 17px
    }

.hybrid-panel-contact {
    gap: 7px;
    margin-top: 15px;
    padding-top: 14px
}

.panel-contact-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 900
}

    .panel-contact-title .material-symbols-rounded {
        color: #4ade80;
        font-size: 17px
    }

.hybrid-panel-contact a {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    font-size: 10.5px;
    overflow-wrap: anywhere;
    transform: none !important
}

    .hybrid-panel-contact a > .material-symbols-rounded {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        border-radius: 9px;
        color: #f3d58a;
        background: rgba(255,255,255,.06);
        font-size: 15px
    }

    .hybrid-panel-contact a:hover {
        color: #fff;
        background: rgba(255,255,255,.08);
        transform: none !important
    }

.hybrid-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 2px 0;
    border-top: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.35);
    font-size: 8.5px
}

    .hybrid-panel-footer span:first-child {
        display: flex;
        align-items: center;
        gap: 5px
    }

    .hybrid-panel-footer .material-symbols-rounded {
        color: #e27ab7;
        font-size: 13px;
        font-variation-settings: "FILL" 1,"wght" 500,"GRAD" 0,"opsz" 16
    }

.hybrid-menu-open .hybrid-panel-welcome {
    animation: panelItemReveal .55s .08s both
}

.hybrid-menu-open .panel-section-title {
    animation: panelItemReveal .55s .13s both
}

.hybrid-menu-open .hybrid-panel-nav {
    animation: panelItemReveal .55s .18s both
}

.hybrid-menu-open .panel-quick-actions {
    animation: panelItemReveal .55s .23s both
}

.hybrid-menu-open .hybrid-panel-contact {
    animation: panelItemReveal .55s .28s both
}

.hybrid-menu-open .hybrid-panel-footer {
    animation: panelItemReveal .55s .33s both
}

@keyframes navLightRun {
    to {
        background-position: 240% 0
    }
}

@keyframes navAuraSpin {
    to {
        transform: rotate(360deg) scale(1.08)
    }
}

@keyframes navBubbleFloat {
    50% {
        transform: translate3d(0,15px,0) scale(1.12)
    }
}

@keyframes navLogoOrbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes navStatusPulse {
    70% {
        box-shadow: 0 0 0 9px rgba(34,197,94,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0)
    }
}

@keyframes navCtaShine {
    0%,55% {
        left: -45px
    }

    82%,100% {
        left: 120%
    }
}

@keyframes navMenuSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes panelGridMove {
    to {
        background-position: 42px 42px
    }
}

@keyframes panelScanner {
    0% {
        top: -220px;
        opacity: 0
    }

    18% {
        opacity: 1
    }

    82% {
        opacity: 1
    }

    100% {
        top: 110%;
        opacity: 0
    }
}

@keyframes panelOrbitSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes panelSparkFloat {
    50% {
        transform: translateY(-16px) rotate(12deg);
        color: rgba(255,255,255,.32)
    }
}

@keyframes panelCloseRing {
    50% {
        inset: 5px;
        border-color: rgba(216,185,234,.26)
    }
}

@keyframes panelWelcomeGlow {
    50% {
        transform: translate(22px,16px) scale(1.15)
    }
}

@keyframes panelStarTwinkle {
    50% {
        opacity: .52;
        filter: drop-shadow(0 0 10px rgba(243,213,138,.75))
    }
}

@keyframes panelItemReveal {
    from {
        opacity: 0;
        transform: translateX(22px);
        filter: blur(5px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@media(max-width:1280px) {
    .nav-admission-status {
        display: none
    }
}

@media(max-width:1120px) {
    .hybrid-nav-shell {
        gap: 14px
    }

    .nav-admission-status {
        display: flex
    }
}

@media(max-width:720px) {
    .nav-admission-status {
        display: none
    }

    .hybrid-navbar .hybrid-nav-shell::after {
        width: 190px;
        height: 190px
    }

    .hybrid-menu-toggle::after {
        border-radius: 12px
    }
}

@media(max-width:430px) {
    .hybrid-panel {
        width: 95vw;
        padding-inline: 15px
    }

    .hybrid-panel-welcome {
        padding: 14px
    }

    .panel-quick-actions {
        gap: 5px
    }

    .hybrid-panel-nav a {
        min-height: 51px
    }

    .hybrid-panel .hybrid-brand-copy strong {
        font-size: 15px
    }

    .hybrid-panel .hybrid-brand-copy small {
        font-size: 7.5px
    }
}

@media(max-height:700px) {
    .hybrid-panel-welcome p, .panel-mini-stats {
        display: none
    }

    .hybrid-panel-nav a {
        min-height: 49px
    }

    .hybrid-panel-welcome {
        padding-block: 13px
    }

        .hybrid-panel-welcome h3 {
            margin-bottom: 0
        }

    .panel-section-title {
        margin-top: 13px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hybrid-nav-shell::before, .hybrid-nav-shell::after, .hybrid-nav-ambient span, .hybrid-logo-wrap::before, .nav-admission-status i, .hybrid-cta::before, .hybrid-menu-toggle::before, .hybrid-panel::before, .hybrid-panel::after, .panel-orbit, .panel-spark, .hybrid-panel-close::after, .hybrid-panel-welcome::before, .panel-live i, .panel-welcome-top > .material-symbols-rounded {
        animation: none !important
    }
}


/* ============================================================
     FOOTER V2 — premium closing experience
  ============================================================ */
.footer-v2 {
    --ft-card: rgba(255,255,255,.075);
    --ft-line: rgba(255,255,255,.13);
    --ft-muted: rgba(255,255,255,.66);
    margin-top: 0;
    padding: 84px 0 22px;
    isolation: isolate;
    background: radial-gradient(circle at 82% 8%,rgba(160,48,128,.24),transparent 28%), radial-gradient(circle at 12% 78%,rgba(64,112,176,.24),transparent 31%), linear-gradient(145deg,#06142b 0%,#111a3a 48%,#2a1648 100%);
}

    .footer-v2::before {
        top: -210px;
        right: -90px;
        width: 540px;
        height: 540px;
        opacity: .25;
        background: conic-gradient(from 90deg,var(--hy-blue),var(--hy-magenta),var(--hy-violet),var(--hy-blue));
        filter: blur(105px);
        animation: footerGlow 16s linear infinite;
    }

    .footer-v2::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        pointer-events: none;
        opacity: .24;
        background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
        background-size: 58px 58px;
        -webkit-mask-image: linear-gradient(to bottom,black,transparent 80%);
        mask-image: linear-gradient(to bottom,black,transparent 80%);
    }

@keyframes footerGlow {
    to {
        transform: rotate(360deg) scale(1.08)
    }
}

@keyframes footerFloat {
    50% {
        transform: translate3d(0,-18px,0) scale(1.08)
    }
}

@keyframes footerPulse {
    50% {
        box-shadow: 0 0 0 8px rgba(74,222,128,0)
    }
}

@keyframes footerGradient {
    to {
        background-position: 220% 0
    }
}

.footer-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}

    .footer-ambient span {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.09);
        animation: footerFloat 8s ease-in-out infinite
    }

        .footer-ambient span:nth-child(1) {
            width: 170px;
            height: 170px;
            top: 18%;
            left: -55px
        }

        .footer-ambient span:nth-child(2) {
            width: 86px;
            height: 86px;
            top: 52%;
            right: 8%;
            animation-delay: -2.5s
        }

        .footer-ambient span:nth-child(3) {
            width: 34px;
            height: 34px;
            bottom: 14%;
            left: 31%;
            background: rgba(104,183,255,.08);
            animation-delay: -5s
        }

.footer-cta {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 24px;
    margin-bottom: 26px;
    padding: 30px clamp(24px,4vw,44px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 30px 30px 30px 12px;
    color: var(--hy-ink);
    background: linear-gradient(125deg,rgba(255,255,255,.98),rgba(244,247,255,.94));
    box-shadow: 0 30px 80px rgba(0,0,0,.28),0 0 0 6px rgba(255,255,255,.035);
}

    .footer-cta::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        left: -90px;
        top: -120px;
        border-radius: 50%;
        background: linear-gradient(135deg,rgba(64,112,176,.16),rgba(160,48,128,.13));
        filter: blur(8px)
    }

    .footer-cta::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 4px;
        background: linear-gradient(90deg,var(--hy-blue),var(--hy-violet),var(--hy-magenta),var(--hy-blue));
        background-size: 220% 100%;
        animation: footerGradient 5s linear infinite
    }

.footer-cta-icon {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px 24px 24px 9px;
    color: #fff;
    background: linear-gradient(145deg,var(--hy-blue),var(--hy-violet) 58%,var(--hy-magenta));
    box-shadow: 0 18px 38px rgba(92,57,154,.28),inset 0 1px rgba(255,255,255,.28)
}

    .footer-cta-icon .material-symbols-rounded {
        font-size: 36px;
        font-variation-settings: "FILL" 1,"wght" 500,"GRAD" 0,"opsz" 36
    }

.footer-cta-copy {
    position: relative;
    z-index: 1;
    min-width: 0
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #176c3b;
    background: #e9f9ef;
    border: 1px solid #c8efd6;
    font-size: 11.5px;
    font-weight: 900
}

    .footer-status i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 0 rgba(34,197,94,.35);
        animation: footerPulse 1.8s infinite
    }

.footer-cta h2 {
    margin: 0 0 5px;
    color: var(--hy-ink);
    font-size: clamp(24px,3vw,38px);
    line-height: 1.3;
    font-weight: 900;
    text-wrap: balance
}

.footer-cta p {
    margin: 0 !important;
    color: #68748a !important;
    font-size: 14.5px !important;
    line-height: 1.8 !important
}

.footer-cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.footer-action {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 19px;
    border: 1px solid rgba(64,112,176,.16);
    border-radius: 15px;
    color: var(--hy-ink);
    background: #fff;
    box-shadow: 0 10px 25px rgba(7,23,49,.08);
    font-size: 13.5px;
    font-weight: 900;
    isolation: isolate;
    overflow: hidden;
    transition: color .35s,border-color .35s,box-shadow .35s,border-radius .35s !important;
    transform: none !important
}

    .footer-action.primary {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(135deg,var(--hy-blue),var(--hy-violet),var(--hy-magenta))
    }

    .footer-action::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(135deg,var(--hy-blue),var(--hy-violet)) left/0 100% no-repeat,linear-gradient(225deg,var(--hy-magenta),var(--hy-rose)) right/0 100% no-repeat;
        transition: background-size .5s var(--hy-ease)
    }

    .footer-action:hover::before {
        background-size: 51% 100%,51% 100%
    }

    .footer-action:hover {
        color: #fff;
        border-color: rgba(255,255,255,.24);
        box-shadow: 0 16px 34px rgba(80,48,140,.27);
        border-radius: 24px 11px 24px 11px;
        transform: none !important
    }

.footer-proof {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 24px
}

.footer-proof-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid var(--ft-line);
    border-radius: 18px;
    background: var(--ft-card);
    backdrop-filter: blur(12px);
    transition: background .35s,border-color .35s
}

    .footer-proof-item:hover {
        background: rgba(255,255,255,.11);
        border-color: rgba(255,255,255,.23)
    }

    .footer-proof-item > .material-symbols-rounded {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        border-radius: 13px;
        color: #f4d68c;
        background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
        font-size: 21px
    }

    .footer-proof-item strong {
        display: block;
        color: #fff;
        font-size: 12.5px;
        font-weight: 900
    }

    .footer-proof-item span {
        display: block;
        color: rgba(255,255,255,.52);
        font-size: 10.5px;
        line-height: 1.5
    }

.footer-v2 .footer-top {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
    gap: 22px;
    margin-bottom: 58px
}

.footer-v2 .footer-map {
    min-height: 390px;
    border-radius: 28px 28px 28px 12px;
    border-color: var(--ft-line);
    box-shadow: 0 24px 70px rgba(0,0,0,.32)
}

    .footer-v2 .footer-map iframe {
        min-height: 390px;
        filter: grayscale(.2) saturate(.75) contrast(1.06) brightness(.86)
    }

.footer-v2 .map-pin-card {
    right: 18px;
    left: 18px;
    bottom: 18px;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 18px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 18px 44px rgba(7,23,49,.28)
}

    .footer-v2 .map-pin-card > .material-symbols-rounded {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg,var(--hy-blue),var(--hy-magenta));
        font-size: 22px
    }

    .footer-v2 .map-pin-card a {
        border-radius: 12px;
        padding: 10px 14px;
        transform: none !important
    }

        .footer-v2 .map-pin-card a:hover {
            transform: none !important
        }

.footer-v2 .visit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 27px;
    border: 1px solid var(--ft-line);
    border-radius: 28px 28px 12px 28px;
    background: linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
    overflow: hidden;
}

    .footer-v2 .visit-card::before {
        width: 190px;
        height: 190px;
        left: -80px;
        right: auto;
        top: auto;
        bottom: -90px;
        border-radius: 50%;
        background: rgba(160,48,128,.14);
        filter: blur(20px)
    }

.footer-mini-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d8b9ea;
    font-size: 11.5px;
    font-weight: 900
}

    .footer-mini-label::before {
        content: "";
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg,var(--hy-blue-2),var(--hy-magenta))
    }

.footer-v2 .visit-card h3 {
    margin: 8px 0 17px;
    color: #fff;
    font-size: clamp(22px,2.4vw,29px);
    line-height: 1.45;
    font-weight: 900
}

.footer-contact-list {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1
}

.footer-contact-link {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    transition: background .35s,border-color .35s,border-radius .35s
}

    .footer-contact-link:hover {
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.17);
        border-radius: 22px 10px 22px 10px
    }

    .footer-contact-link > .material-symbols-rounded:first-child {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        color: #f3d58a;
        background: rgba(255,255,255,.08);
        font-size: 20px
    }

    .footer-contact-link strong {
        display: block;
        color: #fff;
        font-size: 12.5px
    }

    .footer-contact-link small {
        display: block;
        margin-top: 2px;
        color: rgba(255,255,255,.53);
        font-size: 10.5px;
        direction: ltr;
        text-align: right;
        overflow-wrap: anywhere
    }

    .footer-contact-link > .material-symbols-rounded:last-child {
        color: rgba(255,255,255,.34);
        font-size: 17px
    }

.footer-hours {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px
}

    .footer-hours span {
        color: rgba(255,255,255,.56);
        font-size: 11.5px
    }

    .footer-hours strong {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #d9fbe4;
        font-size: 11.5px
    }

        .footer-hours strong::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #4ade80
        }

.footer-v2 .footer-grid {
    display: grid;
    grid-template-columns: 1.45fr .75fr .9fr 1.3fr;
    gap: clamp(24px,3vw,42px);
    padding: 38px 0 18px;
    border-top: 1px solid var(--ft-line)
}

.footer-brand-card {
    padding-inline-end: 18px
}

.footer-v2 .brand {
    width: max-content;
    margin-bottom: 17px;
    gap: 12px
}

.footer-v2 .brand-logo {
    width: 52px;
    height: 52px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 17px 17px 17px 6px;
    background: rgba(255,255,255,.08);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.24))
}

.footer-v2 .brand span {
    font-size: 20px
}

.footer-v2 .footer-brand-card p {
    max-width: 360px;
    margin: 0 !important;
    color: var(--ft-muted) !important;
    font-size: 13.5px !important;
    line-height: 2 !important
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px
}

    .footer-badges span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 9px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 999px;
        color: rgba(255,255,255,.67);
        background: rgba(255,255,255,.045);
        font-size: 10.5px;
        font-weight: 800
    }

    .footer-badges .material-symbols-rounded {
        color: #f3d58a;
        font-size: 14px
    }

.footer-v2 h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 18px;
    color: #fff;
    font-size: 14.5px;
    font-weight: 900
}

    .footer-v2 h4::before {
        content: "";
        width: 6px;
        height: 20px;
        border-radius: 5px;
        background: linear-gradient(var(--hy-blue-2),var(--hy-magenta))
    }

.footer-v2 .footer-links {
    display: grid;
    gap: 7px
}

    .footer-v2 .footer-links li {
        margin: 0
    }

    .footer-v2 .footer-links a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        color: rgba(255,255,255,.58);
        font-size: 12.5px;
        font-weight: 700;
        transition: color .3s
    }

        .footer-v2 .footer-links a::before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(216,185,234,.5);
            transition: background .3s
        }

        .footer-v2 .footer-links a:hover {
            color: #fff
        }

            .footer-v2 .footer-links a:hover::before {
                background: #f3d58a
            }

.footer-contact-column .footer-contact {
    display: grid;
    gap: 9px
}

    .footer-contact-column .footer-contact li {
        margin: 0;
        align-items: flex-start;
        font-size: 12px;
        line-height: 1.75
    }

    .footer-contact-column .footer-contact .material-symbols-rounded {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        border-radius: 9px;
        background: rgba(255,255,255,.07);
        font-size: 16px
    }

.footer-newsletter-card {
    padding: 21px;
    border: 1px solid var(--ft-line);
    border-radius: 22px 22px 9px 22px;
    background: rgba(255,255,255,.055)
}

.footer-v2 .footer-newsletter-card p {
    margin: 0 !important;
    color: rgba(255,255,255,.56) !important;
    font-size: 12px !important;
    line-height: 1.8 !important
}

.footer-v2 .newsletter {
    margin-top: 14px;
    border-radius: 14px;
    border-color: rgba(255,255,255,.13);
    background: rgba(0,0,0,.12)
}

    .footer-v2 .newsletter input {
        min-height: 44px;
        font-size: 12px
    }

    .footer-v2 .newsletter button {
        min-width: 46px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        transform: none !important;
        background: linear-gradient(135deg,var(--hy-blue),var(--hy-violet),var(--hy-magenta))
    }

        .footer-v2 .newsletter button:hover {
            transform: none !important
        }

        .footer-v2 .newsletter button .material-symbols-rounded {
            font-size: 19px
        }

.footer-social-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px
}

    .footer-social-label > span {
        color: rgba(255,255,255,.47);
        font-size: 10.5px
    }

.footer-v2 .f-social {
    margin: 0
}

    .footer-v2 .f-social a {
        width: 35px;
        height: 35px;
        border: 1px solid rgba(255,255,255,.1);
        background: rgba(255,255,255,.055);
        transform: none !important
    }

        .footer-v2 .f-social a:hover {
            color: #fff;
            background: linear-gradient(135deg,var(--hy-blue),var(--hy-magenta));
            transform: none !important
        }

.footer-v2 .copy {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
    padding: 20px 0 0;
    border-top: 1px solid var(--ft-line);
    text-align: initial;
    color: rgba(255,255,255,.43);
    font-size: 11.5px
}

.footer-bottom-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255,255,255,.55)
}

    .footer-bottom-center .material-symbols-rounded {
        color: #e27ab7;
        font-size: 16px;
        font-variation-settings: "FILL" 1,"wght" 500,"GRAD" 0,"opsz" 18
    }

.footer-legal {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap
}

    .footer-legal a {
        color: rgba(255,255,255,.46);
        transition: color .3s
    }

        .footer-legal a:hover {
            color: #fff
        }

@media(max-width:1050px) {
    .footer-cta {
        grid-template-columns: auto 1fr
    }

    .footer-cta-actions {
        grid-column: 1/-1;
        justify-content: flex-start;
        padding-inline-start: 100px
    }

    .footer-proof {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .footer-v2 .footer-top {
        grid-template-columns: 1fr 1fr
    }

    .footer-v2 .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr
    }

    .footer-newsletter-card {
        grid-column: 1/-1
    }
}

@media(max-width:760px) {
    .footer-v2 {
        padding-top: 62px
    }

    .footer-cta {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 27px 20px
    }

    .footer-cta-icon {
        margin: auto
    }

    .footer-status {
        margin-inline: auto
    }

    .footer-cta-actions {
        grid-column: auto;
        padding: 0;
        justify-content: center
    }

    .footer-action {
        flex: 1;
        min-width: 150px
    }

    .footer-v2 .footer-top {
        grid-template-columns: 1fr;
        margin-bottom: 44px
    }

    .footer-v2 .footer-map, .footer-v2 .footer-map iframe {
        min-height: 350px
    }

    .footer-v2 .visit-card {
        min-height: 420px
    }

    .footer-v2 .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .footer-brand-card, .footer-newsletter-card {
        grid-column: 1/-1
    }

    .footer-v2 .copy {
        grid-template-columns: 1fr;
        text-align: center
    }

    .footer-legal {
        justify-content: center
    }
}

@media(max-width:520px) {
    .footer-v2 {
        padding-top: 48px
    }

    .footer-cta {
        gap: 17px
    }

    .footer-cta-icon {
        width: 66px;
        height: 66px
    }

    .footer-cta h2 {
        font-size: 25px
    }

    .footer-cta p {
        font-size: 13.5px !important
    }

    .footer-cta-actions {
        display: grid;
        width: 100%
    }

    .footer-action {
        width: 100%;
        min-width: 0
    }

    .footer-proof {
        grid-template-columns: 1fr
    }

    .footer-v2 .footer-map, .footer-v2 .footer-map iframe {
        min-height: 390px
    }

    .footer-v2 .map-pin-card {
        right: 10px;
        left: 10px;
        bottom: 10px;
        display: grid;
        grid-template-columns: 44px 1fr
    }

        .footer-v2 .map-pin-card a {
            grid-column: 1/-1;
            width: 100%;
            justify-content: center
        }

    .footer-v2 .visit-card {
        padding: 22px 17px
    }

    .footer-contact-link {
        grid-template-columns: 42px minmax(0,1fr) 18px
    }

    .footer-v2 .footer-grid {
        grid-template-columns: 1fr;
        padding-top: 30px
    }

    .footer-brand-card, .footer-newsletter-card {
        grid-column: auto
    }

    .footer-newsletter-card {
        padding: 18px
    }

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

    .footer-v2 .copy {
        margin-top: 28px
    }

    .footer-legal {
        gap: 10px
    }
}

@media(prefers-reduced-motion:reduce) {
    .footer-v2::before, .footer-ambient span, .footer-cta::after, .footer-status i {
        animation: none !important
    }
}


/* Isolated polish: footer CTA buttons + map only */
.footer-v2 .footer-cta .footer-action {
    position: relative;
    border-radius: 15px;
    background: linear-gradient(120deg,#0b497d,#1f5fbf) left center/0 100% no-repeat, linear-gradient(240deg,#8f1a6b,#5b267f) right center/0 100% no-repeat, linear-gradient(#fff,#fff) center/100% 100% no-repeat;
    box-shadow: 0 10px 25px rgba(7,23,49,.08),inset 0 0 0 0 rgba(255,255,255,0);
    transition: background-size .58s var(--hy-ease),color .3s ease,border-color .3s ease,box-shadow .35s ease !important;
    transform: none !important;
}

    .footer-v2 .footer-cta .footer-action.primary {
        color: #fff;
        border-color: rgba(255,255,255,.12);
        background: linear-gradient(120deg,#063b70,#147e9c) left center/0 100% no-repeat, linear-gradient(240deg,#a91f73,#55227d) right center/0 100% no-repeat, linear-gradient(135deg,var(--hy-blue),var(--hy-violet),var(--hy-magenta)) center/100% 100% no-repeat;
    }

    .footer-v2 .footer-cta .footer-action::before {
        content: none
    }

    .footer-v2 .footer-cta .footer-action > .material-symbols-rounded {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        border-radius: 9px;
        color: var(--hy-blue);
        background: rgba(64,112,176,.09);
        font-size: 18px;
        transition: color .3s ease,background .3s ease,box-shadow .35s ease;
    }

    .footer-v2 .footer-cta .footer-action.primary > .material-symbols-rounded {
        color: #fff;
        background: rgba(255,255,255,.14)
    }

    .footer-v2 .footer-cta .footer-action:hover {
        color: #fff;
        border-color: rgba(255,255,255,.28);
        border-radius: 15px;
        background-size: 51% 100%,51% 100%,100% 100%;
        box-shadow: 0 16px 34px rgba(51,40,117,.28),0 0 0 4px rgba(103,102,196,.09),inset 0 1px rgba(255,255,255,.24);
        transform: none !important;
    }

        .footer-v2 .footer-cta .footer-action:hover > .material-symbols-rounded {
            color: #fff;
            background: rgba(255,255,255,.16);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.2),0 5px 14px rgba(7,23,49,.18);
            transform: none !important;
        }

    .footer-v2 .footer-cta .footer-action:focus-visible {
        outline: 3px solid rgba(104,183,255,.55);
        outline-offset: 4px;
    }

.footer-v2 .footer-map {
    min-height: 420px;
    border: 1px solid rgba(255,255,255,.19);
    border-radius: 32px 32px 32px 13px;
    isolation: isolate;
    background: #0a1831;
    box-shadow: 0 32px 82px rgba(0,0,0,.38),0 0 0 6px rgba(255,255,255,.025),inset 0 1px rgba(255,255,255,.16);
}

    .footer-v2 .footer-map::before {
        z-index: 2;
        background: linear-gradient(180deg,rgba(4,15,34,.72),rgba(4,15,34,.04) 38%,rgba(4,15,34,.06) 57%,rgba(4,15,34,.72)), linear-gradient(90deg,rgba(14,47,88,.18),transparent 45%,rgba(101,28,94,.12));
    }

    .footer-v2 .footer-map::after {
        content: "";
        position: absolute;
        z-index: 3;
        inset: 11px;
        pointer-events: none;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 23px 23px 23px 8px;
        box-shadow: inset 0 0 32px rgba(7,23,49,.08);
    }

    .footer-v2 .footer-map iframe {
        min-height: 420px;
        transform: scale(1.015);
        transform-origin: center;
        filter: grayscale(.15) saturate(.78) contrast(1.1) brightness(.8);
        transition: filter .75s ease,transform 1s var(--hy-ease);
    }

    .footer-v2 .footer-map:hover iframe {
        transform: scale(1.035);
        filter: grayscale(0) saturate(1.02) contrast(1.06) brightness(.9)
    }

.footer-v2 .map-topbar {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 18px;
    left: 18px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 11px 9px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(120deg,rgba(7,23,49,.88),rgba(26,31,68,.78));
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 14px 32px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.12);
}

.footer-v2 .map-location-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .01em
}

    .footer-v2 .map-location-label > .material-symbols-rounded {
        color: #f3d58a;
        font-size: 19px
    }

.footer-v2 .map-live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74,222,128,.38);
    animation: mapLivePulse 2s ease-out infinite
}

.footer-v2 .map-coordinates {
    direction: ltr;
    white-space: nowrap;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    color: rgba(255,255,255,.62);
    background: rgba(255,255,255,.06);
    font: 700 9.5px/1.2 system-ui,sans-serif;
    letter-spacing: .04em
}

.footer-v2 .map-focus-marker {
    position: absolute;
    z-index: 4;
    top: 48%;
    left: 50%;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 18px 18px 18px 5px;
    color: #fff;
    background: linear-gradient(145deg,var(--hy-blue),var(--hy-violet),var(--hy-magenta));
    box-shadow: 0 18px 35px rgba(7,23,49,.34),0 0 0 8px rgba(255,255,255,.13);
    transform: translate(-50%,-50%) rotate(-4deg);
}

    .footer-v2 .map-focus-marker::before {
        content: "";
        position: absolute;
        inset: -9px;
        border: 1px solid rgba(255,255,255,.38);
        border-radius: 23px 23px 23px 8px;
        animation: mapMarkerRing 2.4s ease-out infinite
    }

    .footer-v2 .map-focus-marker > .material-symbols-rounded {
        font-size: 25px;
        font-variation-settings: "FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24
    }

.footer-v2 .map-pin-card {
    z-index: 5;
    right: 18px;
    left: 18px;
    bottom: 18px;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 19px 19px 19px 8px;
    background: linear-gradient(120deg,rgba(255,255,255,.97),rgba(245,247,255,.92));
    backdrop-filter: blur(16px) saturate(1.15);
    box-shadow: 0 20px 46px rgba(7,23,49,.34),inset 0 1px rgba(255,255,255,.95);
}

    .footer-v2 .map-pin-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 22px;
        left: 22px;
        height: 2px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg,transparent,var(--hy-blue),var(--hy-magenta),transparent)
    }

    .footer-v2 .map-pin-card > .material-symbols-rounded {
        width: 48px;
        height: 48px;
        border-radius: 15px 15px 15px 6px;
        box-shadow: 0 10px 24px rgba(85,48,141,.22)
    }

    .footer-v2 .map-pin-card strong {
        color: #0b1d3d;
        font-size: 14px
    }

    .footer-v2 .map-pin-card .mp-text > span {
        display: block;
        margin-top: 2px;
        color: #6f7890;
        font-size: 11.5px
    }

    .footer-v2 .map-pin-card a {
        min-height: 40px;
        padding: 9px 14px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(135deg,var(--hy-blue),var(--hy-violet),var(--hy-magenta));
        box-shadow: 0 9px 20px rgba(82,51,139,.2);
        transform: none !important
    }

        .footer-v2 .map-pin-card a:hover {
            box-shadow: 0 12px 25px rgba(82,51,139,.3),0 0 0 3px rgba(104,183,255,.12);
            transform: none !important
        }

@keyframes mapLivePulse {
    70% {
        box-shadow: 0 0 0 9px rgba(74,222,128,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74,222,128,0)
    }
}

@keyframes mapMarkerRing {
    0% {
        opacity: .8;
        transform: scale(.78)
    }

    75%,100% {
        opacity: 0;
        transform: scale(1.35)
    }
}

@media(max-width:760px) {
    .footer-v2 .footer-map, .footer-v2 .footer-map iframe {
        min-height: 390px
    }

    .footer-v2 .map-topbar {
        top: 13px;
        right: 13px;
        left: 13px
    }
}

@media(max-width:520px) {
    .footer-v2 .footer-map, .footer-v2 .footer-map iframe {
        min-height: 430px
    }

    .footer-v2 .map-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding: 10px 12px
    }

    .footer-v2 .map-coordinates {
        margin-inline-start: 24px
    }

    .footer-v2 .map-focus-marker {
        top: 47%;
        width: 48px;
        height: 48px;
        border-radius: 16px 16px 16px 5px
    }

    .footer-v2 .map-pin-card {
        right: 10px;
        left: 10px;
        bottom: 10px;
        grid-template-columns: 44px minmax(0,1fr);
        padding: 12px;
        gap: 10px
    }

        .footer-v2 .map-pin-card > .material-symbols-rounded {
            width: 44px;
            height: 44px
        }

        .footer-v2 .map-pin-card a {
            grid-column: 1/-1;
            width: 100%;
            justify-content: center
        }
}

@media(prefers-reduced-motion:reduce) {
    .footer-v2 .map-live-dot, .footer-v2 .map-focus-marker::before {
        animation: none !important
    }

    .footer-v2 .footer-map iframe {
        transition: none !important
    }
}



/* Always-alive icon motion: the controls stay fixed while their inner light moves. */
.hybrid-menu-toggle {
    overflow: visible !important;
    background-size: 220% 220% !important;
    transform: none !important;
    animation: toggleButtonAura 4.6s ease-in-out infinite !important
}

    .hybrid-menu-toggle::before {
        inset: -6px !important;
        border: 1px dashed rgba(112,48,144,.48) !important;
        border-radius: 18px !important;
        animation: toggleOrbitRing 9s linear infinite !important
    }

    .hybrid-menu-toggle::after {
        inset: -2px !important;
        border-radius: 15px !important;
        background: conic-gradient(from 0deg,transparent,rgba(243,213,138,.72),transparent 22%,rgba(160,48,128,.5),transparent 55%) !important;
        opacity: .65 !important;
        filter: blur(1px);
        animation: toggleOrbitRing 5.5s linear infinite reverse !important
    }

    .hybrid-menu-toggle .material-symbols-rounded {
        position: relative;
        z-index: 3;
        display: inline-grid;
        place-items: center;
        transform-origin: center;
        animation: toggleGlyphAlive 3.2s ease-in-out infinite !important
    }

    .hybrid-menu-toggle:hover, .hybrid-menu-toggle:focus-visible {
        transform: none !important;
        box-shadow: 0 15px 36px rgba(82,49,143,.31),0 0 0 5px rgba(112,48,144,.09) !important
    }

        .hybrid-menu-toggle:hover .material-symbols-rounded {
            animation-duration: 1.2s !important
        }

.footer-v2 .footer-ambient > span {
    display: grid;
    place-items: center;
    overflow: visible
}

    .footer-v2 .footer-ambient > span > i {
        display: grid;
        width: 52px;
        height: 52px;
        place-items: center;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 17px;
        background: rgba(255,255,255,.04);
        color: rgba(255,255,255,.16);
        font-size: 25px;
        font-style: normal;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        animation: footerAmbientIcon 6.5s ease-in-out infinite
    }

    .footer-v2 .footer-ambient > span:nth-child(2) > i {
        animation-delay: -2.15s
    }

    .footer-v2 .footer-ambient > span:nth-child(3) > i {
        animation-delay: -4.3s
    }

.footer-v2 .footer-cta-icon .material-symbols-rounded {
    animation: footerIconHero 3.4s ease-in-out infinite !important
}

.footer-v2 .footer-action > .material-symbols-rounded {
    transform-origin: center;
    animation: footerIconNudge 2.9s ease-in-out infinite !important
}

.footer-v2 .footer-action:nth-child(2) > .material-symbols-rounded {
    animation-delay: -1.45s !important
}

.footer-v2 .footer-proof-item > .material-symbols-rounded {
    transform-origin: center;
    animation: footerIconTile 3.8s ease-in-out infinite !important
}

.footer-v2 .footer-proof-item:nth-child(2) > .material-symbols-rounded {
    animation-delay: -.9s !important
}

.footer-v2 .footer-proof-item:nth-child(3) > .material-symbols-rounded {
    animation-delay: -1.8s !important
}

.footer-v2 .footer-proof-item:nth-child(4) > .material-symbols-rounded {
    animation-delay: -2.7s !important
}

.footer-v2 .map-location-label > .material-symbols-rounded {
    animation: footerIconNudge 3s ease-in-out infinite !important
}

.footer-v2 .map-focus-marker > .material-symbols-rounded {
    animation: footerMapSchool 3.3s ease-in-out infinite !important
}

.footer-v2 .map-pin-card > .material-symbols-rounded {
    animation: footerMapPin 2.7s ease-in-out infinite !important
}

.footer-v2 .map-pin-card a > .material-symbols-rounded {
    animation: footerArrowAlive 2.5s ease-in-out infinite !important
}

.footer-v2 .footer-contact-link > .material-symbols-rounded:first-child {
    transform-origin: center;
    animation: footerIconTile 3.5s ease-in-out infinite !important
}

.footer-v2 .footer-contact-link:nth-child(2) > .material-symbols-rounded:first-child {
    animation-delay: -1.15s !important
}

.footer-v2 .footer-contact-link:nth-child(3) > .material-symbols-rounded:first-child {
    animation-delay: -2.3s !important
}

.footer-v2 .footer-contact-link > .material-symbols-rounded:last-child {
    animation: footerArrowAlive 2.7s ease-in-out infinite !important
}

.footer-v2 .footer-badges .material-symbols-rounded {
    animation: footerBadgeAlive 3.1s ease-in-out infinite !important
}

.footer-v2 .footer-badges > span:nth-child(2) .material-symbols-rounded {
    animation-delay: -1.55s !important
}

.footer-v2 .f-social a .material-symbols-rounded {
    transform-origin: center;
    animation: footerSocialAlive 3.6s ease-in-out infinite !important
}

.footer-v2 .f-social a:nth-child(2) .material-symbols-rounded {
    animation-delay: -.9s !important
}

.footer-v2 .f-social a:nth-child(3) .material-symbols-rounded {
    animation-delay: -1.8s !important
}

.footer-v2 .f-social a:nth-child(4) .material-symbols-rounded {
    animation-delay: -2.7s !important
}

.footer-v2 .footer-contact-column .footer-contact .material-symbols-rounded {
    animation: footerContactAlive 3.4s ease-in-out infinite !important
}

.footer-v2 .footer-contact-column .footer-contact li:nth-child(2) .material-symbols-rounded {
    animation-delay: -.85s !important
}

.footer-v2 .footer-contact-column .footer-contact li:nth-child(3) .material-symbols-rounded {
    animation-delay: -1.7s !important
}

.footer-v2 .footer-contact-column .footer-contact li:nth-child(4) .material-symbols-rounded {
    animation-delay: -2.55s !important
}

.footer-v2 .newsletter button .material-symbols-rounded {
    animation: footerSendAlive 2.8s ease-in-out infinite !important
}

.footer-v2 .footer-bottom-center .material-symbols-rounded {
    animation: footerHeartAlive 2.2s ease-in-out infinite !important
}

@keyframes toggleButtonAura {
    0%,100% {
        background-position: 0% 50%;
        box-shadow: 0 12px 28px rgba(75,53,143,.23),0 0 0 0 rgba(112,48,144,0)
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0 15px 34px rgba(75,53,143,.29),0 0 0 6px rgba(112,48,144,.08)
    }
}

@keyframes toggleOrbitRing {
    to {
        transform: rotate(360deg)
    }
}

@keyframes toggleGlyphAlive {
    0%,100% {
        transform: translateY(0) rotate(0) scale(1);
        color: #fff;
        filter: drop-shadow(0 0 0 rgba(243,213,138,0))
    }

    50% {
        transform: translateY(-2px) rotate(8deg) scale(1.08);
        color: #fff0bd;
        filter: drop-shadow(0 0 9px rgba(243,213,138,.65))
    }
}

@keyframes footerAmbientIcon {
    0%,100% {
        transform: translateY(0) rotate(-5deg) scale(.96);
        color: rgba(255,255,255,.14);
        filter: drop-shadow(0 0 0 rgba(243,213,138,0))
    }

    50% {
        transform: translateY(-17px) rotate(8deg) scale(1.07);
        color: rgba(243,213,138,.31);
        filter: drop-shadow(0 0 13px rgba(243,213,138,.22))
    }
}

@keyframes footerIconHero {
    0%,100% {
        transform: translateY(0) rotate(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(243,213,138,0))
    }

    50% {
        transform: translateY(-5px) rotate(9deg) scale(1.12);
        filter: drop-shadow(0 0 12px rgba(243,213,138,.72))
    }
}

@keyframes footerIconNudge {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-3px) rotate(7deg)
    }
}

@keyframes footerIconTile {
    0%,100% {
        transform: translateY(0) rotate(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(243,213,138,0))
    }

    50% {
        transform: translateY(-4px) rotate(6deg) scale(1.09);
        filter: drop-shadow(0 0 9px rgba(243,213,138,.48))
    }
}

@keyframes footerMapSchool {
    0%,100% {
        transform: rotate(0) scale(1)
    }

    50% {
        transform: rotate(-8deg) scale(1.13);
        filter: drop-shadow(0 0 8px rgba(255,255,255,.55))
    }
}

@keyframes footerMapPin {
    0%,100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(160,48,128,0))
    }

    50% {
        transform: translateY(-6px) scale(1.08);
        filter: drop-shadow(0 8px 9px rgba(160,48,128,.38))
    }
}

@keyframes footerArrowAlive {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-4px)
    }
}

@keyframes footerBadgeAlive {
    0%,100% {
        transform: scale(1);
        color: var(--gold2)
    }

    50% {
        transform: scale(1.12);
        color: #fff0bd;
        filter: drop-shadow(0 0 8px rgba(243,213,138,.45))
    }
}

@keyframes footerSocialAlive {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-4px) rotate(8deg);
        filter: drop-shadow(0 0 7px rgba(243,213,138,.42))
    }
}

@keyframes footerContactAlive {
    0%,100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-3px) scale(1.08);
        filter: drop-shadow(0 0 7px rgba(243,213,138,.4))
    }
}

@keyframes footerSendAlive {
    0%,100% {
        transform: translate(0,0) rotate(0)
    }

    50% {
        transform: translate(-3px,-3px) rotate(-8deg);
        filter: drop-shadow(0 0 7px rgba(255,255,255,.55))
    }
}

@keyframes footerHeartAlive {
    0%,100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(239,134,184,0))
    }

    45% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 9px rgba(239,134,184,.7))
    }

    60% {
        transform: scale(1.08)
    }
}

@media(prefers-reduced-motion:reduce) {
    .hybrid-menu-toggle, .hybrid-menu-toggle::before, .hybrid-menu-toggle::after, .hybrid-menu-toggle .material-symbols-rounded, .footer-v2 .footer-ambient > span > i, .footer-v2 .footer-cta-icon .material-symbols-rounded, .footer-v2 .footer-action > .material-symbols-rounded, .footer-v2 .footer-proof-item > .material-symbols-rounded, .footer-v2 .map-location-label > .material-symbols-rounded, .footer-v2 .map-focus-marker > .material-symbols-rounded, .footer-v2 .map-pin-card .material-symbols-rounded, .footer-v2 .footer-contact-link > .material-symbols-rounded, .footer-v2 .footer-badges .material-symbols-rounded, .footer-v2 .f-social a .material-symbols-rounded, .footer-v2 .footer-contact-column .footer-contact .material-symbols-rounded, .footer-v2 .newsletter button .material-symbols-rounded, .footer-v2 .footer-bottom-center .material-symbols-rounded {
        animation: none !important
    }
}




/* Screenshot-matched footer identity card. */
.generation-12-shell .footer-v2 .footer-brand-card {
    display: flex;
    min-height: 365px;
    height: 100%;
    padding: 26px 24px;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    background: linear-gradient(145deg,rgba(55,69,131,.38),rgba(79,43,112,.35));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 20px 50px rgba(3,11,31,.13);
    text-align: right
}

    .generation-12-shell .footer-v2 .footer-brand-card .brand {
        display: flex;
        width: 100%;
        margin: 0;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        color: #fff !important
    }

    .generation-12-shell .footer-v2 .footer-brand-card .brand-logo {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
        padding: 7px;
        border: 0;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(3,11,31,.2);
        object-fit: contain;
        animation: brandLogoQuietPulse 4.5s ease-in-out infinite
    }

    .generation-12-shell .footer-v2 .footer-brand-card .brand > span {
        color: #fff;
        font-size: 22px;
        font-weight: 950;
        line-height: 1.35;
        letter-spacing: -.4px;
        white-space: nowrap
    }

    .generation-12-shell .footer-v2 .footer-brand-card > p {
        margin: 25px 0 17px;
        color: rgba(255,255,255,.7);
        font-size: 13.5px;
        font-weight: 650;
        line-height: 2.15;
        text-align: right
    }

    .generation-12-shell .footer-v2 .footer-brand-card .footer-badges {
        display: flex;
        margin: 0 0 18px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: nowrap
    }

        .generation-12-shell .footer-v2 .footer-brand-card .footer-badges > span {
            display: inline-flex;
            min-height: 34px;
            padding: 0 11px;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 999px;
            background: rgba(255,255,255,.055);
            color: rgba(255,255,255,.76);
            font-size: 9px;
            font-weight: 900;
            white-space: nowrap
        }

        .generation-12-shell .footer-v2 .footer-brand-card .footer-badges .material-symbols-rounded {
            color: var(--gold2);
            font-size: 15px
        }

    .generation-12-shell .footer-v2 .footer-brand-card > .f-social {
        display: flex;
        margin-top: 0;
        align-items: center;
        justify-content: center;
        gap: 8px
    }

        .generation-12-shell .footer-v2 .footer-brand-card > .f-social a {
            display: grid;
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 12px;
            background: rgba(255,255,255,.065);
            color: #fff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 9px 20px rgba(2,10,28,.1);
            transform: none !important;
            transition: background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease !important
        }

            .generation-12-shell .footer-v2 .footer-brand-card > .f-social a:hover {
                border-color: rgba(243,213,138,.32);
                background: rgba(255,255,255,.13);
                color: var(--gold2);
                box-shadow: 0 12px 27px rgba(2,10,28,.2);
                transform: none !important
            }

        .generation-12-shell .footer-v2 .footer-brand-card > .f-social .material-symbols-rounded {
            font-size: 20px
        }

/* Clean, stable and more elegant mobile toggle. */
.hybrid-menu-toggle {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.32) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg,#345f9d 0%,#69368b 55%,#932f79 100%) !important;
    background-size: 170% 170% !important;
    color: #fff !important;
    box-shadow: 0 13px 30px rgba(47,39,112,.24),inset 0 1px 0 rgba(255,255,255,.25) !important;
    transform: none !important;
    animation: toggleCleanAura 5s ease-in-out infinite !important;
    transition: filter .3s ease,box-shadow .3s ease,border-color .3s ease !important
}

    .hybrid-menu-toggle::before {
        content: "" !important;
        position: absolute !important;
        z-index: 1 !important;
        top: -40% !important;
        right: -70% !important;
        bottom: auto !important;
        left: auto !important;
        width: 42% !important;
        height: 180% !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent) !important;
        opacity: .7 !important;
        filter: none !important;
        transform: rotate(22deg) !important;
        animation: toggleCleanSheen 4.4s ease-in-out infinite !important
    }

    .hybrid-menu-toggle::after {
        content: "" !important;
        position: absolute !important;
        z-index: 4 !important;
        top: 7px !important;
        right: 7px !important;
        bottom: auto !important;
        left: auto !important;
        width: 6px !important;
        height: 6px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #f3d58a !important;
        box-shadow: 0 0 0 0 rgba(243,213,138,.5),0 0 9px rgba(243,213,138,.55) !important;
        opacity: 1 !important;
        filter: none !important;
        animation: toggleCleanDot 2.4s ease-out infinite !important
    }

    .hybrid-menu-toggle .toggle-glyph {
        position: relative;
        z-index: 3;
        display: grid;
        width: 22px;
        margin: auto;
        gap: 4px;
        place-items: center
    }

        .hybrid-menu-toggle .toggle-glyph > i {
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 99px;
            background: linear-gradient(90deg,#fff,#f7e8b9);
            box-shadow: 0 1px 5px rgba(2,12,31,.2);
            transform-origin: center;
            animation: toggleLineBreath 3s ease-in-out infinite;
            transition: transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease,width .3s ease
        }

            .hybrid-menu-toggle .toggle-glyph > i:nth-child(2) {
                width: 16px;
                animation-delay: -1s
            }

            .hybrid-menu-toggle .toggle-glyph > i:nth-child(3) {
                width: 19px;
                animation-delay: -2s
            }

    .hybrid-menu-toggle:hover, .hybrid-menu-toggle:focus-visible {
        border-color: rgba(243,213,138,.52) !important;
        filter: saturate(1.08) brightness(1.04);
        box-shadow: 0 16px 35px rgba(47,39,112,.3),0 0 0 4px rgba(112,48,144,.08),inset 0 1px 0 rgba(255,255,255,.3) !important;
        transform: none !important
    }

.hybrid-menu-open .hybrid-menu-toggle .toggle-glyph > i {
    animation: none
}

    .hybrid-menu-open .hybrid-menu-toggle .toggle-glyph > i:nth-child(1) {
        width: 20px;
        transform: translateY(6px) rotate(45deg)
    }

    .hybrid-menu-open .hybrid-menu-toggle .toggle-glyph > i:nth-child(2) {
        opacity: 0;
        transform: scaleX(0)
    }

    .hybrid-menu-open .hybrid-menu-toggle .toggle-glyph > i:nth-child(3) {
        width: 20px;
        transform: translateY(-6px) rotate(-45deg)
    }

@keyframes brandLogoQuietPulse {
    0%,100% {
        filter: drop-shadow(0 0 0 rgba(243,213,138,0))
    }

    50% {
        filter: drop-shadow(0 0 9px rgba(243,213,138,.3))
    }
}

@keyframes toggleCleanAura {
    0%,100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@keyframes toggleCleanSheen {
    0%,58% {
        right: -70%;
        opacity: 0
    }

    72% {
        opacity: .72
    }

    100% {
        right: 125%;
        opacity: 0
    }
}

@keyframes toggleCleanDot {
    0% {
        box-shadow: 0 0 0 0 rgba(243,213,138,.5),0 0 9px rgba(243,213,138,.55)
    }

    70% {
        box-shadow: 0 0 0 7px rgba(243,213,138,0),0 0 9px rgba(243,213,138,.55)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243,213,138,0),0 0 9px rgba(243,213,138,.55)
    }
}

@keyframes toggleLineBreath {
    0%,100% {
        transform: scaleX(1);
        opacity: .92
    }

    50% {
        transform: scaleX(.82);
        opacity: 1
    }
}

@media(max-width:520px) {
    .generation-12-shell .footer-v2 .footer-brand-card {
        min-height: 350px;
        padding: 24px 20px
    }

        .generation-12-shell .footer-v2 .footer-brand-card .brand > span {
            font-size: 21px
        }

        .generation-12-shell .footer-v2 .footer-brand-card > p {
            font-size: 13px
        }

        .generation-12-shell .footer-v2 .footer-brand-card .footer-badges > span {
            padding-inline: 9px;
            font-size: 8.5px
        }
}

@media(prefers-reduced-motion:reduce) {
    .generation-12-shell .footer-v2 .footer-brand-card .brand-logo, .hybrid-menu-toggle, .hybrid-menu-toggle::before, .hybrid-menu-toggle::after, .hybrid-menu-toggle .toggle-glyph > i {
        animation: none !important
    }
}


/* ===== Registration page · Generation 12 ===== */
body.registration-generation-12 {
    --rg-ink: #071731;
    --rg-blue: #4070b0;
    --rg-blue2: #5080c0;
    --rg-violet: #703090;
    --rg-magenta: #a03080;
    --rg-rose: #c03080;
    --rg-paper: #f8faff;
    --rg-line: rgba(64,112,176,.15);
    --rg-ease: cubic-bezier(.2,.75,.2,1);
    background: var(--rg-paper);
    color: var(--rg-ink);
    overflow-x: hidden
}

    body.registration-generation-12 .section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--rg-blue);
        font-weight: 900
    }

        body.registration-generation-12 .section-kicker > .material-symbols-rounded {
            font-size: 20px;
            animation: rgIconBreathe 3s ease-in-out infinite
        }

    /* Hero */
    body.registration-generation-12 .registration-hero-v12, body.registration-generation-12 .registration-hero-v12 .swiper, body.registration-generation-12 .registration-hero-v12 .swiper-slide, body.registration-generation-12 .registration-hero-v12 .hero-slide {
        height: 650px !important;
        min-height: 650px !important
    }

    body.registration-generation-12 .registration-hero-v12 {
        background: #06142c;
        isolation: isolate
    }

        body.registration-generation-12 .registration-hero-v12:before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(circle at 12% 36%,rgba(160,48,128,.24),transparent 29%),linear-gradient(90deg,rgba(6,20,44,.12),rgba(6,20,44,.9) 72%),repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 1px,transparent 1px 78px);
            background-size: auto,auto,156px 100%;
            animation: rgHeroGrid 18s linear infinite
        }

        body.registration-generation-12 .registration-hero-v12 .hero-bg {
            background-image: none !important;
            background: linear-gradient(128deg,#071731 0%,#12376c 58%,#46255f 100%) !important
        }

            body.registration-generation-12 .registration-hero-v12 .hero-bg:after {
                background: radial-gradient(circle at 18% 40%,rgba(160,48,128,.27),transparent 27%),radial-gradient(circle at 75% 18%,rgba(80,128,192,.31),transparent 31%),linear-gradient(110deg,rgba(7,23,49,.7),rgba(7,23,49,.94) 72%)
            }

        body.registration-generation-12 .registration-hero-v12 .hero-slide:before, body.registration-generation-12 .registration-hero-v12 .hero-slide:after {
            display: none
        }

        body.registration-generation-12 .registration-hero-v12 .hero-shape {
            height: 72px;
            background: var(--rg-paper);
            clip-path: ellipse(60% 100% at 50% 100%)
        }

        body.registration-generation-12 .registration-hero-v12 .hero-content {
            max-width: 690px !important;
            padding-top: 92px !important;
            position: relative;
            z-index: 8
        }

        body.registration-generation-12 .registration-hero-v12 .kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 9px 14px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.18);
            background: rgba(255,255,255,.08);
            backdrop-filter: blur(12px)
        }

            body.registration-generation-12 .registration-hero-v12 .kicker .material-symbols-rounded {
                font-size: 20px;
                color: #d8b9ea;
                animation: rgIconBreathe 2.7s ease-in-out infinite
            }

        body.registration-generation-12 .registration-hero-v12 h1 {
            font-size: clamp(44px,5.5vw,78px) !important;
            line-height: 1.13 !important;
            letter-spacing: -2px !important;
            margin: 20px 0 14px !important
        }

            body.registration-generation-12 .registration-hero-v12 h1 span {
                background: linear-gradient(100deg,#fff,#9bc4ff 33%,#d8b9ea 68%,#ffd1ec);
                background-size: 230% auto;
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                animation: rgTextShine 6s linear infinite
            }

        body.registration-generation-12 .registration-hero-v12 p {
            max-width: 630px !important;
            font-size: clamp(15px,1.45vw,19px) !important;
            line-height: 1.95 !important;
            color: rgba(255,255,255,.78);
            margin: 0 !important
        }

.registration-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px
}

    .registration-hero-proof > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 11px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.07);
        color: rgba(255,255,255,.84);
        font-size: 12px;
        font-weight: 800;
        backdrop-filter: blur(11px)
    }

    .registration-hero-proof .material-symbols-rounded {
        font-size: 18px;
        color: #a9caff
    }

.registration-hero-visual {
    position: absolute;
    z-index: 7;
    left: 8%;
    top: 51%;
    width: 330px;
    height: 330px;
    transform: translateY(-47%);
    pointer-events: none
}

.reg-visual-core {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 116px;
    height: 116px;
    transform: translate(-50%,-50%);
    display: grid;
    place-items: center;
    border-radius: 34px;
    color: #fff;
    background: linear-gradient(135deg,var(--rg-blue2),var(--rg-violet) 55%,var(--rg-magenta));
    border: 1px solid rgba(255,255,255,.27);
    box-shadow: 0 34px 78px rgba(3,12,32,.46),inset 0 1px rgba(255,255,255,.24);
    animation: rgCoreFloat 4.5s ease-in-out infinite
}

    .reg-visual-core > .material-symbols-rounded {
        font-size: 53px;
        font-variation-settings: 'FILL' 1
    }

    .reg-visual-core i {
        position: absolute;
        inset: -15px;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 43px;
        animation: rgCoreRing 2.6s ease-out infinite
    }

.reg-orbit {
    position: absolute;
    inset: 23px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 50%;
    animation: rgOrbit 18s linear infinite
}

    .reg-orbit:before, .reg-orbit:after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d8b9ea;
        box-shadow: 0 0 20px #d8b9ea
    }

    .reg-orbit:before {
        top: 11%;
        left: 20%
    }

    .reg-orbit:after {
        right: 4%;
        bottom: 28%;
        background: #8dbbff;
        box-shadow: 0 0 20px #8dbbff
    }

    .reg-orbit.orbit-b {
        inset: 68px;
        border-style: dashed;
        animation-duration: 12s;
        animation-direction: reverse
    }

.reg-satellite {
    position: absolute;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    box-shadow: 0 20px 45px rgba(2,12,31,.34);
    backdrop-filter: blur(12px);
    animation: rgSatellite 4.2s ease-in-out infinite
}

    .reg-satellite .material-symbols-rounded {
        font-size: 27px;
        font-variation-settings: 'FILL' 1
    }

.sat-person {
    top: 4%;
    left: 38%;
    animation-delay: -.6s
}

.sat-form {
    right: 2%;
    top: 43%;
    animation-delay: -1.5s
}

.sat-check {
    bottom: 2%;
    left: 34%;
    animation-delay: -2.4s
}

.sat-school {
    left: 0;
    top: 43%;
    animation-delay: -3.2s
}

/* Four-step journey */
.admission-journey-v12 {
    position: relative;
    padding: 32px 0;
    background: #fff;
    border-bottom: 1px solid var(--rg-line);
    box-shadow: 0 16px 45px rgba(20,49,93,.055);
    overflow: hidden
}

    .admission-journey-v12:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 10% 30%,rgba(160,48,128,.08),transparent 24%),radial-gradient(circle at 90% 60%,rgba(64,112,176,.09),transparent 24%)
    }

.journey-steps {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

    .journey-steps article {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 86px;
        padding: 14px;
        border-radius: 20px;
        background: rgba(248,250,255,.88);
        border: 1px solid var(--rg-line);
        transition: border-color .35s var(--rg-ease),box-shadow .35s var(--rg-ease);
        overflow: hidden
    }

        .journey-steps article:hover {
            transform: none;
            border-color: rgba(112,48,144,.28);
            box-shadow: 0 16px 38px rgba(20,49,93,.1)
        }

.journey-number {
    position: absolute;
    left: 7px;
    top: -5px;
    font-size: 40px;
    font-weight: 900;
    color: rgba(64,112,176,.055)
}

.journey-icon {
    position: relative;
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 15px;
    background: linear-gradient(135deg,#edf3ff,#f8eefa);
    color: var(--rg-violet);
    font-size: 24px;
    font-variation-settings: 'FILL' 1;
    animation: rgIconBreathe 3.2s ease-in-out infinite
}

.journey-steps article:nth-child(2) .journey-icon {
    animation-delay: -.8s
}

.journey-steps article:nth-child(3) .journey-icon {
    animation-delay: -1.6s
}

.journey-steps article:nth-child(4) .journey-icon {
    animation-delay: -2.4s
}

.journey-steps strong, .journey-steps small {
    display: block
}

.journey-steps strong {
    font-size: 14px;
    color: var(--rg-ink)
}

.journey-steps small {
    margin-top: 4px;
    color: #718097;
    font-size: 10.5px;
    font-weight: 700
}

.journey-line {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 8%;
    left: 8%;
    height: 2px;
    background: rgba(64,112,176,.09)
}

    .journey-line i {
        display: block;
        width: 18%;
        height: 100%;
        background: linear-gradient(90deg,transparent,var(--rg-blue),var(--rg-magenta),transparent);
        animation: rgJourneyLine 6s linear infinite
    }

/* Admission information cards */
.admission-page {
    background: transparent !important
}

.admission-intro-v12 {
    position: relative;
    padding: 88px 0 62px !important;
    background: radial-gradient(circle at 7% 18%,rgba(160,48,128,.08),transparent 22%),radial-gradient(circle at 94% 70%,rgba(64,112,176,.1),transparent 26%),linear-gradient(180deg,#f8faff,#fff)
}

    .admission-intro-v12:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .5;
        background-image: linear-gradient(rgba(64,112,176,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(64,112,176,.035) 1px,transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom,transparent,#000 18%,#000 84%,transparent);
        animation: rgGridMove 24s linear infinite
    }

    .admission-intro-v12 > .container {
        position: relative;
        z-index: 2
    }

    .admission-intro-v12 .admission-head {
        max-width: 760px;
        margin-bottom: 38px
    }

        .admission-intro-v12 .admission-head h2 {
            font-size: clamp(33px,4vw,53px);
            line-height: 1.28;
            letter-spacing: -1.4px;
            margin: 12px 0 10px
        }

        .admission-intro-v12 .admission-head p {
            font-size: 15px;
            color: #61718a
        }

    .admission-intro-v12 .admission-quick-grid {
        gap: 22px
    }

.admission-card-v12 {
    min-height: 335px;
    padding: 29px 26px;
    border-radius: 29px;
    background: rgba(255,255,255,.84);
    border: 1px solid var(--rg-line);
    box-shadow: 0 24px 72px rgba(20,49,93,.09);
    backdrop-filter: blur(18px);
    transition: border-color .4s var(--rg-ease),box-shadow .4s var(--rg-ease),background .4s var(--rg-ease);
    transform: none !important;
    isolation: isolate
}

    .admission-card-v12:before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0 auto 0 0;
        width: 4px;
        height: auto;
        background: linear-gradient(180deg,var(--rg-blue),var(--rg-violet),var(--rg-magenta));
        transform: scaleY(0);
        transform-origin: center;
        transition: transform .46s var(--rg-ease)
    }

    .admission-card-v12:after {
        content: attr(data-index);
        position: absolute;
        left: 16px;
        top: 4px;
        font-size: 73px;
        line-height: 1;
        font-weight: 900;
        color: rgba(64,112,176,.055)
    }

    .admission-card-v12:hover {
        transform: none !important;
        border-color: rgba(112,48,144,.3);
        box-shadow: 0 31px 86px rgba(20,49,93,.15);
        background: #fff
    }

        .admission-card-v12:hover:before {
            transform: scaleY(1)
        }

    .admission-card-v12.featured {
        background: linear-gradient(145deg,#0a1c3b,#173f79 60%,#703090 135%);
        border-color: rgba(255,255,255,.12);
        box-shadow: 0 28px 80px rgba(8,29,66,.24)
    }

        .admission-card-v12.featured:after {
            color: rgba(255,255,255,.06)
        }

    .admission-card-v12 .info-icon {
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 21px;
        margin-bottom: 20px;
        background: linear-gradient(135deg,#edf3ff,#f8eefa);
        color: var(--rg-violet);
        font-size: 0;
        box-shadow: 0 15px 34px rgba(64,112,176,.13);
        animation: rgIconBreathe 3.4s ease-in-out infinite
    }

        .admission-card-v12 .info-icon:after {
            content: "";
            position: absolute;
            inset: -7px;
            border: 1px solid rgba(112,48,144,.16);
            border-radius: 27px;
            animation: rgIconRing 3s ease-out infinite
        }

        .admission-card-v12 .info-icon .material-symbols-rounded {
            font-size: 31px;
            font-variation-settings: 'FILL' 1
        }

    .admission-card-v12.featured .info-icon {
        background: rgba(255,255,255,.12);
        color: #fff;
        box-shadow: none
    }

    .admission-card-v12 h3 {
        font-size: 22px
    }

    .admission-card-v12 p, .admission-card-v12 li {
        font-size: 13.5px;
        line-height: 1.95
    }

    .admission-card-v12 ul {
        padding-right: 18px
    }

    .admission-card-v12 .fees-mini span {
        border: 1px solid rgba(255,255,255,.15);
        backdrop-filter: blur(8px)
    }

/* Registration form */
.registration-section-v12 {
    position: relative;
    padding: 72px 0 110px !important;
    background: linear-gradient(180deg,#fff,#f7f9ff) !important;
    overflow: clip
}

    .registration-section-v12:before {
        content: "";
        position: absolute;
        width: 480px;
        height: 480px;
        right: -220px;
        top: 20%;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(64,112,176,.1),transparent 66%);
        animation: rgAmbient 10s ease-in-out infinite
    }

    .registration-section-v12 .registration-head {
        max-width: 760px;
        margin-bottom: 34px
    }

        .registration-section-v12 .registration-head h2 {
            font-size: clamp(32px,4vw,51px);
            letter-spacing: -1.3px
        }

        .registration-section-v12 .registration-head p {
            font-size: 15px
        }

    .registration-section-v12 .form-shell {
        grid-template-columns: minmax(300px,370px) minmax(0,1fr) !important;
        gap: 25px !important
    }

    .registration-section-v12 .form-aside {
        top: 118px !important;
        padding: 30px 26px !important;
        border-radius: 32px !important;
        background: linear-gradient(145deg,#071731,#173d75 58%,#703090 145%) !important;
        border: 1px solid rgba(255,255,255,.13);
        box-shadow: 0 30px 85px rgba(8,29,66,.24) !important
    }

        .registration-section-v12 .form-aside:before {
            inset: 12px;
            border-radius: 24px
        }

        .registration-section-v12 .form-aside:after {
            animation: rgAmbient 8s ease-in-out infinite
        }

        .registration-section-v12 .form-aside .section-kicker {
            color: #bed7ff
        }

        .registration-section-v12 .form-aside h2 {
            font-size: 29px !important;
            margin: 13px 0 8px
        }

        .registration-section-v12 .form-aside > p {
            font-size: 13.5px;
            line-height: 1.9
        }

    .registration-section-v12 .form-progress-list {
        gap: 9px;
        margin-top: 22px
    }

        .registration-section-v12 .form-progress-list > div {
            position: relative;
            min-height: 54px;
            padding: 10px 12px !important;
            border-radius: 16px !important;
            background: rgba(255,255,255,.09) !important;
            border: 1px solid rgba(255,255,255,.12) !important;
            transition: background .35s var(--rg-ease),border-color .35s var(--rg-ease)
        }

            .registration-section-v12 .form-progress-list > div:hover {
                transform: none;
                background: rgba(255,255,255,.15) !important;
                border-color: rgba(255,255,255,.24) !important
            }

.step-badge {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 11px;
    background: linear-gradient(135deg,rgba(80,128,192,.75),rgba(160,48,128,.7));
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    animation: rgIconBreathe 3s ease-in-out infinite
}

.form-progress-list > div:nth-child(2) .step-badge {
    animation-delay: -.7s
}

.form-progress-list > div:nth-child(3) .step-badge {
    animation-delay: -1.4s
}

.form-progress-list > div:nth-child(4) .step-badge {
    animation-delay: -2.1s
}

.registration-section-v12 .admission-help-card {
    padding: 13px;
    border-radius: 17px
}

    .registration-section-v12 .admission-help-card > .material-symbols-rounded {
        font-size: 27px;
        color: #d9c2ee;
        font-variation-settings: 'FILL' 1;
        animation: rgIconBreathe 3s ease-in-out infinite
    }

    .registration-section-v12 .admission-help-card span:not(.material-symbols-rounded) {
        font-size: 11.5px
    }

.registration-section-v12 .admission-form {
    padding: 25px !important;
    border-radius: 34px !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid var(--rg-line) !important;
    box-shadow: 0 30px 95px rgba(20,49,93,.12) !important;
    backdrop-filter: blur(20px)
}

.form-completion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 19px;
    background: linear-gradient(135deg,#f0f5fd,#faf0fa);
    border: 1px solid var(--rg-line)
}

    .form-completion-head > div {
        display: flex;
        align-items: center;
        gap: 11px
    }

        .form-completion-head > div > .material-symbols-rounded {
            width: 43px;
            height: 43px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            background: #fff;
            color: var(--rg-violet);
            font-size: 23px;
            box-shadow: 0 8px 20px rgba(20,49,93,.07)
        }

    .form-completion-head strong, .form-completion-head small {
        display: block
    }

    .form-completion-head strong {
        font-size: 14px
    }

    .form-completion-head small {
        margin-top: 3px;
        color: #708097;
        font-size: 11px
    }

.form-save-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #55708f;
    font-size: 11px;
    font-weight: 800
}

    .form-save-status i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #36b57a;
        box-shadow: 0 0 0 5px rgba(54,181,122,.12);
        animation: rgStatus 1.8s ease-in-out infinite
    }

.registration-section-v12 .admission-form fieldset {
    position: relative;
    margin-bottom: 18px !important;
    padding: 22px !important;
    border-radius: 25px !important;
    background: linear-gradient(180deg,#fff,#f9fbff) !important;
    border: 1px solid var(--rg-line) !important;
    box-shadow: 0 13px 36px rgba(20,49,93,.05) !important;
    transition: border-color .35s var(--rg-ease),box-shadow .35s var(--rg-ease);
    overflow: hidden
}

    .registration-section-v12 .admission-form fieldset:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 110px;
        height: 3px;
        background: linear-gradient(90deg,var(--rg-magenta),var(--rg-blue));
        transform: scaleX(.35);
        transform-origin: right;
        transition: transform .45s var(--rg-ease)
    }

    .registration-section-v12 .admission-form fieldset:hover {
        transform: none;
        border-color: rgba(112,48,144,.23) !important;
        box-shadow: 0 18px 45px rgba(20,49,93,.075) !important
    }

        .registration-section-v12 .admission-form fieldset:hover:after {
            transform: scaleX(1)
        }

.registration-section-v12 .admission-form legend {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto !important;
    margin: 0 0 17px !important;
    padding: 8px 11px !important;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--rg-line);
    box-shadow: 0 8px 20px rgba(20,49,93,.055);
    font-size: 14px !important
}

    .registration-section-v12 .admission-form legend > .material-symbols-rounded {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: linear-gradient(135deg,#edf3ff,#f8eefa);
        color: var(--rg-violet);
        font-size: 19px;
        font-variation-settings: 'FILL' 1;
        animation: rgIconBreathe 3.2s ease-in-out infinite
    }

.registration-section-v12 .form-grid {
    gap: 15px !important
}

.registration-section-v12 .form-group label {
    font-size: 12.5px !important
}

    .registration-section-v12 .form-group label:before {
        width: 6px;
        height: 6px
    }

.registration-section-v12 .form-group input, .registration-section-v12 .form-group select, .registration-section-v12 .form-group textarea {
    min-height: 52px;
    border-radius: 15px !important;
    border: 1px solid rgba(64,112,176,.17) !important;
    background: #fff !important;
    padding: 12px 13px;
    font-size: 13px;
    box-shadow: inset 0 1px 2px rgba(20,49,93,.025)
}

.registration-section-v12 .form-group textarea {
    min-height: 105px
}

    .registration-section-v12 .form-group input:hover, .registration-section-v12 .form-group select:hover, .registration-section-v12 .form-group textarea:hover {
        border-color: rgba(112,48,144,.3) !important
    }

    .registration-section-v12 .form-group input:focus, .registration-section-v12 .form-group select:focus, .registration-section-v12 .form-group textarea:focus {
        transform: none !important;
        border-color: var(--rg-violet) !important;
        box-shadow: 0 0 0 4px rgba(112,48,144,.09) !important
    }

.registration-section-v12 .form-group input[type=file] {
    padding: 10px;
    border-style: dashed !important
}

.registration-section-v12 .agree-line {
    font-size: 12.5px;
    margin-top: 17px
}

.registration-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px
}

    .registration-trust > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        border-radius: 11px;
        background: #f0f4fb;
        color: #5b6f8d;
        font-size: 11px;
        font-weight: 800
    }

    .registration-trust .material-symbols-rounded {
        font-size: 16px;
        color: var(--rg-blue)
    }

.registration-section-v12 .form-actions {
    margin-top: 17px
}

.registration-section-v12 .submit-btn, .registration-section-v12 .secondary-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 15px !important;
    transition: color .35s var(--rg-ease),border-color .35s var(--rg-ease),box-shadow .35s var(--rg-ease);
    transform: none !important
}

.registration-section-v12 .submit-btn {
    background: linear-gradient(135deg,var(--rg-blue),var(--rg-violet)) !important;
    box-shadow: 0 16px 38px rgba(64,112,176,.24) !important
}

.registration-section-v12 .secondary-link {
    background: #f1f5fb;
    color: var(--rg-blue);
    border: 1px solid var(--rg-line);
    box-shadow: none
}

.registration-split-hover:before, .registration-split-hover:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    width: 52%;
    height: 100%;
    background: linear-gradient(135deg,var(--rg-magenta),var(--rg-rose));
    transition: transform .45s var(--rg-ease)
}

.registration-split-hover:before {
    right: 0;
    transform: translateX(105%)
}

.registration-split-hover:after {
    left: 0;
    transform: translateX(-105%)
}

.registration-split-hover:hover:before, .registration-split-hover:hover:after {
    transform: translateX(0)
}

.registration-section-v12 .submit-btn:hover, .registration-section-v12 .secondary-link:hover {
    transform: none !important;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 19px 44px rgba(160,48,128,.27) !important
}

.registration-split-hover > * {
    position: relative;
    z-index: 1
}

@keyframes rgHeroGrid {
    to {
        background-position: 0 0,0 0,156px 0
    }
}

@keyframes rgTextShine {
    to {
        background-position: 230% center
    }
}

@keyframes rgOrbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes rgCoreFloat {
    0%,100% {
        transform: translate(-50%,-50%)
    }

    50% {
        transform: translate(-50%,calc(-50% - 10px))
    }
}

@keyframes rgCoreRing {
    0% {
        opacity: .8;
        transform: scale(.9)
    }

    75%,100% {
        opacity: 0;
        transform: scale(1.18)
    }
}

@keyframes rgSatellite {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-9px) rotate(3deg)
    }
}

@keyframes rgIconBreathe {
    0%,100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-4px) scale(1.04)
    }
}

@keyframes rgIconRing {
    0% {
        opacity: .55;
        transform: scale(.88)
    }

    75%,100% {
        opacity: 0;
        transform: scale(1.18)
    }
}

@keyframes rgJourneyLine {
    0% {
        transform: translateX(520%)
    }

    100% {
        transform: translateX(-120%)
    }
}

@keyframes rgGridMove {
    to {
        background-position: 48px 48px,48px 48px
    }
}

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

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

@keyframes rgStatus {
    50% {
        box-shadow: 0 0 0 9px rgba(54,181,122,0)
    }
}

@media(max-width:1100px) {
    .registration-hero-visual {
        left: 2%;
        transform: translateY(-47%) scale(.82)
    }

    .registration-section-v12 .form-shell {
        grid-template-columns: 1fr !important
    }

    .registration-section-v12 .form-aside {
        position: relative !important;
        top: auto !important
    }

    .registration-section-v12 .form-progress-list {
        grid-template-columns: repeat(4,1fr)
    }

    .registration-section-v12 .admission-help-card {
        max-width: 620px
    }
}

@media(max-width:900px) {
    .registration-hero-visual {
        opacity: .34;
        left: -105px;
        transform: translateY(-47%) scale(.73)
    }

    .journey-steps {
        grid-template-columns: repeat(2,1fr)
    }

    .admission-intro-v12 .admission-quick-grid {
        grid-template-columns: 1fr !important;
        max-width: 700px;
        margin-inline: auto
    }

    .admission-card-v12 {
        min-height: 0
    }
}

@media(max-width:700px) {
    body.registration-generation-12 .registration-hero-v12, body.registration-generation-12 .registration-hero-v12 .swiper, body.registration-generation-12 .registration-hero-v12 .swiper-slide, body.registration-generation-12 .registration-hero-v12 .hero-slide {
        height: auto !important;
        min-height: 790px !important
    }

        body.registration-generation-12 .registration-hero-v12 .hero-slide > .container {
            height: 100%;
            align-self: stretch;
            display: flex;
            align-items: flex-start
        }

        body.registration-generation-12 .registration-hero-v12 .hero-content {
            max-width: 100% !important;
            padding-top: 330px !important;
            padding-bottom: 92px !important;
            text-align: center
        }

        body.registration-generation-12 .registration-hero-v12 .kicker {
            margin-inline: auto
        }

        body.registration-generation-12 .registration-hero-v12 h1 {
            max-width: 590px;
            margin: 18px auto 14px !important;
            font-size: clamp(35px,9.7vw,48px) !important;
            line-height: 1.24 !important;
            letter-spacing: -.8px !important;
            text-wrap: balance
        }

        body.registration-generation-12 .registration-hero-v12 p {
            max-width: 560px !important;
            margin-inline: auto !important;
            font-size: 14.5px !important;
            line-height: 1.9 !important
        }

    .registration-hero-proof {
        justify-content: center;
        gap: 7px
    }

        .registration-hero-proof > span {
            font-size: 11.5px;
            padding: 8px 9px
        }

    .registration-hero-visual {
        width: 205px;
        height: 205px;
        left: 50%;
        top: 108px;
        opacity: .96;
        transform: translateX(-50%);
        filter: drop-shadow(0 28px 45px rgba(3,12,32,.3))
    }

        .registration-hero-visual .reg-visual-core {
            width: 82px;
            height: 82px;
            border-radius: 25px
        }

            .registration-hero-visual .reg-visual-core > .material-symbols-rounded {
                font-size: 40px
            }

        .registration-hero-visual .reg-orbit {
            inset: 12px
        }

            .registration-hero-visual .reg-orbit.orbit-b {
                inset: 45px
            }

        .registration-hero-visual .reg-satellite {
            width: 45px;
            height: 45px;
            border-radius: 15px;
            background: rgba(255,255,255,.16);
            border-color: rgba(255,255,255,.3)
        }

            .registration-hero-visual .reg-satellite .material-symbols-rounded {
                font-size: 22px
            }

    .admission-journey-v12 {
        padding: 24px 0
    }

    .journey-steps {
        grid-template-columns: 1fr;
        gap: 9px
    }

        .journey-steps article {
            min-height: 72px
        }

    .journey-line {
        right: 34px;
        left: auto;
        top: 8%;
        bottom: 8%;
        width: 2px;
        height: auto
    }

        .journey-line i {
            width: 100%;
            height: 20%;
            animation: rgJourneyLineMobile 5s linear infinite
        }

    .admission-intro-v12 {
        padding: 70px 0 48px !important
    }

        .admission-intro-v12 .admission-head {
            text-align: right;
            margin-bottom: 27px
        }

            .admission-intro-v12 .admission-head h2 {
                font-size: 34px
            }

            .admission-intro-v12 .admission-head p {
                font-size: 14px
            }

    .admission-card-v12 {
        padding: 24px 21px;
        border-radius: 25px
    }

    .registration-section-v12 {
        padding: 58px 0 80px !important
    }

        .registration-section-v12 .registration-head {
            text-align: right
        }

            .registration-section-v12 .registration-head h2 {
                font-size: 34px
            }

            .registration-section-v12 .registration-head p {
                font-size: 14px
            }

        .registration-section-v12 .form-progress-list {
            grid-template-columns: 1fr 1fr
        }

        .registration-section-v12 .admission-form {
            padding: 15px !important;
            border-radius: 27px !important
        }

    .form-completion-head {
        align-items: flex-start;
        padding: 12px
    }

    .form-save-status {
        display: none
    }

    .registration-section-v12 .admission-form fieldset {
        padding: 15px !important;
        border-radius: 21px !important
    }

    .registration-section-v12 .admission-form legend {
        font-size: 12.5px !important
    }

    .registration-section-v12 .form-grid {
        grid-template-columns: 1fr !important
    }

    .registration-section-v12 .form-group.full {
        grid-column: auto
    }

    .registration-trust {
        display: grid;
        grid-template-columns: 1fr
    }

    .registration-section-v12 .form-actions {
        display: grid !important;
        grid-template-columns: 1fr
    }

    .registration-section-v12 .submit-btn, .registration-section-v12 .secondary-link {
        width: 100%
    }
}

@keyframes rgJourneyLineMobile {
    0% {
        transform: translateY(-120%)
    }

    100% {
        transform: translateY(520%)
    }
}

@media(max-width:430px) {
    body.registration-generation-12 .registration-hero-v12, body.registration-generation-12 .registration-hero-v12 .swiper, body.registration-generation-12 .registration-hero-v12 .swiper-slide, body.registration-generation-12 .registration-hero-v12 .hero-slide {
        min-height: 775px !important
    }

        body.registration-generation-12 .registration-hero-v12 .hero-content {
            padding-top: 310px !important
        }

    .registration-hero-visual {
        top: 105px;
        width: 190px;
        height: 190px
    }

    .registration-hero-proof > span {
        flex: 1 1 calc(50% - 7px);
        justify-content: center
    }

    .registration-section-v12 .form-aside {
        padding: 23px 18px !important
    }

    .registration-section-v12 .form-progress-list {
        grid-template-columns: 1fr
    }

    .registration-section-v12 .admission-form {
        padding: 12px !important
    }

        .registration-section-v12 .admission-form fieldset {
            padding: 13px !important
        }
}

@media(prefers-reduced-motion:reduce) {
    body.registration-generation-12 .registration-hero-v12:before, .registration-hero-v12 *, body.registration-generation-12 .admission-journey-v12 *, body.registration-generation-12 .admission-page *, body.registration-generation-12 .footer-v2 *, body.registration-generation-12 .hybrid-navbar *, body.registration-generation-12 .hybrid-panel * {
        animation: none !important;
        scroll-behavior: auto !important
    }
}
/* ===== Early registration portals · Generation 12 ===== */
.registration-portals-v12 {
    position: relative;
    isolation: isolate;
    margin: 0 0 34px;
    padding: 26px;
    border: 1px solid rgba(64,112,176,.17);
    border-radius: 32px;
    background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(242,247,255,.9) 58%,rgba(251,241,250,.88));
    box-shadow: 0 28px 80px rgba(20,49,93,.11);
    overflow: hidden
}

    .registration-portals-v12::before {
        content: "";
        position: absolute;
        z-index: -2;
        width: 310px;
        height: 310px;
        inset: -190px auto auto -80px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(160,48,128,.2),transparent 68%);
        animation: rgPortalAmbient 8s ease-in-out infinite
    }

    .registration-portals-v12::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        opacity: .55;
        pointer-events: none;
        background-image: linear-gradient(rgba(64,112,176,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(64,112,176,.035) 1px,transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
        animation: rgPortalGrid 18s linear infinite
    }

.portal-heading-v12 {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px
}

    .portal-heading-v12 > div {
        max-width: 720px
    }

.portal-eyebrow-v12 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--rg-violet);
    font-size: 12px;
    font-weight: 900
}

    .portal-eyebrow-v12 > i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #36b57a;
        box-shadow: 0 0 0 6px rgba(54,181,122,.12);
        animation: rgPortalStatus 1.8s ease-in-out infinite
    }

.portal-heading-v12 h3 {
    margin: 0;
    color: var(--rg-ink);
    font-size: clamp(24px,3vw,38px);
    line-height: 1.35;
    letter-spacing: -.7px
}

.portal-heading-v12 p {
    margin: 7px 0 0;
    color: #687991;
    font-size: 13.5px;
    line-height: 1.85
}

.portal-count-v12 {
    display: grid;
    place-items: center;
    flex: 0 0 76px;
    min-height: 70px;
    padding: 8px;
    border: 1px solid rgba(112,48,144,.13);
    border-radius: 21px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 12px 32px rgba(20,49,93,.07)
}

    .portal-count-v12 strong, .portal-count-v12 small {
        display: block
    }

    .portal-count-v12 strong {
        font-size: 26px;
        line-height: 1;
        color: var(--rg-violet)
    }

    .portal-count-v12 small {
        margin-top: 5px;
        color: #738198;
        font-size: 9px;
        font-weight: 900
    }

.portal-grid-v12 {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 13px
}

.portal-card-v12 {
    --portal-accent: var(--rg-blue);
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 154px;
    padding: 18px 16px 15px;
    border: 1px solid rgba(64,112,176,.16);
    border-radius: 23px;
    background: rgba(255,255,255,.8);
    color: var(--rg-ink);
    font-family: inherit;
    text-align: right;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(20,49,93,.055);
    transform: none !important;
    transition: border-color .36s var(--rg-ease),box-shadow .36s var(--rg-ease),background .36s var(--rg-ease),color .36s var(--rg-ease)
}

    .portal-card-v12:nth-child(2) {
        --portal-accent: #527dc0
    }

    .portal-card-v12:nth-child(3) {
        --portal-accent: #703090
    }

    .portal-card-v12:nth-child(4) {
        --portal-accent: #a03080
    }

    .portal-card-v12::before, .portal-card-v12::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        width: 51%;
        height: 100%;
        opacity: 0;
        background: linear-gradient(145deg,color-mix(in srgb,var(--portal-accent) 92%,#fff),var(--portal-accent));
        transition: transform .48s var(--rg-ease),opacity .34s ease
    }

    .portal-card-v12::before {
        right: 0;
        transform: translateX(105%)
    }

    .portal-card-v12::after {
        left: 0;
        transform: translateX(-105%)
    }

    .portal-card-v12:hover, .portal-card-v12:focus-visible, .portal-card-v12.is-active {
        transform: none !important;
        border-color: color-mix(in srgb,var(--portal-accent) 48%,transparent);
        box-shadow: 0 20px 48px color-mix(in srgb,var(--portal-accent) 23%,transparent);
        color: #fff;
        outline: none
    }

        .portal-card-v12:hover::before, .portal-card-v12:hover::after, .portal-card-v12:focus-visible::before, .portal-card-v12:focus-visible::after, .portal-card-v12.is-active::before, .portal-card-v12.is-active::after {
            opacity: 1;
            transform: translateX(0)
        }

    .portal-card-v12 .portal-number {
        position: absolute;
        direction: ltr;
        left: 11px;
        top: 5px;
        color: rgba(64,112,176,.07);
        font: 900 39px/1 system-ui;
        transition: color .3s ease
    }

    .portal-card-v12:hover .portal-number, .portal-card-v12:focus-visible .portal-number, .portal-card-v12.is-active .portal-number {
        color: rgba(255,255,255,.12)
    }

.portal-icon-v12 {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    border: 1px solid rgba(64,112,176,.13);
    border-radius: 17px;
    background: linear-gradient(145deg,#eff5ff,#fbf0fa);
    color: var(--portal-accent);
    box-shadow: 0 10px 25px rgba(20,49,93,.08);
    animation: rgPortalIcon 3.8s ease-in-out infinite
}

.portal-card-v12:nth-child(2) .portal-icon-v12 {
    animation-delay: -.9s
}

.portal-card-v12:nth-child(3) .portal-icon-v12 {
    animation-delay: -1.8s
}

.portal-card-v12:nth-child(4) .portal-icon-v12 {
    animation-delay: -2.7s
}

.portal-icon-v12::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid color-mix(in srgb,var(--portal-accent) 25%,transparent);
    border-radius: 22px;
    animation: rgPortalRing 2.7s ease-out infinite
}

.portal-icon-v12 .material-symbols-rounded {
    font-size: 27px;
    font-variation-settings: 'FILL' 1
}

.portal-card-v12:hover .portal-icon-v12, .portal-card-v12:focus-visible .portal-icon-v12, .portal-card-v12.is-active .portal-icon-v12 {
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.15);
    color: #fff;
    box-shadow: 0 12px 28px rgba(3,12,32,.15)
}

.portal-copy-v12 {
    display: block
}

    .portal-copy-v12 strong, .portal-copy-v12 small {
        display: block;
        white-space: normal
    }

    .portal-copy-v12 strong {
        font-size: 17px;
        line-height: 1.25
    }

    .portal-copy-v12 small {
        margin-top: 5px;
        color: #718097;
        font-size: 10.5px;
        font-weight: 800;
        transition: color .3s ease
    }

.portal-card-v12:hover .portal-copy-v12 small, .portal-card-v12:focus-visible .portal-copy-v12 small, .portal-card-v12.is-active .portal-copy-v12 small {
    color: rgba(255,255,255,.78)
}

.portal-check-v12 {
    position: absolute;
    left: 13px;
    bottom: 13px;
    color: rgba(64,112,176,.18);
    font-size: 20px;
    transform: scale(.75);
    transition: color .3s ease,transform .36s var(--rg-ease)
}

.portal-card-v12.is-active .portal-check-v12 {
    color: #fff;
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(255,255,255,.4))
}

.portal-selection-v12 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 18px;
    background: linear-gradient(110deg,#071731,#163a70 58%,#572769);
    color: #fff;
    box-shadow: 0 16px 40px rgba(7,23,49,.18);
    overflow: hidden
}

    .portal-selection-v12::after {
        content: "";
        position: absolute;
        top: 0;
        right: -60%;
        width: 38%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
        transform: skewX(-18deg);
        animation: rgPortalScan 4.8s ease-in-out infinite
    }

    .portal-selection-v12 > span {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 12px;
        font-weight: 800
    }

    .portal-selection-v12 .material-symbols-rounded {
        color: #c9ddff;
        font-size: 20px;
        animation: rgIconBreathe 3s ease-in-out infinite
    }

    .portal-selection-v12 strong {
        color: #fff
    }

    .portal-selection-v12 small {
        position: relative;
        z-index: 1;
        color: rgba(255,255,255,.62);
        font-size: 10px;
        font-weight: 800
    }

.form-request-title-v12 {
    display: flex !important;
    align-items: center;
    gap: 7px
}

.form-portal-badge-v12 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid rgba(112,48,144,.13);
    border-radius: 999px;
    background: #fff;
    color: var(--rg-violet);
    font-size: 9px !important;
    font-weight: 900;
    white-space: nowrap
}

.registration-portals-v12.is-switching .portal-selection-v12 {
    animation: rgPortalSwitch .48s var(--rg-ease)
}

@keyframes rgPortalAmbient {
    0%,100% {
        transform: translate3d(0,0,0) scale(1)
    }

    50% {
        transform: translate3d(34px,22px,0) scale(1.08)
    }
}

@keyframes rgPortalGrid {
    to {
        background-position: 42px 42px,42px 42px
    }
}

@keyframes rgPortalStatus {
    50% {
        box-shadow: 0 0 0 10px rgba(54,181,122,0)
    }
}

@keyframes rgPortalIcon {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-6px) rotate(2deg)
    }
}

@keyframes rgPortalRing {
    0% {
        opacity: .65;
        transform: scale(.88)
    }

    78%,100% {
        opacity: 0;
        transform: scale(1.18)
    }
}

@keyframes rgPortalScan {
    0%,35% {
        right: -60%;
        opacity: 0
    }

    52% {
        opacity: 1
    }

    78%,100% {
        right: 125%;
        opacity: 0
    }
}

@keyframes rgPortalSwitch {
    0% {
        box-shadow: 0 16px 40px rgba(7,23,49,.18)
    }

    45% {
        box-shadow: 0 18px 52px rgba(112,48,144,.32)
    }

    100% {
        box-shadow: 0 16px 40px rgba(7,23,49,.18)
    }
}

@media(max-width:900px) {
    .portal-grid-v12 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .portal-card-v12 {
        min-height: 143px
    }

    .portal-heading-v12 {
        align-items: center
    }
}

@media(max-width:600px) {
    .registration-portals-v12 {
        margin-bottom: 24px;
        padding: 17px;
        border-radius: 25px
    }

    .portal-heading-v12 {
        align-items: flex-start
    }

    .portal-count-v12 {
        flex-basis: 62px;
        min-height: 60px;
        border-radius: 17px
    }

        .portal-count-v12 strong {
            font-size: 22px
        }

    .portal-heading-v12 h3 {
        font-size: 25px
    }

    .portal-heading-v12 p {
        font-size: 12.5px
    }

    .portal-grid-v12 {
        gap: 9px
    }

    .portal-card-v12 {
        min-height: 132px;
        padding: 15px 12px 12px;
        border-radius: 19px
    }

    .portal-icon-v12 {
        width: 45px;
        height: 45px;
        margin-bottom: 13px;
        border-radius: 14px
    }

    .portal-copy-v12 strong {
        font-size: 14px
    }

    .portal-copy-v12 small {
        font-size: 9.5px
    }

    .portal-number {
        font-size: 31px !important
    }

    .portal-selection-v12 {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 12px 13px
    }

        .portal-selection-v12 small {
            padding-right: 29px
        }

    .form-request-title-v12 {
        flex-wrap: wrap
    }
}

@media(max-width:365px) {
    .portal-heading-v12 {
        display: block
    }

    .portal-count-v12 {
        display: none
    }

    .portal-grid-v12 {
        grid-template-columns: 1fr
    }

    .portal-card-v12 {
        min-height: 112px
    }

    .portal-icon-v12 {
        margin-bottom: 11px
    }
}

@media(prefers-reduced-motion:reduce) {
    .registration-portals-v12::before, .registration-portals-v12::after, .portal-icon-v12, .portal-icon-v12::after, .portal-eyebrow-v12 > i, .portal-selection-v12::after, .portal-selection-v12 .material-symbols-rounded {
        animation: none !important
    }
}
/* ===== Careers page · Generation 12 ===== */
body.careers-page {
    --cr-ink: #071731;
    --cr-blue: #4070b0;
    --cr-violet: #703090;
    --cr-magenta: #a03080;
    --cr-cyan: #3bb8c8;
    --cr-gold: #efbf63;
    --cr-green: #32ae79;
    --cr-line: rgba(64,112,176,.15);
    background: #f8faff;
    color: var(--cr-ink)
}

    body.careers-page .registration-hero-v12 .hero-bg {
        background: linear-gradient(128deg,#06152e,#143c72 55%,#572768) !important
    }

    body.careers-page .registration-hero-v12:before {
        background: radial-gradient(circle at 12% 35%,rgba(59,184,200,.17),transparent 29%),linear-gradient(90deg,rgba(6,20,44,.1),rgba(6,20,44,.91) 72%),repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 1px,transparent 1px 78px);
        animation: crHeroGrid 18s linear infinite
    }

    body.careers-page .registration-hero-v12 h1 span {
        background: linear-gradient(100deg,#fff,#a5ddff 30%,#d8b9ea 65%,#ffcf91);
        background-size: 230% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: rgTextShine 6s linear infinite
    }

    body.careers-page .reg-visual-core {
        background: linear-gradient(135deg,var(--cr-cyan),var(--cr-violet) 58%,var(--cr-magenta))
    }

.career-float-symbol {
    position: absolute;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.83);
    font-size: 23px;
    font-variation-settings: 'FILL' 1;
    backdrop-filter: blur(10px);
    animation: crFloatSymbol 4.8s ease-in-out infinite
}

    .career-float-symbol.cs-a {
        right: 9%;
        top: 8%
    }

    .career-float-symbol.cs-b {
        left: 7%;
        bottom: 13%;
        animation-delay: -1.6s
    }

    .career-float-symbol.cs-c {
        right: 0;
        bottom: 25%;
        animation-delay: -3.2s
    }

.careers-main {
    overflow: hidden
}

.career-section {
    position: relative;
    padding: 88px 0
}

.career-heading {
    max-width: 800px;
    margin-bottom: 38px
}

.career-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cr-violet);
    font-size: 12px;
    font-weight: 950
}

    .career-kicker .material-symbols-rounded {
        font-size: 20px;
        animation: crIconFloat 3.2s ease-in-out infinite
    }

.career-heading h2 {
    margin: 12px 0 10px;
    font-size: clamp(34px,4.5vw,57px);
    line-height: 1.27;
    letter-spacing: -1.25px;
    text-wrap: balance
}

.career-heading p {
    margin: 0;
    color: #66778f;
    font-size: 15px;
    line-height: 2
}

.career-values {
    padding: 28px 0;
    background: #fff;
    border-bottom: 1px solid var(--cr-line);
    box-shadow: 0 15px 42px rgba(20,49,93,.05)
}

.career-values-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px
}

.career-value {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 14px;
    border: 1px solid var(--cr-line);
    border-radius: 20px;
    background: #fbfcff;
    overflow: hidden;
    transition: border-color .35s,box-shadow .35s
}

    .career-value::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,var(--cr-cyan),var(--cr-violet),var(--cr-magenta));
        transform: scaleX(.16);
        transition: transform .45s
    }

    .career-value:hover {
        border-color: rgba(112,48,144,.28);
        box-shadow: 0 16px 38px rgba(20,49,93,.09)
    }

        .career-value:hover::after {
            transform: scaleX(1)
        }

    .career-value > span {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        border-radius: 14px;
        background: linear-gradient(145deg,#eaf7ff,#f8eefa);
        color: var(--cr-violet);
        font-size: 22px;
        font-variation-settings: 'FILL' 1;
        animation: crIconFloat 3.4s ease-in-out infinite
    }

    .career-value:nth-child(2) > span {
        animation-delay: -.8s
    }

    .career-value:nth-child(3) > span {
        animation-delay: -1.6s
    }

    .career-value:nth-child(4) > span {
        animation-delay: -2.4s
    }

    .career-value strong, .career-value small {
        display: block
    }

    .career-value strong {
        font-size: 12.5px
    }

    .career-value small {
        margin-top: 4px;
        color: #748299;
        font-size: 9.5px;
        font-weight: 700
    }

.vacancies-section {
    background: radial-gradient(circle at 7% 18%,rgba(59,184,200,.08),transparent 24%),radial-gradient(circle at 93% 72%,rgba(112,48,144,.09),transparent 25%),linear-gradient(180deg,#f8faff,#fff)
}

    .vacancies-section::before, .application-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .5;
        background-image: linear-gradient(rgba(64,112,176,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(64,112,176,.035) 1px,transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
        animation: crGridMove 24s linear infinite
    }

.vacancy-toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px
}

.vacancy-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.vacancy-filter {
    position: relative;
    isolation: isolate;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--cr-line);
    border-radius: 13px;
    background: #fff;
    color: #60718a;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    overflow: hidden;
    transition: color .35s,border-color .35s,box-shadow .35s;
    transform: none !important
}

    .vacancy-filter::before, .vacancy-filter::after, .career-submit::before, .career-submit::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        width: 52%;
        height: 100%;
        background: linear-gradient(145deg,var(--cr-blue),var(--cr-violet),var(--cr-magenta));
        transition: transform .44s cubic-bezier(.2,.75,.2,1)
    }

    .vacancy-filter::before, .career-submit::before {
        right: 0;
        transform: translateX(105%)
    }

    .vacancy-filter::after, .career-submit::after {
        left: 0;
        transform: translateX(-105%)
    }

    .vacancy-filter:hover, .vacancy-filter.is-active {
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 28px rgba(112,48,144,.2)
    }

        .vacancy-filter:hover::before, .vacancy-filter:hover::after, .vacancy-filter.is-active::before, .vacancy-filter.is-active::after, .career-submit:hover::before, .career-submit:hover::after {
            transform: translateX(0)
        }

.vacancy-live {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #718098;
    font-size: 11px;
    font-weight: 900
}

    .vacancy-live i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--cr-green);
        box-shadow: 0 0 0 0 rgba(50,174,121,.4);
        animation: crLive 2s ease-out infinite
    }

.vacancy-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.vacancy-card {
    --job-accent: var(--cr-blue);
    position: relative;
    isolation: isolate;
    min-height: 300px;
    padding: 23px;
    border: 1px solid var(--cr-line);
    border-radius: 28px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 20px 55px rgba(20,49,93,.08);
    overflow: hidden;
    transition: border-color .36s,box-shadow .36s,color .36s
}

    .vacancy-card:nth-child(2), .vacancy-card:nth-child(5) {
        --job-accent: var(--cr-violet)
    }

    .vacancy-card:nth-child(3), .vacancy-card:nth-child(6) {
        --job-accent: var(--cr-magenta)
    }

    .vacancy-card::before, .vacancy-card::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        width: 51%;
        height: 100%;
        opacity: 0;
        background: linear-gradient(145deg,color-mix(in srgb,var(--job-accent) 88%,#fff),var(--job-accent));
        transition: transform .48s,opacity .34s
    }

    .vacancy-card::before {
        right: 0;
        transform: translateX(105%)
    }

    .vacancy-card::after {
        left: 0;
        transform: translateX(-105%)
    }

    .vacancy-card:hover, .vacancy-card.is-selected {
        color: #fff;
        border-color: color-mix(in srgb,var(--job-accent) 45%,transparent);
        box-shadow: 0 28px 65px color-mix(in srgb,var(--job-accent) 22%,transparent)
    }

        .vacancy-card:hover::before, .vacancy-card:hover::after, .vacancy-card.is-selected::before, .vacancy-card.is-selected::after {
            opacity: 1;
            transform: translateX(0)
        }

    .vacancy-card[hidden] {
        display: none
    }

.job-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.job-icon {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(64,112,176,.13);
    border-radius: 19px;
    background: linear-gradient(145deg,#eaf6ff,#f8eefa);
    color: var(--job-accent);
    font-size: 28px;
    font-variation-settings: 'FILL' 1;
    box-shadow: 0 12px 30px rgba(20,49,93,.08);
    animation: crIconFloat 3.7s ease-in-out infinite
}

    .job-icon::after {
        content: "";
        position: absolute;
        inset: -6px;
        border: 1px solid color-mix(in srgb,var(--job-accent) 22%,transparent);
        border-radius: 24px;
        animation: crRing 2.8s ease-out infinite
    }

.job-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #edf9f4;
    color: #2a9368;
    font-size: 9px;
    font-weight: 950
}

    .job-status i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cr-green)
    }

.vacancy-card:hover .job-icon, .vacancy-card.is-selected .job-icon {
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.14);
    color: #fff
}

.vacancy-card:hover .job-status, .vacancy-card.is-selected .job-status {
    background: rgba(255,255,255,.14);
    color: #fff
}

.vacancy-card h3 {
    margin: 22px 0 8px;
    font-size: 18px
}

.vacancy-card p {
    margin: 0;
    color: #6b7b91;
    font-size: 11.5px;
    line-height: 1.9;
    transition: color .3s
}

.vacancy-card:hover p, .vacancy-card.is-selected p {
    color: rgba(255,255,255,.75)
}

.job-meta {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 18px
}

    .job-meta > span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 8px;
        border-radius: 9px;
        background: #f3f6fb;
        color: #6d7d94;
        font-size: 9px;
        font-weight: 850;
        transition: background .3s,color .3s
    }

.vacancy-card:hover .job-meta > span, .vacancy-card.is-selected .job-meta > span {
    background: rgba(255,255,255,.12);
    color: #fff
}

.job-meta .material-symbols-rounded {
    font-size: 14px
}

.job-apply {
    position: absolute;
    right: 23px;
    left: 23px;
    bottom: 20px;
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: #eef3fb;
    color: var(--job-accent);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 950;
    cursor: pointer;
    transition: background .3s,color .3s
}

.vacancy-card:hover .job-apply, .vacancy-card.is-selected .job-apply {
    background: #fff;
    color: var(--job-accent)
}

.job-apply .material-symbols-rounded {
    font-size: 18px;
    animation: crArrow 2.5s ease-in-out infinite
}

.application-section {
    background: linear-gradient(180deg,#fff,#f7f9ff);
    padding-top: 72px
}

    .application-section > .container {
        position: relative;
        z-index: 2
    }

.career-form-shell {
    display: grid;
    grid-template-columns: minmax(300px,370px) minmax(0,1fr);
    gap: 25px;
    align-items: start
}

.career-form-aside {
    position: sticky;
    top: 118px;
    padding: 29px 25px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 32px;
    background: linear-gradient(145deg,#071731,#173d75 58%,#703090 145%);
    color: #fff;
    box-shadow: 0 30px 85px rgba(8,29,66,.24);
    overflow: hidden
}

    .career-form-aside::after {
        content: "";
        position: absolute;
        width: 230px;
        height: 230px;
        left: -90px;
        bottom: -100px;
        border-radius: 50%;
        background: rgba(160,48,128,.18);
        filter: blur(15px);
        animation: crAmbient 8s ease-in-out infinite
    }

    .career-form-aside > * {
        position: relative;
        z-index: 1
    }

    .career-form-aside .career-kicker {
        color: #bed7ff
    }

    .career-form-aside h3 {
        margin: 14px 0 8px;
        color: #fff;
        font-size: 29px;
        line-height: 1.45
    }

    .career-form-aside > p {
        margin: 0;
        color: rgba(255,255,255,.7);
        font-size: 13px;
        line-height: 1.95
    }

.application-steps {
    display: grid;
    gap: 9px;
    margin-top: 23px
}

    .application-steps > div {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 54px;
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 16px;
        background: rgba(255,255,255,.085);
        font-size: 11.5px;
        font-weight: 850
    }

    .application-steps i {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        flex: 0 0 32px;
        border-radius: 11px;
        background: linear-gradient(145deg,rgba(80,128,192,.78),rgba(160,48,128,.72));
        font-style: normal;
        font-size: 10px;
        animation: crIconFloat 3s ease-in-out infinite
    }

.application-note {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    background: rgba(255,255,255,.08)
}

    .application-note > .material-symbols-rounded {
        color: #d9c2ee;
        font-size: 26px;
        animation: crIconFloat 3s ease-in-out infinite
    }

    .application-note strong, .application-note small {
        display: block
    }

    .application-note strong {
        font-size: 11px
    }

    .application-note small {
        margin-top: 4px;
        color: rgba(255,255,255,.62);
        font-size: 9.5px;
        line-height: 1.7
    }

.career-form {
    padding: 25px;
    border: 1px solid var(--cr-line);
    border-radius: 34px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 30px 95px rgba(20,49,93,.12);
    backdrop-filter: blur(20px)
}

.career-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--cr-line);
    border-radius: 19px;
    background: linear-gradient(135deg,#f0f5fd,#faf0fa)
}

.career-form-title {
    display: flex;
    align-items: center;
    gap: 11px
}

    .career-form-title > .material-symbols-rounded {
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: #fff;
        color: var(--cr-violet);
        font-size: 23px;
        box-shadow: 0 8px 20px rgba(20,49,93,.07);
        animation: crIconFloat 3.3s ease-in-out infinite
    }

    .career-form-title strong, .career-form-title small {
        display: block
    }

    .career-form-title strong {
        font-size: 14px
    }

    .career-form-title small {
        margin-top: 3px;
        color: #708097;
        font-size: 10.5px
    }

.career-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #61728a;
    font-size: 10px;
    font-weight: 900
}

.career-progress-ring {
    --progress: 0;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--cr-violet) calc(var(--progress)*1%),#e7ebf2 0);
    font-size: 0
}

    .career-progress-ring::before {
        content: attr(data-progress) "%";
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: var(--cr-violet);
        font-size: 8px;
        font-weight: 950
    }

.selected-job-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(110deg,#071731,#163a70 58%,#572769);
    color: #fff;
    box-shadow: 0 14px 35px rgba(7,23,49,.16);
    overflow: hidden
}

    .selected-job-strip > span {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 850
    }

    .selected-job-strip .material-symbols-rounded {
        color: #c9ddff;
        font-size: 20px;
        animation: crIconFloat 3s ease-in-out infinite
    }

    .selected-job-strip small {
        color: rgba(255,255,255,.58);
        font-size: 9px
    }

.career-form fieldset {
    position: relative;
    margin: 0 0 18px;
    padding: 21px;
    border: 1px solid var(--cr-line);
    border-radius: 25px;
    background: linear-gradient(180deg,#fff,#f9fbff);
    box-shadow: 0 13px 36px rgba(20,49,93,.05);
    overflow: hidden
}

    .career-form fieldset::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 110px;
        height: 3px;
        background: linear-gradient(90deg,var(--cr-magenta),var(--cr-blue));
        transform: scaleX(.34);
        transform-origin: right;
        transition: transform .45s
    }

    .career-form fieldset:hover::after {
        transform: scaleX(1)
    }

.career-form legend {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 17px;
    padding: 8px 11px;
    border: 1px solid var(--cr-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(20,49,93,.055);
    font-size: 13.5px;
    font-weight: 900
}

    .career-form legend > .material-symbols-rounded {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: linear-gradient(145deg,#edf3ff,#f8eefa);
        color: var(--cr-violet);
        font-size: 19px;
        font-variation-settings: 'FILL' 1;
        animation: crIconFloat 3.2s ease-in-out infinite
    }

.career-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.career-field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

    .career-field.full {
        grid-column: 1/-1
    }

    .career-field label {
        font-size: 12px;
        font-weight: 900;
        color: #17365f
    }

        .career-field label em {
            color: var(--cr-magenta);
            font-style: normal
        }

    .career-field input, .career-field select, .career-field textarea {
        width: 100%;
        min-height: 52px;
        padding: 12px 13px;
        border: 1px solid rgba(64,112,176,.17);
        border-radius: 15px;
        background: #fff;
        color: #17365f;
        font-family: inherit;
        font-size: 12.5px;
        outline: none;
        box-shadow: inset 0 1px 2px rgba(20,49,93,.025);
        transition: border-color .3s,box-shadow .3s
    }

    .career-field textarea {
        min-height: 110px;
        resize: vertical
    }

        .career-field input:hover, .career-field select:hover, .career-field textarea:hover {
            border-color: rgba(112,48,144,.3)
        }

        .career-field input:focus, .career-field select:focus, .career-field textarea:focus {
            border-color: var(--cr-violet);
            box-shadow: 0 0 0 4px rgba(112,48,144,.09)
        }

.cv-upload {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 145px;
    padding: 20px;
    border: 1.5px dashed rgba(112,48,144,.28);
    border-radius: 19px;
    background: linear-gradient(145deg,#f8fbff,#fcf7fc);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .3s,background .3s
}

    .cv-upload:hover {
        border-color: var(--cr-violet);
        background: #fff
    }

    .cv-upload input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer
    }

    .cv-upload > .material-symbols-rounded {
        font-size: 37px;
        color: var(--cr-violet);
        animation: crUpload 2.8s ease-in-out infinite
    }

    .cv-upload strong, .cv-upload small {
        display: block
    }

    .cv-upload strong {
        margin-top: 8px;
        font-size: 12px
    }

    .cv-upload small {
        margin-top: 4px;
        color: #738198;
        font-size: 9.5px
    }

.cv-file-name {
    margin-top: 8px;
    color: var(--cr-blue);
    font-size: 10px;
    font-weight: 900
}

.career-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    color: #53667f;
    font-size: 11px;
    line-height: 1.85;
    cursor: pointer
}

    .career-consent input {
        margin-top: 5px;
        accent-color: var(--cr-violet)
    }

.career-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px
}

.career-submit {
    position: relative;
    isolation: isolate;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 23px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(145deg,var(--cr-blue),var(--cr-violet));
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 16px 38px rgba(64,112,176,.24);
    cursor: pointer;
    overflow: hidden;
    transform: none !important;
    transition: box-shadow .35s
}

    .career-submit:hover {
        box-shadow: 0 20px 46px rgba(160,48,128,.28)
    }

    .career-submit .material-symbols-rounded {
        font-size: 20px
    }

    .career-submit.is-sent {
        background: linear-gradient(145deg,#26966b,#37bb83)
    }

.career-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #718098;
    font-size: 9.5px;
    font-weight: 800
}

    .career-privacy .material-symbols-rounded {
        font-size: 16px;
        color: var(--cr-green)
    }

@keyframes crHeroGrid {
    to {
        background-position: 0 0,0 0,156px 0
    }
}

@keyframes crFloatSymbol {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-11px) rotate(5deg)
    }
}

@keyframes crIconFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-5px) rotate(2deg)
    }
}

@keyframes crGridMove {
    to {
        background-position: 48px 48px,48px 48px
    }
}

@keyframes crLive {
    70% {
        box-shadow: 0 0 0 10px rgba(50,174,121,0)
    }
}

@keyframes crRing {
    0% {
        opacity: .62;
        transform: scale(.88)
    }

    78%,100% {
        opacity: 0;
        transform: scale(1.18)
    }
}

@keyframes crArrow {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-5px)
    }
}

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

    50% {
        transform: translate3d(35px,-20px,0)
    }
}

@keyframes crUpload {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

@media(max-width:1050px) {
    .career-form-shell {
        grid-template-columns: 1fr
    }

    .career-form-aside {
        position: relative;
        top: auto
    }

    .application-steps {
        grid-template-columns: repeat(4,1fr)
    }

    .vacancy-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:760px) {
    .career-section {
        padding: 66px 0
    }

    .career-heading {
        margin-bottom: 28px
    }

        .career-heading h2 {
            font-size: 34px
        }

    .career-values-grid {
        grid-template-columns: 1fr 1fr
    }

    .vacancy-toolbar {
        align-items: flex-start;
        flex-direction: column
    }

    .vacancy-filters {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr
    }

    .vacancy-filter {
        width: 100%
    }

    .vacancy-grid {
        grid-template-columns: 1fr
    }

    .vacancy-card {
        min-height: 285px
    }

    .application-steps {
        grid-template-columns: 1fr 1fr
    }

    .career-form {
        padding: 15px;
        border-radius: 27px
    }

    .career-form-head {
        align-items: flex-start;
        padding: 12px
    }

    .career-progress > span {
        display: none
    }

    .career-form fieldset {
        padding: 15px;
        border-radius: 21px
    }

    .career-form-grid {
        grid-template-columns: 1fr
    }

    .career-field.full {
        grid-column: auto
    }

    .career-actions {
        align-items: stretch;
        flex-direction: column
    }

    .career-submit {
        width: 100%
    }

    .career-privacy {
        justify-content: center
    }
}

@media(max-width:430px) {
    .career-heading h2 {
        font-size: 30px
    }

    .career-values-grid {
        grid-template-columns: 1fr
    }

    .career-form-aside {
        padding: 23px 18px
    }

    .application-steps {
        grid-template-columns: 1fr
    }

    .career-form {
        padding: 11px
    }

        .career-form fieldset {
            padding: 13px
        }

    .selected-job-strip {
        align-items: flex-start;
        flex-direction: column
    }

        .selected-job-strip small {
            padding-right: 28px
        }

    .career-form-title strong {
        font-size: 12.5px
    }
}

@media(prefers-reduced-motion:reduce) {
    body.careers-page .registration-hero-v12 *, body.careers-page .careers-main *, body.careers-page .footer-v2 * {
        animation: none !important
    }
}
/* ===== Staff profile · Generation 12 ===== */
body.staff-profile-page {
    --sp-ink: #071731;
    --sp-blue: #4070b0;
    --sp-violet: #703090;
    --sp-magenta: #a03080;
    --sp-cyan: #3bb8c8;
    --sp-gold: #efbf63;
    --sp-green: #32ae79;
    --sp-line: rgba(64,112,176,.15);
    background: #f8faff;
    color: var(--sp-ink)
}

    body.staff-profile-page .registration-hero-v12 .hero-bg {
        background: linear-gradient(128deg,#06152e,#143c72 55%,#572768) !important
    }

    body.staff-profile-page .registration-hero-v12:before {
        background: radial-gradient(circle at 12% 35%,rgba(59,184,200,.17),transparent 29%),linear-gradient(90deg,rgba(6,20,44,.08),rgba(6,20,44,.92) 72%),repeating-linear-gradient(90deg,rgba(255,255,255,.026) 0 1px,transparent 1px 78px);
        animation: spHeroGrid 18s linear infinite
    }

    body.staff-profile-page .registration-hero-v12 h1 span {
        background: linear-gradient(100deg,#fff,#a5ddff 30%,#d8b9ea 65%,#ffcf91);
        background-size: 230% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: rgTextShine 6s linear infinite
    }

.staff-hero-visual {
    width: 355px !important;
    height: 390px !important;
    left: 6% !important
}

.staff-portrait-card {
    position: absolute;
    inset: 24px 38px 25px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 39px 39px 39px 13px;
    background: rgba(255,255,255,.1);
    box-shadow: 0 35px 85px rgba(2,11,30,.36);
    backdrop-filter: blur(16px);
    animation: spPortraitFloat 5s ease-in-out infinite;
    overflow: hidden
}

    .staff-portrait-card img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 31px 31px 31px 8px;
        object-fit: cover;
        object-position: center top
    }

    .staff-portrait-card::after {
        content: "";
        position: absolute;
        inset: 9px;
        border-radius: 31px 31px 31px 8px;
        background: linear-gradient(180deg,transparent 45%,rgba(5,18,41,.72));
        pointer-events: none
    }

.staff-portrait-status {
    position: absolute;
    z-index: 3;
    right: 24px;
    left: 24px;
    bottom: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: 900
}

    .staff-portrait-status > span {
        display: flex;
        align-items: center;
        gap: 7px
    }

    .staff-portrait-status i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 0 0 rgba(74,222,128,.4);
        animation: spLive 2s ease-out infinite
    }

    .staff-portrait-status > .material-symbols-rounded {
        font-size: 20px;
        color: #f4d68c
    }

.staff-visual-orbit {
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 49%;
    animation: spOrbit 20s linear infinite
}

    .staff-visual-orbit::before, .staff-visual-orbit::after {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #7fdded;
        box-shadow: 0 0 18px #7fdded
    }

    .staff-visual-orbit::before {
        top: 15%;
        left: 11%
    }

    .staff-visual-orbit::after {
        right: 3%;
        bottom: 28%;
        background: #e5a5d3;
        box-shadow: 0 0 18px #e5a5d3
    }

.staff-visual-badge {
    position: absolute;
    z-index: 4;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 26px;
    font-variation-settings: 'FILL' 1;
    box-shadow: 0 17px 35px rgba(2,11,30,.23);
    backdrop-filter: blur(12px);
    animation: spBadgeFloat 4s ease-in-out infinite
}

    .staff-visual-badge.svb-a {
        right: 0;
        top: 19%
    }

    .staff-visual-badge.svb-b {
        left: 0;
        bottom: 23%;
        animation-delay: -1.35s
    }

    .staff-visual-badge.svb-c {
        right: 11%;
        bottom: 0;
        animation-delay: -2.7s
    }

.staff-profile-main {
    overflow: hidden
}

.sp-section {
    position: relative;
    padding: 88px 0
}

.sp-section-head {
    max-width: 790px;
    margin-bottom: 35px
}

.sp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sp-violet);
    font-size: 12px;
    font-weight: 950
}

    .sp-kicker .material-symbols-rounded {
        font-size: 20px;
        animation: spIconFloat 3.3s ease-in-out infinite
    }

.sp-section-head h2 {
    margin: 12px 0 10px;
    color: var(--sp-ink);
    font-size: clamp(34px,4.4vw,55px);
    line-height: 1.28;
    letter-spacing: -1.2px;
    text-wrap: balance
}

.sp-section-head p {
    margin: 0;
    color: #687991;
    font-size: 14.5px;
    line-height: 2
}

.profile-proof {
    padding: 28px 0;
    background: #fff;
    border-bottom: 1px solid var(--sp-line);
    box-shadow: 0 15px 42px rgba(20,49,93,.05)
}

.profile-proof-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px
}

.profile-proof-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 85px;
    padding: 14px;
    border: 1px solid var(--sp-line);
    border-radius: 20px;
    background: #fbfcff;
    overflow: hidden;
    transition: border-color .35s,box-shadow .35s
}

    .profile-proof-card::after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg,var(--sp-cyan),var(--sp-violet),var(--sp-magenta));
        transform: scaleX(.17);
        transition: transform .45s
    }

    .profile-proof-card:hover {
        border-color: rgba(112,48,144,.28);
        box-shadow: 0 17px 40px rgba(20,49,93,.09)
    }

        .profile-proof-card:hover::after {
            transform: scaleX(1)
        }

    .profile-proof-card > span {
        width: 45px;
        height: 45px;
        display: grid;
        place-items: center;
        flex: 0 0 45px;
        border-radius: 14px;
        background: linear-gradient(145deg,#eaf7ff,#f8eefa);
        color: var(--sp-violet);
        font-size: 23px;
        font-variation-settings: 'FILL' 1;
        animation: spIconFloat 3.4s ease-in-out infinite
    }

    .profile-proof-card:nth-child(2) > span {
        animation-delay: -.8s
    }

    .profile-proof-card:nth-child(3) > span {
        animation-delay: -1.6s
    }

    .profile-proof-card:nth-child(4) > span {
        animation-delay: -2.4s
    }

    .profile-proof-card strong, .profile-proof-card small {
        display: block
    }

    .profile-proof-card strong {
        font-size: 13px
    }

    .profile-proof-card small {
        margin-top: 4px;
        color: #748299;
        font-size: 9.5px;
        font-weight: 750
    }

.profile-overview {
    background: radial-gradient(circle at 7% 18%,rgba(59,184,200,.09),transparent 24%),radial-gradient(circle at 93% 76%,rgba(112,48,144,.09),transparent 26%),linear-gradient(180deg,#f8faff,#fff)
}

    .profile-overview::before, .profile-details::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .5;
        background-image: linear-gradient(rgba(64,112,176,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(64,112,176,.035) 1px,transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
        animation: spGridMove 24s linear infinite
    }

.profile-overview-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(330px,.82fr) minmax(0,1.18fr);
    gap: 48px;
    align-items: center
}

.profile-photo-panel {
    position: relative;
    min-height: 530px;
    padding: 18px;
    border: 1px solid var(--sp-line);
    border-radius: 38px;
    background: #fff;
    box-shadow: 0 35px 90px rgba(20,49,93,.15)
}

    .profile-photo-panel > img {
        width: 100%;
        height: 494px;
        display: block;
        border-radius: 29px;
        object-fit: cover;
        object-position: center top
    }

    .profile-photo-panel::after {
        content: "";
        position: absolute;
        inset: 18px;
        border-radius: 29px;
        background: linear-gradient(180deg,transparent 58%,rgba(7,23,49,.78));
        pointer-events: none
    }

.profile-photo-caption {
    position: absolute;
    z-index: 2;
    right: 38px;
    left: 38px;
    bottom: 40px;
    color: #fff
}

    .profile-photo-caption strong, .profile-photo-caption span {
        display: block
    }

    .profile-photo-caption strong {
        font-size: 20px
    }

    .profile-photo-caption span {
        margin-top: 4px;
        color: rgba(255,255,255,.68);
        font-size: 11px
    }

.profile-quote {
    position: absolute;
    z-index: 3;
    left: -23px;
    top: 45px;
    width: 180px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 20px 20px 7px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 43px rgba(20,49,93,.14);
    color: #445872;
    font-size: 10.5px;
    line-height: 1.8;
    backdrop-filter: blur(13px);
    animation: spQuoteFloat 4.5s ease-in-out infinite
}

    .profile-quote > .material-symbols-rounded {
        display: block;
        margin-bottom: 7px;
        color: var(--sp-violet);
        font-size: 25px
    }

.profile-bio h2 {
    margin: 11px 0 12px;
    font-size: clamp(34px,4vw,50px);
    line-height: 1.3;
    letter-spacing: -1px
}

.profile-bio > p {
    color: #52657f;
    font-size: 14.5px;
    line-height: 2.15
}

.profile-contact-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px
}

.profile-contact-btn {
    position: relative;
    isolation: isolate;
    min-height: 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    background: #fff;
    color: var(--sp-blue);
    font-size: 11px;
    font-weight: 950;
    overflow: hidden;
    transform: none !important;
    transition: color .35s,border-color .35s,box-shadow .35s
}

    .profile-contact-btn::before, .profile-contact-btn::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        width: 52%;
        height: 100%;
        background: linear-gradient(145deg,var(--sp-blue),var(--sp-violet),var(--sp-magenta));
        transition: transform .44s
    }

    .profile-contact-btn::before {
        right: 0;
        transform: translateX(105%)
    }

    .profile-contact-btn::after {
        left: 0;
        transform: translateX(-105%)
    }

    .profile-contact-btn:hover {
        color: #fff;
        border-color: transparent;
        box-shadow: 0 16px 36px rgba(112,48,144,.22)
    }

        .profile-contact-btn:hover::before, .profile-contact-btn:hover::after {
            transform: translateX(0)
        }

    .profile-contact-btn .material-symbols-rounded, .profile-contact-btn .bi {
        font-size: 19px
    }

.profile-skills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px
}

    .profile-skills > span {
        padding: 7px 10px;
        border: 1px solid rgba(112,48,144,.11);
        border-radius: 999px;
        background: #f4f1fa;
        color: #654780;
        font-size: 10px;
        font-weight: 850
    }

.profile-details {
    background: #fff
}

.profile-details-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.profile-detail-card {
    position: relative;
    padding: 27px;
    border: 1px solid var(--sp-line);
    border-radius: 29px;
    background: linear-gradient(180deg,#fff,#f9fbff);
    box-shadow: 0 22px 62px rgba(20,49,93,.08);
    overflow: hidden
}

    .profile-detail-card > span {
        width: 55px;
        height: 55px;
        display: grid;
        place-items: center;
        border-radius: 18px;
        background: linear-gradient(145deg,#eaf6ff,#f8eefa);
        color: var(--sp-violet);
        font-size: 27px;
        font-variation-settings: 'FILL' 1;
        animation: spIconFloat 3.5s ease-in-out infinite
    }

    .profile-detail-card h3 {
        margin: 20px 0 9px;
        font-size: 20px
    }

    .profile-detail-card > p {
        margin: 0;
        color: #6a7a91;
        font-size: 12px;
        line-height: 2
    }

    .profile-detail-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg,var(--sp-cyan),var(--sp-violet),var(--sp-magenta));
        transform: scaleX(.2);
        transition: transform .45s
    }

    .profile-detail-card:hover::after {
        transform: scaleX(1)
    }

.qualification-list {
    display: grid;
    gap: 11px;
    margin-top: 21px
}

    .qualification-list li {
        display: flex;
        gap: 11px;
        padding: 12px;
        border: 1px solid var(--sp-line);
        border-radius: 16px;
        background: #fff
    }

    .qualification-list .material-symbols-rounded {
        color: var(--sp-blue);
        font-size: 20px
    }

    .qualification-list strong, .qualification-list small {
        display: block
    }

    .qualification-list strong {
        font-size: 11.5px
    }

    .qualification-list small {
        margin-top: 4px;
        color: #78869a;
        font-size: 9.5px;
        line-height: 1.6
    }

.profile-achievements {
    background: linear-gradient(145deg,#071731,#13396e 56%,#542661);
    color: #fff
}

    .profile-achievements::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .2;
        background: radial-gradient(circle at 10% 20%,var(--sp-cyan),transparent 23%),radial-gradient(circle at 90% 75%,var(--sp-magenta),transparent 24%);
        animation: spAchievementGlow 9s ease-in-out infinite
    }

    .profile-achievements .sp-section-head {
        position: relative;
        z-index: 2
    }

    .profile-achievements .sp-kicker {
        color: #addcff
    }

    .profile-achievements .sp-section-head h2 {
        color: #fff
    }

    .profile-achievements .sp-section-head p {
        color: rgba(255,255,255,.68)
    }

.achievement-profile-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.profile-achievement-card {
    position: relative;
    min-height: 210px;
    padding: 22px 19px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    background: rgba(255,255,255,.065);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: background .35s,border-color .35s,box-shadow .35s
}

    .profile-achievement-card:hover {
        border-color: rgba(255,255,255,.24);
        background: rgba(255,255,255,.1);
        box-shadow: 0 24px 55px rgba(0,0,0,.18)
    }

    .profile-achievement-card > span {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 17px;
        background: rgba(255,255,255,.09);
        color: #d5e7ff;
        font-size: 25px;
        font-variation-settings: 'FILL' 1;
        animation: spIconFloat 3.6s ease-in-out infinite
    }

    .profile-achievement-card strong, .profile-achievement-card small {
        display: block
    }

    .profile-achievement-card strong {
        margin-top: 20px;
        color: #fff;
        font-size: 25px
    }

    .profile-achievement-card small {
        margin-top: 5px;
        color: rgba(255,255,255,.63);
        font-size: 10.5px;
        line-height: 1.7
    }

    .profile-achievement-card b {
        position: absolute;
        left: 11px;
        bottom: 4px;
        color: rgba(255,255,255,.07);
        font: 900 44px/1 system-ui
    }

.profile-schedule {
    background: linear-gradient(180deg,#f8faff,#fff)
}

.schedule-shell {
    display: grid;
    grid-template-columns: minmax(290px,.68fr) minmax(0,1.32fr);
    gap: 24px;
    align-items: start
}

.schedule-note {
    padding: 27px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 29px;
    background: linear-gradient(145deg,#071731,#173d75 58%,#703090 145%);
    color: #fff;
    box-shadow: 0 28px 75px rgba(8,29,66,.22)
}

    .schedule-note > .material-symbols-rounded {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        border-radius: 17px;
        background: rgba(255,255,255,.1);
        color: #d9c2ee;
        font-size: 27px;
        animation: spIconFloat 3.4s ease-in-out infinite
    }

    .schedule-note h3 {
        margin: 18px 0 8px;
        color: #fff;
        font-size: 22px
    }

    .schedule-note p {
        margin: 0;
        color: rgba(255,255,255,.67);
        font-size: 11.5px;
        line-height: 1.9
    }

.schedule-table-wrap {
    padding: 17px;
    border: 1px solid var(--sp-line);
    border-radius: 29px;
    background: #fff;
    box-shadow: 0 23px 65px rgba(20,49,93,.09);
    overflow-x: auto
}

.schedule-table {
    width: 100%;
    min-width: 650px;
    border-collapse: separate;
    border-spacing: 8px
}

    .schedule-table th {
        padding: 10px;
        color: #748299;
        font-size: 10px
    }

    .schedule-table td {
        height: 77px;
        padding: 11px;
        border: 1px solid var(--sp-line);
        border-radius: 14px;
        background: #f8faff;
        color: #52657f;
        font-size: 10px;
        line-height: 1.7
    }

        .schedule-table td strong {
            display: block;
            color: #152847;
            font-size: 11px
        }

        .schedule-table td.is-class {
            background: linear-gradient(145deg,#eef5ff,#f7edfa);
            border-color: rgba(112,48,144,.14)
        }

.profile-contact-cta {
    padding: 30px 0 90px;
    background: #fff
}

.profile-contact-box {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 27px;
    border: 1px solid rgba(64,112,176,.14);
    border-radius: 30px;
    background: linear-gradient(145deg,#fff,#f6f8ff);
    box-shadow: 0 25px 70px rgba(20,49,93,.1);
    overflow: hidden
}

    .profile-contact-box::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 230px;
        height: 230px;
        left: -95px;
        top: -110px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(160,48,128,.14),transparent 68%);
        animation: spAmbient 8s ease-in-out infinite
    }

.profile-contact-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    background: linear-gradient(145deg,var(--sp-blue),var(--sp-violet),var(--sp-magenta));
    color: #fff;
    font-size: 31px;
    font-variation-settings: 'FILL' 1;
    box-shadow: 0 16px 35px rgba(112,48,144,.24);
    animation: spIconFloat 3.5s ease-in-out infinite
}

.profile-contact-box h2 {
    margin: 0 0 6px;
    font-size: 25px
}

.profile-contact-box p {
    margin: 0;
    color: #6c7b91;
    font-size: 12px
}

.profile-contact-actions {
    display: flex;
    gap: 9px
}

@keyframes spHeroGrid {
    to {
        background-position: 0 0,0 0,156px 0
    }
}

@keyframes spPortraitFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-9px)
    }
}

@keyframes spLive {
    70% {
        box-shadow: 0 0 0 10px rgba(74,222,128,0)
    }
}

@keyframes spOrbit {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spBadgeFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-8px) rotate(4deg)
    }
}

@keyframes spIconFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-5px) rotate(2deg)
    }
}

@keyframes spGridMove {
    to {
        background-position: 48px 48px,48px 48px
    }
}

@keyframes spQuoteFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes spAchievementGlow {
    0%,100% {
        filter: hue-rotate(0);
        opacity: .2
    }

    50% {
        filter: hue-rotate(22deg);
        opacity: .3
    }
}

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

    50% {
        transform: translate3d(38px,25px,0)
    }
}

@media(max-width:1050px) {
    .profile-overview-grid, .schedule-shell {
        grid-template-columns: 1fr
    }

    .profile-photo-panel {
        max-width: 620px;
        width: 100%;
        margin: auto
    }

    .profile-details-grid {
        grid-template-columns: 1fr
    }

    .achievement-profile-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:900px) {
    .staff-hero-visual {
        left: -60px !important;
        opacity: .58;
        transform: translateY(-47%) scale(.8) !important
    }
}

@media(max-width:700px) {
    .sp-section {
        padding: 68px 0
    }

    .sp-section-head h2 {
        font-size: 34px
    }

    .staff-hero-visual {
        width: 205px !important;
        height: 225px !important;
        left: 50% !important;
        top: 95px !important;
        opacity: 1;
        transform: translateX(-50%) !important
    }

    .staff-portrait-card {
        inset: 9px 18px 13px;
        padding: 6px;
        border-radius: 27px
    }

        .staff-portrait-card img, .staff-portrait-card::after {
            border-radius: 21px
        }

        .staff-portrait-card::after {
            inset: 6px
        }

    .staff-portrait-status {
        right: 14px;
        left: 14px;
        bottom: 14px;
        font-size: 8px
    }

    .staff-visual-badge {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 21px
    }

    .profile-proof-grid {
        grid-template-columns: 1fr 1fr
    }

    .profile-overview-grid {
        gap: 28px
    }

    .profile-photo-panel {
        min-height: 440px;
        padding: 13px;
        border-radius: 30px
    }

        .profile-photo-panel > img {
            height: 414px;
            border-radius: 23px
        }

        .profile-photo-panel::after {
            inset: 13px;
            border-radius: 23px
        }

    .profile-quote {
        left: 8px;
        top: 28px
    }

    .achievement-profile-grid {
        grid-template-columns: 1fr
    }

    .profile-contact-box {
        grid-template-columns: 1fr;
        text-align: center
    }

    .profile-contact-icon {
        margin: auto
    }

    .profile-contact-actions {
        justify-content: center
    }
}

@media(max-width:430px) {
    .sp-section-head h2 {
        font-size: 30px
    }

    .profile-proof-grid {
        grid-template-columns: 1fr
    }

    .profile-photo-panel {
        min-height: 390px
    }

        .profile-photo-panel > img {
            height: 364px
        }

    .profile-quote {
        width: 155px
    }

    .profile-details-grid {
        gap: 13px
    }

    .profile-detail-card {
        padding: 21px;
        border-radius: 24px
    }

    .profile-contact-actions {
        display: grid;
        width: 100%
    }

    .profile-contact-btn {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {
    body.staff-profile-page .registration-hero-v12 *, body.staff-profile-page .staff-profile-main *, body.staff-profile-page .footer-v2 * {
        animation: none !important
    }
}

body.registration-generation-12 > .navbar, body.registration-generation-12 > .overlay, body.registration-generation-12 > .sidebar, body.registration-generation-12 > footer.legacy-footer {
    display: none !important
}

body.registration-generation-12 .hybrid-navbar {
    display: block
}

body.registration-generation-12 .hero {
    margin-top: 0
}
/* ===== Ashtu-inspired staff profile · school adaptation ===== */
body.staff-profile-page {
    --ap-ink: #071731;
    --ap-blue: #4070b0;
    --ap-violet: #703090;
    --ap-magenta: #a03080;
    --ap-cyan: #3bb8c8;
    --ap-green: #27b77d;
    --ap-gold: #efbf63;
    --ap-line: rgba(64,112,176,.14);
    background: #f5f7fc;
    color: var(--ap-ink)
}

.ashtu-profile-page {
    position: relative;
    padding: 155px 0 95px;
    background: radial-gradient(circle at 8% 11%,rgba(59,184,200,.11),transparent 24%),radial-gradient(circle at 92% 25%,rgba(112,48,144,.13),transparent 27%),linear-gradient(180deg,#f5f7fc,#fff 65%);
    overflow: hidden;
    isolation: isolate
}

    .ashtu-profile-page::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: 0;
        opacity: .55;
        background-image: linear-gradient(rgba(64,112,176,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(64,112,176,.034) 1px,transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom,#000,transparent 76%);
        animation: apGridMove 25s linear infinite
    }

    .ashtu-profile-page::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 480px;
        height: 480px;
        left: -250px;
        top: 320px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(160,48,128,.12),transparent 68%);
        animation: apAmbient 9s ease-in-out infinite
    }

.ap-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: #7b879a;
    font-size: 10.5px;
    font-weight: 800
}

    .ap-breadcrumb a {
        color: var(--ap-blue)
    }

    .ap-breadcrumb .material-symbols-rounded {
        font-size: 16px
    }

.ap-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    max-width: 1080px;
    margin-inline: auto;
    gap: 24px;
    align-items: start
}

.ap-main-column {
    display: grid;
    gap: 19px
}

.ap-profile-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap: 0;
    border: 1px solid rgba(64,112,176,.14);
    border-radius: 34px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 30px 90px rgba(20,49,93,.13);
    overflow: hidden
}

    .ap-profile-card::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 280px;
        height: 280px;
        left: -130px;
        top: -140px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(112,48,144,.13),transparent 68%);
        animation: apAmbient 8s ease-in-out infinite
    }

.ap-photo {
    position: relative;
    min-height: 430px;
    padding: 14px;
    background: linear-gradient(145deg,#eaf2ff,#f5eafa);
    overflow: hidden
}

    .ap-photo > img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 25px 25px 25px 8px;
        object-fit: cover;
        object-position: center top;
        box-shadow: 0 18px 45px rgba(20,49,93,.16)
    }

    .ap-photo::after {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 25px 25px 25px 8px;
        background: linear-gradient(180deg,transparent 55%,rgba(7,23,49,.75));
        pointer-events: none
    }

.ap-photo-status {
    position: absolute;
    z-index: 2;
    right: 29px;
    left: 29px;
    bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 900
}

.ap-online {
    display: flex;
    align-items: center;
    gap: 7px
}

    .ap-online i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 0 0 rgba(74,222,128,.42);
        animation: apLive 2s ease-out infinite
    }

.ap-photo-rank {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 11px;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(10px);
    font: 900 9px/1 system-ui
}

.ap-profile-info {
    padding: 30px 29px
}

.ap-profile-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}

.ap-verified-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(39,183,125,.17);
    border-radius: 999px;
    background: #effaf6;
    color: #278460;
    font-size: 9.5px;
    font-weight: 950
}

    .ap-verified-label .material-symbols-rounded {
        font-size: 17px;
        font-variation-settings: 'FILL' 1
    }

.ap-profile-actions {
    display: flex;
    gap: 7px
}

.ap-icon-action {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ap-line);
    border-radius: 12px;
    background: #fff;
    color: #63748c;
    cursor: pointer;
    transition: color .3s,border-color .3s,box-shadow .3s;
    transform: none !important
}

    .ap-icon-action:hover {
        color: var(--ap-violet);
        border-color: rgba(112,48,144,.3);
        box-shadow: 0 10px 25px rgba(112,48,144,.12)
    }

    .ap-icon-action .material-symbols-rounded {
        font-size: 19px
    }

.ap-profile-info h1 {
    margin: 17px 0 5px;
    font-size: clamp(31px,3.6vw,48px);
    line-height: 1.25;
    letter-spacing: -1px
}

.ap-profile-role {
    display: block;
    color: var(--ap-violet);
    font-size: 13px;
    font-weight: 900
}

.ap-rating-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px
}

.ap-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #9a6b24;
    font-size: 11px;
    font-weight: 950
}

    .ap-rating .material-symbols-rounded {
        color: #efb94f;
        font-size: 18px;
        font-variation-settings: 'FILL' 1;
        animation: apStarPulse 3s ease-in-out infinite
    }

.ap-reviews-link {
    color: #758399;
    font-size: 9.5px;
    font-weight: 800
}

.ap-bio {
    margin: 18px 0 0;
    color: #596b84;
    font-size: 12.5px;
    line-height: 2
}

.ap-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin-top: 20px
}

.ap-metric {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 9px;
    border: 1px solid var(--ap-line);
    border-radius: 15px;
    background: #f8faff
}

    .ap-metric > .material-symbols-rounded {
        width: 35px;
        height: 35px;
        display: grid;
        place-items: center;
        flex: 0 0 35px;
        border-radius: 11px;
        background: linear-gradient(145deg,#e8f5ff,#f6eafa);
        color: var(--ap-violet);
        font-size: 18px;
        animation: apIconFloat 3.4s ease-in-out infinite
    }

    .ap-metric strong, .ap-metric small {
        display: block
    }

    .ap-metric strong {
        font-size: 11px
    }

    .ap-metric small {
        margin-top: 2px;
        color: #8290a3;
        font-size: 8px
    }

.ap-skills {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 16px
}

    .ap-skills > span {
        padding: 6px 9px;
        border: 1px solid rgba(112,48,144,.11);
        border-radius: 999px;
        background: #f4f1fa;
        color: #654780;
        font-size: 9px;
        font-weight: 850
    }

.ap-tabs-card, .ap-content-card {
    border: 1px solid var(--ap-line);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(20,49,93,.075)
}

.ap-tabs-card {
    position: sticky;
    z-index: 12;
    top: 96px;
    display: flex;
    gap: 5px;
    padding: 7px;
    overflow-x: auto
}

.ap-tab {
    position: relative;
    isolation: isolate;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 0 13px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #718098;
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: color .3s
}

    .ap-tab::before, .ap-tab::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        width: 52%;
        height: 100%;
        background: linear-gradient(145deg,var(--ap-blue),var(--ap-violet),var(--ap-magenta));
        transition: transform .4s
    }

    .ap-tab::before {
        right: 0;
        transform: translateX(105%)
    }

    .ap-tab::after {
        left: 0;
        transform: translateX(-105%)
    }

    .ap-tab:hover, .ap-tab.is-active {
        color: #fff
    }

        .ap-tab:hover::before, .ap-tab:hover::after, .ap-tab.is-active::before, .ap-tab.is-active::after {
            transform: translateX(0)
        }

    .ap-tab .material-symbols-rounded {
        font-size: 17px
    }

.ap-content-card {
    padding: 27px
}

    .ap-content-card[hidden] {
        display: none
    }

.ap-content-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 21px
}

    .ap-content-heading > div {
        max-width: 660px
    }

    .ap-content-heading span {
        color: var(--ap-violet);
        font-size: 10px;
        font-weight: 950
    }

    .ap-content-heading h2 {
        margin: 7px 0 6px;
        font-size: 25px
    }

    .ap-content-heading p {
        margin: 0;
        color: #748299;
        font-size: 10.5px;
        line-height: 1.8
    }

    .ap-content-heading > .material-symbols-rounded {
        width: 49px;
        height: 49px;
        display: grid;
        place-items: center;
        flex: 0 0 49px;
        border-radius: 16px;
        background: linear-gradient(145deg,#eaf6ff,#f8eefa);
        color: var(--ap-violet);
        font-size: 24px;
        font-variation-settings: 'FILL' 1;
        animation: apIconFloat 3.5s ease-in-out infinite
    }

.ap-about-text {
    color: #566981;
    font-size: 12.5px;
    line-height: 2.1
}

.ap-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 20px
}

.ap-info-item {
    display: flex;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    background: #fafbfe
}

    .ap-info-item > .material-symbols-rounded {
        color: var(--ap-blue);
        font-size: 21px
    }

    .ap-info-item strong, .ap-info-item small {
        display: block
    }

    .ap-info-item strong {
        font-size: 10.5px
    }

    .ap-info-item small {
        margin-top: 4px;
        color: #7c899c;
        font-size: 8.7px;
        line-height: 1.6
    }

.ap-timeline {
    position: relative;
    display: grid;
    gap: 11px
}

    .ap-timeline::before {
        content: "";
        position: absolute;
        right: 20px;
        top: 12px;
        bottom: 12px;
        width: 2px;
        background: linear-gradient(var(--ap-blue),var(--ap-violet),var(--ap-magenta))
    }

.ap-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start
}

.ap-timeline-icon {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 5px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg,var(--ap-blue),var(--ap-violet));
    color: #fff;
    font-size: 16px
}

.ap-timeline-body {
    padding: 13px;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    background: #fafbfe
}

    .ap-timeline-body strong, .ap-timeline-body small {
        display: block
    }

    .ap-timeline-body strong {
        font-size: 11px
    }

    .ap-timeline-body small {
        margin-top: 4px;
        color: #79879a;
        font-size: 9px;
        line-height: 1.7
    }

.ap-schedule {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px
}

.ap-day {
    padding: 13px;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    background: #fafbfe
}

    .ap-day strong {
        display: block;
        font-size: 10.5px
    }

    .ap-day small {
        display: block;
        margin-top: 4px;
        color: #7c899c;
        font-size: 8.5px
    }

.ap-day-slots {
    display: grid;
    gap: 6px;
    margin-top: 11px
}

    .ap-day-slots span {
        padding: 7px;
        border-radius: 9px;
        background: #eef4ff;
        color: #536d90;
        font-size: 8.5px;
        font-weight: 850;
        text-align: center
    }

.ap-review-summary {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 25px;
    align-items: center;
    margin-bottom: 21px
}

.ap-review-score {
    text-align: center;
    padding: 20px;
    border: 1px solid var(--ap-line);
    border-radius: 20px;
    background: linear-gradient(145deg,#fffaf0,#fff)
}

    .ap-review-score strong {
        display: block;
        font-size: 44px;
        line-height: 1;
        color: #8e6423
    }

    .ap-review-score span {
        display: block;
        margin-top: 8px;
        color: #8b7b64;
        font-size: 9px
    }

.ap-review-bars {
    display: grid;
    gap: 8px
}

.ap-review-bar {
    display: grid;
    grid-template-columns: 60px 1fr 28px;
    gap: 8px;
    align-items: center;
    color: #78869a;
    font-size: 8.5px
}

    .ap-review-bar i {
        height: 6px;
        border-radius: 99px;
        background: #edf0f5;
        overflow: hidden
    }

        .ap-review-bar i::before {
            content: "";
            display: block;
            width: var(--bar);
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg,var(--ap-gold),var(--ap-magenta))
        }

.ap-testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.ap-testimonial {
    padding: 15px;
    border: 1px solid var(--ap-line);
    border-radius: 17px;
    background: #fafbfe
}

    .ap-testimonial p {
        margin: 0;
        color: #62738a;
        font-size: 9.5px;
        line-height: 1.8
    }

    .ap-testimonial strong {
        display: block;
        margin-top: 10px;
        font-size: 9px
    }

.ap-booking-card {
    position: sticky;
    top: 112px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 30px;
    background: linear-gradient(155deg,#071731,#143a70 58%,#5b286a);
    color: #fff;
    box-shadow: 0 35px 85px rgba(7,23,49,.26);
    overflow: hidden
}

    .ap-booking-card::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        left: -100px;
        top: -120px;
        border-radius: 50%;
        background: rgba(160,48,128,.17);
        filter: blur(12px);
        animation: apAmbient 8s ease-in-out infinite
    }

.ap-booking-inner {
    position: relative;
    z-index: 2;
    padding: 24px
}

.ap-booking-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

    .ap-booking-head span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #9be8c2;
        font-size: 9px;
        font-weight: 900
    }

        .ap-booking-head span i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #4ade80;
            animation: apLive 2s ease-out infinite
        }

    .ap-booking-head > .material-symbols-rounded {
        color: #f3d58a;
        font-size: 23px;
        animation: apIconFloat 3.2s ease-in-out infinite
    }

.ap-booking-card h2 {
    margin: 14px 0 6px;
    color: #fff;
    font-size: 22px
}

.ap-booking-card > div p, .ap-booking-inner > p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 10.5px;
    line-height: 1.8
}

.ap-booking-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 18px
}

.ap-booking-type {
    min-height: 43px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.68);
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    transition: background .3s,color .3s,border-color .3s
}

    .ap-booking-type.is-active {
        background: #fff;
        color: #17365f;
        border-color: #fff
    }

.ap-booking-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 900
}

    .ap-booking-section-title small {
        color: rgba(255,255,255,.45);
        font-size: 8px
    }

.ap-dates {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px
}

.ap-date {
    min-height: 59px;
    padding: 7px 4px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    font-family: inherit;
    cursor: pointer
}

    .ap-date strong, .ap-date small {
        display: block
    }

    .ap-date strong {
        font-size: 12px
    }

    .ap-date small {
        margin-top: 3px;
        font-size: 7.5px
    }

    .ap-date.is-active {
        background: linear-gradient(145deg,var(--ap-blue),var(--ap-magenta));
        border-color: rgba(255,255,255,.25);
        color: #fff;
        box-shadow: 0 10px 24px rgba(0,0,0,.16)
    }

.ap-time-slots {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px
}

.ap-time {
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.7);
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 900;
    cursor: pointer
}

    .ap-time:hover, .ap-time.is-active {
        background: #fff;
        color: #17365f;
        border-color: #fff
    }

.ap-book-button {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(145deg,#21c765,#11aa50);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 16px 35px rgba(10,177,79,.22);
    overflow: hidden
}

    .ap-book-button::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        right: -70%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
        transform: skewX(-18deg);
        animation: apButtonScan 4s ease-in-out infinite
    }

    .ap-book-button .bi {
        font-size: 20px
    }

.ap-book-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 11px;
    color: rgba(255,255,255,.45);
    font-size: 7.8px
}

    .ap-book-note .material-symbols-rounded {
        font-size: 14px;
        color: #9be8c2
    }

.ap-pulse-line {
    height: 30px;
    margin: 18px -24px -24px;
    opacity: .3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30' viewBox='0 0 240 30'%3E%3Cpath d='M0 15h45l7-10 8 20 9-15 7 5h164' fill='none' stroke='%239bdcff' stroke-width='2'/%3E%3C/svg%3E") repeat-x center/240px 30px;
    animation: apPulseLine 8s linear infinite
}

.ap-related {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ap-line)
}

.ap-related-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px
}

    .ap-related-head h2 {
        margin: 0;
        font-size: 22px
    }

    .ap-related-head a {
        color: var(--ap-violet);
        font-size: 9px;
        font-weight: 900
    }

.ap-related-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.ap-related-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--ap-line);
    border-radius: 15px;
    background: #fafbfe;
    transition: border-color .3s,box-shadow .3s
}

    .ap-related-card:hover {
        border-color: rgba(112,48,144,.28);
        box-shadow: 0 13px 30px rgba(20,49,93,.08)
    }

    .ap-related-card img {
        width: 49px;
        height: 49px;
        flex: 0 0 49px;
        border-radius: 14px;
        object-fit: cover
    }

    .ap-related-card strong, .ap-related-card small {
        display: block
    }

    .ap-related-card strong {
        font-size: 9.5px
    }

    .ap-related-card small {
        margin-top: 3px;
        color: #7a8799;
        font-size: 7.8px
    }

@keyframes apGridMove {
    to {
        background-position: 48px 48px,48px 48px
    }
}

@keyframes apAmbient {
    0%,100% {
        transform: translate3d(0,0,0) scale(1)
    }

    50% {
        transform: translate3d(38px,25px,0) scale(1.08)
    }
}

@keyframes apLive {
    70% {
        box-shadow: 0 0 0 9px rgba(74,222,128,0)
    }
}

@keyframes apIconFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-5px) rotate(2deg)
    }
}

@keyframes apStarPulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.13)
    }
}

@keyframes apButtonScan {
    0%,35% {
        right: -70%;
        opacity: 0
    }

    55% {
        opacity: 1
    }

    80%,100% {
        right: 130%;
        opacity: 0
    }
}

@keyframes apPulseLine {
    to {
        background-position: 240px center
    }
}

@media(max-width:1050px) {
    .ap-layout {
        grid-template-columns: 1fr
    }

    .ap-booking-card {
        position: relative;
        top: auto;
        max-width: 650px;
        width: 100%;
        margin: auto
    }

    .ap-profile-card {
        grid-template-columns: 280px minmax(0,1fr)
    }
}

@media(max-width:760px) {
    .ashtu-profile-page {
        padding-top: 125px
    }

    .ap-profile-card {
        grid-template-columns: 1fr
    }

    .ap-photo {
        min-height: 390px
    }

    .ap-profile-info {
        padding: 24px 19px
    }

    .ap-metrics {
        grid-template-columns: 1fr 1fr
    }

    .ap-tabs-card {
        top: 82px
    }

    .ap-content-card {
        padding: 20px
    }

    .ap-info-grid, .ap-testimonials {
        grid-template-columns: 1fr
    }

    .ap-schedule {
        grid-template-columns: 1fr 1fr
    }

    .ap-related-grid {
        grid-template-columns: 1fr
    }

    .ap-review-summary {
        grid-template-columns: 1fr
    }

    .ap-review-score {
        max-width: 190px;
        margin: auto
    }

    .ap-booking-inner {
        padding: 20px
    }

    .ap-pulse-line {
        margin-inline: -20px;
        margin-bottom: -20px
    }
}

@media(max-width:430px) {
    .ashtu-profile-page {
        padding-top: 112px
    }

    .ap-profile-card, .ap-booking-card, .ap-tabs-card, .ap-content-card {
        border-radius: 22px
    }

    .ap-photo {
        min-height: 335px;
        padding: 10px
    }

        .ap-photo::after {
            inset: 10px
        }

    .ap-profile-info h1 {
        font-size: 31px
    }

    .ap-profile-topline {
        align-items: flex-start
    }

    .ap-metrics {
        grid-template-columns: 1fr
    }

    .ap-tabs-card {
        top: 75px
    }

    .ap-tab {
        padding-inline: 10px
    }

        .ap-tab span:last-child {
            display: none
        }

    .ap-schedule {
        grid-template-columns: 1fr
    }

    .ap-dates {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .ap-time-slots {
        grid-template-columns: 1fr 1fr
    }
}
/* Markup bridge and refined presentation */
.ap-rating-row > strong {
    font-size: 15px
}

.ap-stars {
    color: #efb94f;
    font-size: 14px;
    letter-spacing: 1px;
    animation: apStarPulse 3s ease-in-out infinite
}

.ap-rating-row > a {
    color: #758399;
    font-size: 9.5px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px
}

.ap-metrics > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 9px;
    border: 1px solid var(--ap-line);
    border-radius: 15px;
    background: #f8faff
}

    .ap-metrics > div > .material-symbols-rounded {
        width: 35px;
        height: 35px;
        display: grid;
        place-items: center;
        flex: 0 0 35px;
        border-radius: 11px;
        background: linear-gradient(145deg,#e8f5ff,#f6eafa);
        color: var(--ap-violet);
        font-size: 18px;
        animation: apIconFloat 3.4s ease-in-out infinite
    }

.ap-metrics p {
    margin: 0
}

.ap-metrics strong, .ap-metrics small {
    display: block
}

.ap-metrics strong {
    font-size: 11px
}

.ap-metrics small {
    margin-top: 2px;
    color: #8290a3;
    font-size: 8px;
    line-height: 1.45
}

.ap-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px
}

    .ap-section-heading > .material-symbols-rounded {
        width: 49px;
        height: 49px;
        display: grid;
        place-items: center;
        flex: 0 0 49px;
        border-radius: 16px;
        background: linear-gradient(145deg,#eaf6ff,#f8eefa);
        color: var(--ap-violet);
        font-size: 24px;
        font-variation-settings: 'FILL' 1;
        animation: apIconFloat 3.5s ease-in-out infinite
    }

    .ap-section-heading small {
        color: var(--ap-violet);
        font-size: 9px;
        font-weight: 950
    }

    .ap-section-heading h2 {
        margin: 3px 0 0;
        font-size: 23px
    }

.ap-lead {
    margin: 0;
    color: #566981;
    font-size: 12.5px;
    line-height: 2.1
}

.ap-info-grid > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    background: #fafbfe
}

    .ap-info-grid > div > .material-symbols-rounded {
        color: var(--ap-blue);
        font-size: 21px
    }

.ap-info-grid p {
    margin: 0
}

.ap-info-grid strong, .ap-info-grid small {
    display: block
}

.ap-info-grid strong {
    font-size: 10.5px
}

.ap-info-grid small {
    margin-bottom: 4px;
    color: #7c899c;
    font-size: 8.7px
}

.ap-quote {
    position: relative;
    margin: 18px 0 0;
    padding: 17px 54px 17px 18px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg,#f0f6ff,#f8f0fa);
    color: #4f627a
}

    .ap-quote > .material-symbols-rounded {
        position: absolute;
        right: 17px;
        top: 16px;
        color: var(--ap-violet);
        font-size: 26px
    }

    .ap-quote p {
        margin: 0;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.9
    }

.ap-timeline article {
    position: relative;
    margin-right: 54px;
    padding: 14px;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    background: #fafbfe
}

    .ap-timeline article::before {
        content: "";
        position: absolute;
        right: -44px;
        top: 16px;
        width: 18px;
        height: 18px;
        border: 5px solid #fff;
        border-radius: 50%;
        background: linear-gradient(145deg,var(--ap-blue),var(--ap-magenta));
        box-shadow: 0 0 0 1px var(--ap-line)
    }

.ap-timeline time {
    color: var(--ap-violet);
    font-size: 8.5px;
    font-weight: 950
}

.ap-timeline h3 {
    margin: 4px 0;
    font-size: 11px
}

.ap-timeline p {
    margin: 0;
    color: #79879a;
    font-size: 9px;
    line-height: 1.8
}

.ap-week-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px;
    margin-top: 18px
}

    .ap-week-grid > div {
        padding: 14px;
        border: 1px solid var(--ap-line);
        border-radius: 16px;
        background: #fafbfe;
        text-align: center
    }

    .ap-week-grid strong, .ap-week-grid span {
        display: block
    }

    .ap-week-grid strong {
        font-size: 11px
    }

    .ap-week-grid span {
        margin-top: 6px;
        color: #657a96;
        font-size: 9px
    }

.ap-review-score span {
    color: #efb94f;
    font-size: 13px;
    letter-spacing: 1px
}

.ap-review-score small {
    display: block;
    margin-top: 6px;
    color: #8b7b64;
    font-size: 8px
}

.ap-review-bars p {
    display: grid;
    grid-template-columns: 68px 1fr 25px;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: #78869a;
    font-size: 8.5px
}

.ap-review-bars i {
    height: 6px;
    border-radius: 99px;
    background: #edf0f5;
    overflow: hidden
}

.ap-review-bars b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--ap-gold),var(--ap-magenta))
}

.ap-review-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

    .ap-review-list article {
        padding: 15px;
        border: 1px solid var(--ap-line);
        border-radius: 17px;
        background: #fafbfe
    }

    .ap-review-list header {
        display: flex;
        align-items: center;
        gap: 9px
    }

        .ap-review-list header > span {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            background: linear-gradient(145deg,var(--ap-blue),var(--ap-violet));
            color: #fff;
            font-weight: 900
        }

        .ap-review-list header div {
            flex: 1
        }

        .ap-review-list header strong, .ap-review-list header small {
            display: block
        }

        .ap-review-list header strong {
            font-size: 9px
        }

        .ap-review-list header small {
            color: #8290a3;
            font-size: 7.5px
        }

        .ap-review-list header > b {
            color: #efb94f;
            font-size: 9px
        }

    .ap-review-list article > p {
        margin: 11px 0 0;
        color: #62738a;
        font-size: 9.5px;
        line-height: 1.9
    }

.ap-related {
    padding: 24px;
    border: 1px solid var(--ap-line);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(20,49,93,.075)
}

.ap-related-grid {
    grid-template-columns: 1fr 1fr
}

    .ap-related-grid > a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border: 1px solid var(--ap-line);
        border-radius: 15px;
        background: #fafbfe;
        transition: border-color .3s,box-shadow .3s
    }

        .ap-related-grid > a:hover {
            border-color: rgba(112,48,144,.28);
            box-shadow: 0 13px 30px rgba(20,49,93,.08)
        }

    .ap-related-grid img {
        width: 55px;
        height: 55px;
        flex: 0 0 55px;
        border-radius: 15px;
        object-fit: cover
    }

    .ap-related-grid a > span {
        flex: 1
    }

    .ap-related-grid strong, .ap-related-grid small {
        display: block
    }

    .ap-related-grid strong {
        font-size: 10px
    }

    .ap-related-grid small {
        margin-top: 3px;
        color: #7a8799;
        font-size: 8px
    }

    .ap-related-grid a > i {
        color: var(--ap-violet);
        font-size: 18px
    }

.ap-booking-head {
    justify-content: flex-start;
    align-items: center
}

    .ap-booking-head > .material-symbols-rounded {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        flex: 0 0 46px;
        border-radius: 15px;
        background: rgba(255,255,255,.09)
    }

    .ap-booking-head small {
        color: #9be8c2;
        font-size: 8.5px;
        font-weight: 900
    }

    .ap-booking-head h2 {
        margin: 3px 0 0
    }

.ap-booking-field {
    margin: 18px 0 0;
    padding: 0;
    border: 0
}

    .ap-booking-field legend {
        margin-bottom: 9px;
        color: #fff;
        font-size: 9px;
        font-weight: 900
    }

.ap-type-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

    .ap-type-switch button {
        min-height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 9px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
        background: rgba(255,255,255,.07);
        color: rgba(255,255,255,.68);
        font-family: inherit;
        font-size: 9px;
        font-weight: 900;
        cursor: pointer
    }

        .ap-type-switch button.is-active {
            background: #fff;
            color: #17365f
        }

    .ap-type-switch .material-symbols-rounded {
        font-size: 16px
    }

.ap-date-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px
}

    .ap-date-grid button {
        min-height: 65px;
        padding: 6px 3px;
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 12px;
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.7);
        font-family: inherit;
        cursor: pointer
    }

    .ap-date-grid small, .ap-date-grid strong, .ap-date-grid span {
        display: block
    }

    .ap-date-grid small, .ap-date-grid span {
        font-size: 7px
    }

    .ap-date-grid strong {
        margin: 2px 0;
        font-size: 14px
    }

    .ap-date-grid button.is-active {
        background: linear-gradient(145deg,var(--ap-blue),var(--ap-magenta));
        border-color: rgba(255,255,255,.25);
        color: #fff
    }

.ap-time-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px
}

    .ap-time-grid button {
        min-height: 38px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 10px;
        background: rgba(255,255,255,.055);
        color: rgba(255,255,255,.7);
        font-family: inherit;
        font-size: 8.5px;
        font-weight: 900;
        cursor: pointer
    }

        .ap-time-grid button:hover, .ap-time-grid button.is-active {
            background: #fff;
            color: #17365f
        }

.ap-book-button i {
    margin-right: auto;
    font-size: 17px
}

.ap-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    color: rgba(255,255,255,.5)
}

    .ap-secure-note > .material-symbols-rounded {
        color: #9be8c2;
        font-size: 16px
    }

    .ap-secure-note p {
        margin: 0 !important
    }

    .ap-secure-note strong, .ap-secure-note small {
        display: block
    }

    .ap-secure-note strong {
        color: rgba(255,255,255,.75);
        font-size: 8px
    }

    .ap-secure-note small {
        margin-top: 2px;
        font-size: 7px
    }

@media(max-width:760px) {
    .ap-week-grid {
        grid-template-columns: 1fr 1fr
    }

    .ap-review-list {
        grid-template-columns: 1fr
    }

    .ap-section-heading h2 {
        font-size: 20px
    }

    .ap-related-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:430px) {
    .ap-week-grid {
        grid-template-columns: 1fr
    }

    .ap-date-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .ap-time-grid {
        grid-template-columns: 1fr 1fr
    }

    .ap-breadcrumb {
        white-space: nowrap;
        overflow: hidden
    }

    .ap-profile-role {
        font-size: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .ashtu-profile-page::before, .ashtu-profile-page::after, .ap-online i, .ap-metric > .material-symbols-rounded, .ap-metrics > div > .material-symbols-rounded, .ap-content-heading > .material-symbols-rounded, .ap-section-heading > .material-symbols-rounded, .ap-booking-head > .material-symbols-rounded, .ap-booking-head span i, .ap-book-button::after, .ap-pulse-line {
        animation: none !important
    }
}