html {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    padding: 0;
    margin: 0;
    padding-top: 80px;
    background-color: rgb(14 12 21) !important;
    color: white !important;
    font-family: "Sansation", sans-serif;
    overflow: visible;
}

body.vibrant-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#main-content {
    flex: 1 0 auto;
}

.site-footer,
.corporate-footer {
    flex-shrink: 0;
    margin-top: auto;
}



/* Ensure navbar always stays on top of all content */
header {
    position: relative;
    z-index: 99999 !important;
}

nav,
nav.navbar {
    position: relative;
    z-index: 99999 !important;
}

.navbar-blur {
    background-color: rgba(28, 27, 41, 0.4);
    /* semi-transparent dark */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

.button-box {
    position: relative;
    width: 100px;
    height: 45px;
    margin-left: 25px;
    border-radius: 10px;
    background: linear-gradient(to right,
            #00aaa7,
            #7f42a7,
            #6600c5,
            #1f2b9c,
            #0099ff,
            #00aaa7);
    background-size: 200%;
    animation: animationGradient 2.5s linear infinite;
    clip-path: polygon(0 0,
            80% 0%,
            100% 20%,
            100% 80%,
            100% 99%,
            0 100%,
            0% 80%,
            0% 20%);
}

.navbar-nav .nav-link {
    color: white !important;
}

.navbar-nav .nav-link {
    position: relative;
    color: white !important;
    padding: 5px 12px;
    border-radius: 8px;
    transition: color 0.3s ease;
    z-index: 0;
}

/* Create the animated gradient border on hover */
.navbar-nav .nav-link:hover {
    color: white !important;
}

.navbar-nav .nav-link:hover::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(to right,
            #00aaa7,
            #7f42a7,
            #6600c5,
            #1f2b9c,
            #0099ff,
            #00aaa7);
    background-size: 200%;
    animation: animationGradient 2.5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

/* Keyframes for gradient animation */
@keyframes animationGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.nav-item {
    margin: 0 25px;
}

@media (max-width: 1399.98px) {
    .nav-item {
        margin: 0 10px;
    }

    .navbar-nav .nav-link {
        padding: 5px 8px;
        font-size: 0.97rem;
    }

    .navbar-nav .nav-link.btn {
        padding: 0.5rem 1rem !important;
    }
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.18rem rgba(0, 255, 231, 0.25);
}

@keyframes animationGradient {
    to {
        background-position: 200%;
    }
}

.hero {
    min-height: 100vh;
    padding: 4rem 1rem;
    /* background-color: #0d0d1a; */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
    text-align: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: -15vh;
    left: -25vw;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(0, 255, 231, 0.35) 0%, transparent 70%);
    filter: blur(12vw);
    z-index: 0;
}

/* Bottom-Right Circle - Responsive */
.hero::after {
    content: '';
    position: absolute;
    bottom: -20vh;
    right: -15vw;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(0, 140, 255, 0.35) 0%, transparent 70%);
    filter: blur(12vw);
    z-index: 0;
}

/* Background Images */
.hero-blur-image {
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.hero-rings-image {
    z-index: 0;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.hero-rings-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    filter: brightness(1.35) saturate(1.2) drop-shadow(0 0 24px rgba(0, 255, 255, 0.35));
    opacity: 0.95;
}

.hero-rings-image1 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -9999 !important;
    opacity: 0.8;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    display: block !important;
}

/* Keyframe animation for the rings to spin in place */
@keyframes rotate360 {
    from {
        /* This is crucial: Maintain the centering translate while rotating */
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        /* This ensures it spins around its own center */
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Corrected Hero Icons Image Styling */
.hero-icons-image {
    z-index: 1;
    position: absolute;
    top: 8%;
    left: 0;
    transform: translateX(-50%);
    width: 100%;
    object-fit: cover;
    will-change: transform;
}


/* Main Content Layers - Ensure these are always on top */
.text-center,
.hero-image-box,
.hero h4,
.companies-list {
    position: relative;
    z-index: 3;
}

/* Existing styles for content */
.display-4 {
    color: white;
    margin-bottom: 0.5rem;
    width: 60vw;

}

.display-5 {
    color: white;
    margin-bottom: 0.5rem;

}

.hero h1 {
    text-shadow: 0 0 10px black;
    font-weight: bolder;
}

.hero h3 {
    color: #b0b0b0;
    margin-top: 1rem;
    line-height: 1.4;
}

.custom-clip-button {
    border: none;
    background-color: white;
    color: black;
    border-radius: 10px;
    width: 140px;
    height: 50px;
    font-weight: bold;
    cursor: pointer;
    clip-path: polygon(0 0,
            80% 0%,
            100% 20%,
            100% 80%,
            100% 100%,
            0 100%,
            0% 80%,
            0% 20%);
    transition: 0.3s;
    margin-top: 1.5rem;
}

.custom-clip-button:hover {
    opacity: 0.8;
    color: #7e00d2;
}

.hero-image-box {
    width: 100%;
    max-width: 1000px;
    height: 550px;
    border-radius: 50px;
    background: linear-gradient(to right,
            #00aaa7,
            #7f42a7,
            #6600c5,
            #1f2b9c,
            #0099ff,
            #00aaa7);
    background-size: 200%;
    animation: animationGradient 2.5s linear infinite;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

@keyframes animationGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.robot-box {
    width: 90%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
}

.robot-box img {
    object-fit: cover;
    object-position: center bottom;
    width: 100%;
    height: 100%;
}

.hero h4 {
    margin-top: 40px;
    color: #b0b0b0;
}

.companies-list p {
    color: #e0e0e0;
    font-size: 0.9em;
    margin-top: 5px;
}

/* --- Media Queries for Responsive Adjustments --- */

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991.98px) {
    .hero-blur-image {
        opacity: 0.6;
    }

    .hero-rings-image {
        height: 50vh;
        left: 50%;
        top: 22%;
    }

    .hero-rings-image img {
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        max-width: none;
        height: auto;
        transform: translate(-50%, -50%);
        mix-blend-mode: screen;
        filter: brightness(1.35) saturate(1.2) drop-shadow(0 0 24px rgba(0, 255, 255, 0.35));
        opacity: 0.95;
    }


    .hero {
        overflow: hidden;
    }

    .hero-icons-image {
        top: 5%;
        left: 2%;
        width: 90%;
        max-width: 900px;
    }

    .hero-image-box {
        height: 400px;
        max-width: 800px;
    }

    .display-4 {
        font-size: 3rem;
        width: 75vw;
    }

    .hero h3 {
        font-size: 1.25rem;
    }

    .custom-clip-button {
        width: 150px;
        height: 45px;
        font-size: 0.9rem;
    }

    .element2 {
        width: 20%;
        left: -10%;
    }
}

/* Small devices (phones, 576px and up) */
@media (max-width: 1199.98px) {
    .navbar-blur .container-fluid {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .navbar-collapse {
        margin-top: 0.65rem;
        padding: 0.75rem;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(12, 14, 28, 0.95);
    }

    .navbar-nav {
        gap: 0.2rem;
    }

    .nav-item {
        margin: 0;
    }

    .navbar-nav .nav-link {
        width: 100%;
        justify-content: center;
    }

    .navbar-nav .nav-link.btn {
        margin-left: 0 !important;
        margin-top: 0.35rem;
    }
}

@media (max-width: 767.98px) {

    .hero {
        padding: 2rem 0.5rem;
        /* overflow: hidden; */
    }

    .hero-blur-image {
        opacity: 0.4;
    }

    .hero-rings-image {
        height: 55vh;
        display: block;
        top: 40%;
        left: 50%;
        opacity: 0.7;
    }

    .hero-rings-image img {
        width: 150%;
    }

    .display-4 {
        font-size: 2.2rem;
        width: 90vw;
    }

    .hero h3 {
        font-size: 0.9rem;
    }

    .hero-image-box {
        height: 250px;
        border-radius: 20px;
    }

    .robot-box img {
        object-fit: contain;
    }

    .element2 {
        width: 18%;
        left: -8%;
        top: 80%;
    }

    .hero h4 {
        font-size: 0.85rem;
        margin-top: 20px;
    }

    .companies-list .col-6 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .companies-list p {
        font-size: 0.75em;
    }
}

/* Extra small devices (less than 576px) */
@media (max-width: 575.98px) {
    .hero-blur-image {
        opacity: 0.2;
    }

    /* Bottom-Right Circle - Responsive */
    .hero::after {
        bottom: -5vh;
        right: 25vw;
        width: 50vw;
        height: 50vh;
    }


    .roadmap-section::after {
        bottom: -5vh;
        right: -5vw;
        width: 25vw;
        height: 25vh;
    }

    .generative-section::after {
        content: '';
        position: absolute;
        top: -8vh;
        left: -25vw;
        width: 100vw;
        height: 100vw;
        filter: blur(12vw);
        background: radial-gradient(circle, rgba(0, 140, 255, 0.35) 0%, transparent 70%);
        z-index: 0;
    }

    .generative-section::before {
        content: '';
        background: radial-gradient(circle, rgba(0, 255, 231, 0.35) 0%, transparent 70%);
        position: absolute;
        bottom: 29vh;
        right: 27vw;
        width: 50vw;
        height: 50vh;
        filter: blur(12vw);
        z-index: 0;
    }

    .bg-gradient-center {
        top: -10vh;
        left: -10vw;
        width: 80vw;
        height: 80vw;
    }

    .hero-rings-image {
        display: block;
        height: 50vh;
        top: 40%;
        left: 50%;
        opacity: 0.65;
    }

    .hero-rings-image img {
        width: 165%;
    }

    .hero-icons-image {
        width: 100%;
        top: 10%;
        left: 0;
        transform: none;
        box-sizing: border-box;
    }

    .display-4 {
        font-size: 1.8rem;
        width: 90vw;
    }

    .hero h3 {
        font-size: 0.8rem;
    }

    .custom-clip-button {
        width: 90px;
        height: 38px;
        font-size: 0.75rem;
    }

    .hero-image-box {
        height: 200px;
        border-radius: 15px;
    }

    .element2 {
        width: 15%;
        left: -5%;
        top: 85%;
    }

    .companies-list .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767.98px) {
    .hero-cta-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-group .btn {
        width: 100%;
    }

    .hero-highlights {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.45rem;
    }

    .hero-highlights span {
        font-size: 0.82rem;
    }

    .features-card p {
        font-size: 1rem;
    }

    .explore-more {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .explore-more a {
        white-space: normal;
        text-align: left;
    }
}

.companies-list p {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

.generative-section {
    position: relative;
}

.generative-section p {
    font-size: 1.5rem;
    /* font-weight: 700; */
    text-transform: capitalize;
}

.info-box {
    border: 2px solid #00ffe7;
    border-radius: 10px;
    padding: 25px 18px;
    color: #00ffe7;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    /* box-shadow: 15px 15px 15px 15px white; */
    transition: background-color 0.3s ease, transform 0.3s ease;
    background-color: rgba(28, 27, 41, 0.4);
    /* semi-transparent dark */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.info-box:hover {
    background-color: #222;
    transform: scale(1.02);
}

.rocket-img {
    max-height: 250px;
    width: auto;
    animation: floatRocket 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s ease;
    /* Smooth rotation */
    transform-origin: center center;
}

/* Float Animation */
@keyframes floatRocket {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}


/* Turquoise central glow */
.bg-gradient-center {
    position: absolute;
    top: 50vh;
    left: 50vw;
    width: 50vw;
    height: 60vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 255, 231, 0.3) 0%, transparent 70%);
    filter: blur(120px);
    z-index: 0;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .rocket-img {
        max-height: 180px;
        margin: 20px 0;
    }


    .info-box {
        text-align: center;
        font-size: 0.95rem;
    }
}

.features-section {
    /* background-color: #0c0a12; */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* ✅ Ensures heading aligns center */
    padding: 4rem 1rem;
    margin: 25px 0;
}

.features-section h1 {
    font-size: 2.5rem;
    max-width: 100%;
    color: white;
    margin-bottom: 2rem;
    /* ✅ Spacing below heading */
    font-weight: bold;
}

.features-card {
    position: relative;
    width: 100%;
    max-width: 350px;
    /* ✅ Optional max width for consistency */
    height: 300px;
    /* ✅ Reduced from 400px */
    background-color: rgb(17, 14, 27);
    border-radius: 20px;
    clip-path: polygon(0 0,
            85% 0,
            100% 20%,
            100% 80%,
            100% 100%,
            0 99%,
            0% 80%,
            0% 20%);
    overflow: hidden;
    padding: 1rem;
    margin: auto;
}

.features-card h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: bolder;
}

.features-card p {
    font-size: 1.2rem;
    color: white;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* ✅ Optional: Make height auto on small screens */
@media (max-width: 768px) {
    .features-card {
        height: auto;
    }
}

.explore-more {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.explore-more img {
    height: 110px;
    width: auto;
    max-width: 45%;
    object-fit: contain;
    object-position: bottom;
}

.explore-more a {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.features-back-img {
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.features-card:hover .features-back-img {
    opacity: 0.1;
}

.chatApp-section {
    color: white;
}

.chatApp-section p {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tall-card {
    min-height: 300px;
}

@media (min-width: 768px) {
    .tall-card {
        min-height: 200px;
    }
}

.icon-box {
    background-image: linear-gradient(to right, #a962ff, #5b1f9c);
    min-width: 60px;
    text-align: center;
}

.pricing-section {
    min-height: 600px;
    overflow: hidden;
    /* background-color: #0c0a12; */
}

.pricing-section .pricing-img-box {
    height: 100%;
    min-height: 400px;
}

.pricing-section .pricing-img-box img:nth-child(2) {
    z-index: 1;
    /* Add animation for floating effect */
    animation: float 3s ease-in-out infinite;
    /* Adjust duration and timing as needed */
}

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

    50% {
        transform: translateY(-10px);
        /* Moves up 10px */
    }

    100% {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .pricing-section {
        min-height: 400px;
    }

    .pricing-section .pricing-img-box img:nth-child(2) {
        max-height: 250px;
        margin-top: 2%;
        animation: float 2.5s ease-in-out infinite;
        /* Slightly faster float on smaller screens */
    }
}

@media (max-width: 480px) {
    .pricing-section {
        min-height: 300px;
    }

    .pricing-section .pricing-img-box img:nth-child(2) {
        max-height: 150px;
        margin-top: 0%;
        animation: float 2s ease-in-out infinite;
        /* Faster float on mobile */
    }
}

:root {
    --blue-purple-gradient: linear-gradient(90deg,
            #00bfff,
            #8a2be2);
    /* Deep Sky Blue to Blue Violet */
    --blue-purple-gradient-hover: linear-gradient(90deg,
            #00aadd,
            #7a1be1);
    /* Slightly darker for hover */
    --blue-purple-glow: rgba(0, 191, 255, 0.5), rgba(138, 43, 226, 0.5);
    /* For glows */
}

/* Testimonials Section */
#testimonials-section {
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    border-radius: 10px;
    border: 1px solid transparent;
    position: relative;
}

#testimonials-section h2 {
    font-size: 2.8em;
    margin-bottom: 50px;
    font-weight: bolder;
    text-transform: capitalize;
}

.testimonial-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testimonial-wrapper {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.testimonial-card {
    flex: 0 0 50%;
    /* Ensures each card takes full width */
    min-width: 50%;
    background-color: rgb(30, 28, 45);
    /* Darker card background */
    border: 1px solid;
    /* Solid border for individual cards */
    border-image: var(--blue-purple-gradient) 1;
    /* Gradient border for cards */
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2),
        0 4px 15px rgba(138, 43, 226, 0.2);
    /* Blue & Purple card glow */
    text-align: left;
    box-sizing: border-box;
}

.testimonial-card p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: white;
}

.testimonial-author {
    font-weight: bold;
    background: var(--blue-purple-gradient);
    /* Gradient for author name */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1em;
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.3), 0 0 5px rgba(138, 43, 226, 0.3);
    /* Subtle author glow */
}

.testimonial-controls {
    margin-top: 30px;
}

.testimonial-controls button {
    background: var(--blue-purple-gradient);
    /* Gradient for button background */
    color: rgb(14, 12, 21);
    /* Dark text on button */
    border: none;
    padding: 12px 25px;
    margin: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.4),
        0 0 10px rgba(138, 43, 226, 0.4);
    /* Blue & Purple button glow */
}

.testimonial-controls button:hover {
    background: var(--blue-purple-gradient-hover);
    /* Slightly darker gradient on hover */
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.7),
        0 0 15px rgba(138, 43, 226, 0.7);
    /* Stronger blue & purple glow on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #testimonials-section h2 {
        font-size: 2em;
    }

    .testimonial-card {
        padding: 20px;
    }

    .testimonial-controls button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    #testimonials-section {
        padding: 30px 15px;
    }

    #testimonials-section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    .testimonial-card p {
        font-size: 1em;
    }

    .testimonial-author {
        font-size: 1em;
    }

    .testimonial-controls button {
        margin: 0 5px;
    }
}

/* Training section: compact cards with distinct accents */
.roadmap-section {
    position: relative;
}

.roadmap-section::before {
    content: '';
    position: absolute;
    top: -18vh;
    left: -12vw;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(circle, rgba(0, 255, 231, 0.38) 0%, transparent 72%);
    filter: blur(10vw);
    z-index: 0;
}

.roadmap-section::after {
    content: '';
    position: absolute;
    bottom: -40vh;
    right: -6vw;
    width: 54vw;
    height: 54vw;
    background: radial-gradient(circle, rgba(130, 60, 255, 0.34) 0%, transparent 72%);
    filter: blur(10vw);
    z-index: 0;
}

.roadmap-section > .container {
    position: relative;
    z-index: 1;
}

.training-heading {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: #e9f3ff;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-bottom: 0.8rem;
}

.training-grid {
    align-items: stretch;
}

.training-grid > [class*="col"] {
    display: flex;
}

.training-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(148deg, rgba(9, 18, 34, 0.94), rgba(27, 14, 46, 0.88));
    border: 1px solid rgba(255, 255, 255, 0.14);
    width: 100%;
    border-radius: 20px;
    padding: 1.2rem 1.15rem;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.training-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 255, 231, 0.35);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.4);
}

.training-card:focus {
    outline: 2px solid rgba(70, 235, 255, 0.75);
    outline-offset: 2px;
}

.training-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.95rem;
}

.training-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.training-card--logic    .training-icon { background: linear-gradient(135deg, #00d1ff, #0090cc); color: #011a2a; }
.training-card--iot      .training-icon { background: linear-gradient(135deg, #22d3a7, #0e9b7a); color: #011a14; }
.training-card--ai       .training-icon { background: linear-gradient(135deg, #7f8cff, #4b55cc); color: #06082a; }
.training-card--arduino  .training-icon { background: linear-gradient(135deg, #ffb14a, #e07a10); color: #1a0a00; }
.training-card--security .training-icon { background: linear-gradient(135deg, #f87171, #c0392b); color: #1a0404; }
.training-card--raspberry .training-icon { background: linear-gradient(135deg, #9b8cff, #6b5acc); color: #06042a; }
.training-card--mobile   .training-icon { background: linear-gradient(135deg, #34d399, #059669); color: #011a0e; }
.training-card--comms    .training-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); color: #02051a; }

.training-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(200, 220, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    padding: 0.18rem 0.65rem;
}

.training-title {
    margin: 0 0 0.55rem;
    color: #f2f7ff;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    text-transform: none;
    text-shadow: none;
}

.training-copy {
    margin: 0;
    color: rgba(214, 225, 244, 0.76);
    font-size: 0.93rem;
    line-height: 1.6;
}

.training-syllabus {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    border-radius: inherit;
    padding: 1rem;
    background: linear-gradient(160deg, rgba(6, 15, 32, 0.96), rgba(16, 26, 48, 0.95));
    border: 1px solid rgba(130, 222, 255, 0.35);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.training-syllabus h4 {
    margin: 0 0 0.5rem;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8df6ff;
}

.training-syllabus ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.35rem;
}

.training-syllabus li {
    color: rgba(224, 238, 255, 0.9);
    font-size: 0.84rem;
    line-height: 1.45;
}

@media (min-width: 768px) {
    .training-card:hover .training-syllabus,
    .training-card:focus .training-syllabus,
    .training-card:focus-within .training-syllabus {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

.tech-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 1rem;
}

.tech-icons i {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(214, 226, 245, 0.8);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease, border-color 0.3s ease;
}

.tech-icons i:hover {
    transform: scale(1.18);
    color: #00ffe7;
    border-color: rgba(0, 255, 231, 0.48);
    text-shadow: 0 0 10px rgba(0, 255, 231, 0.45);
}

.training-cta-btn {
    border-radius: 12px !important;
    clip-path: none !important;
    padding: 0.8rem 2.2rem;
    border: 1px solid rgba(0, 255, 231, 0.55) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #00c9b8 0%, #007ea8 100%);
    box-shadow: 0 8px 28px rgba(0, 210, 195, 0.35);
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.training-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 38px rgba(0, 210, 195, 0.52) !important;
}

.training-card--logic    { border-top: 3px solid #00d1ff; background: linear-gradient(148deg, rgba(0, 209, 255, 0.1) 0%, rgba(9, 18, 34, 0.93) 60%); }
.training-card--iot      { border-top: 3px solid #22d3a7; background: linear-gradient(148deg, rgba(34, 211, 167, 0.1) 0%, rgba(9, 18, 34, 0.93) 60%); }
.training-card--ai       { border-top: 3px solid #7f8cff; background: linear-gradient(148deg, rgba(127, 140, 255, 0.1) 0%, rgba(9, 18, 34, 0.93) 60%); }
.training-card--arduino  { border-top: 3px solid #ffb14a; background: linear-gradient(148deg, rgba(255, 177, 74, 0.1)  0%, rgba(9, 18, 34, 0.93) 60%); }
.training-card--security { border-top: 3px solid #f87171; background: linear-gradient(148deg, rgba(248, 113, 113, 0.1) 0%, rgba(9, 18, 34, 0.93) 60%); }
.training-card--raspberry{ border-top: 3px solid #9b8cff; background: linear-gradient(148deg, rgba(155, 140, 255, 0.1) 0%, rgba(9, 18, 34, 0.93) 60%); }
.training-card--mobile   { border-top: 3px solid #34d399; background: linear-gradient(148deg, rgba(52, 211, 153, 0.1)  0%, rgba(9, 18, 34, 0.93) 60%); }
.training-card--comms    { border-top: 3px solid #60a5fa; background: linear-gradient(148deg, rgba(96, 165, 250, 0.1)  0%, rgba(9, 18, 34, 0.93) 60%); }

.proof-section {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.proof-section::before {
    content: '';
    position: absolute;
    top: -8vh;
    right: -6vw;
    width: min(620px, 52vw);
    height: min(620px, 52vw);
    background: radial-gradient(circle, rgba(0, 173, 255, 0.3) 0%, transparent 72%);
    filter: blur(6.2vw);
    z-index: 0;
}

.proof-section::after {
    content: '';
    position: absolute;
    bottom: -10vh;
    left: -7vw;
    width: min(580px, 48vw);
    height: min(580px, 48vw);
    background: radial-gradient(circle, rgba(0, 255, 199, 0.22) 0%, transparent 72%);
    filter: blur(6.2vw);
    z-index: 0;
}

.proof-section .container {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    padding: clamp(1.3rem, 2.2vw, 2rem);
    border: 1px solid rgba(119, 213, 255, 0.22);
    background: linear-gradient(160deg, rgba(8, 18, 43, 0.78), rgba(12, 19, 52, 0.76));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.proof-heading {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    color: #f2f8ff;
    font-weight: 800;
    margin-bottom: 0.65rem;
    letter-spacing: 0.01em;
}

.proof-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(154, 211, 255, 0.2);
    background: linear-gradient(155deg, rgba(12, 26, 54, 0.88), rgba(20, 17, 51, 0.9));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    padding: 1.15rem 1.05rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.proof-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 255, 231, 0), rgba(0, 255, 231, 0.8), rgba(0, 255, 231, 0));
    opacity: 0.8;
}

.proof-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 255, 231, 0.45);
    background: linear-gradient(155deg, rgba(13, 32, 65, 0.92), rgba(24, 20, 59, 0.94));
    box-shadow: 0 24px 36px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 255, 231, 0.14);
}

.proof-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.7rem;
    color: #01243f;
    background: linear-gradient(135deg, #42f2dc, #56a8ff);
    box-shadow: 0 8px 18px rgba(40, 220, 214, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.proof-card h3 {
    color: #f5f9ff;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.52rem;
}

.proof-card p {
    color: rgba(214, 228, 247, 0.88);
    font-size: 0.94rem;
    line-height: 1.58;
    margin-bottom: 0.82rem;
}

.proof-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: #72ecff;
    font-size: 0.87rem;
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: 3px;
}

.proof-card a::after {
    content: '\f178';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.proof-card a:hover {
    color: #b9fbff;
}

.proof-card a:hover::after {
    transform: translateX(2px);
}

.proof-rubric {
    border: 1px solid rgba(134, 222, 255, 0.24);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(10, 22, 44, 0.82), rgba(13, 24, 56, 0.8));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.proof-rubric h3 {
    color: #f0f8ff;
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
}

.proof-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.proof-pills span {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(128, 233, 255, 0.36);
    color: rgba(225, 246, 255, 0.95);
    font-size: 0.83rem;
    background: rgba(0, 163, 214, 0.16);
}

.founder-page {
    position: relative;
    padding: clamp(5rem, 8vw, 6.25rem) 0 clamp(3rem, 6vw, 5rem);
}

.founder-wrap {
    border-radius: 24px;
    border: 1px solid rgba(132, 220, 255, 0.26);
    background: linear-gradient(160deg, rgba(8, 18, 42, 0.8), rgba(16, 22, 56, 0.82));
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
    padding: clamp(1.2rem, 2.5vw, 2rem);
}

.founder-top {
    margin-bottom: 1.6rem;
}

.founder-title {
    color: #f2f8ff;
    font-weight: 800;
    font-size: clamp(1.9rem, 3vw, 2.65rem);
    margin-bottom: 0.45rem;
}

.founder-subtitle {
    color: rgba(201, 224, 247, 0.88);
    font-size: 1rem;
    margin: 0;
}

.founder-card,
.founder-side {
    border-radius: 18px;
    border: 1px solid rgba(154, 216, 255, 0.22);
    background: linear-gradient(155deg, rgba(10, 24, 51, 0.9), rgba(20, 18, 50, 0.9));
    padding: 1.15rem 1.05rem;
}

.founder-card h2,
.founder-side h3 {
    color: #f6f9ff;
    font-size: 1.26rem;
    margin-bottom: 0.75rem;
}

.founder-card p {
    color: rgba(212, 228, 246, 0.9);
    line-height: 1.72;
    margin-bottom: 0.75rem;
}

.founder-card p:last-child {
    margin-bottom: 0;
}

.founder-side ul {
    margin: 0 0 1rem;
    padding-left: 1rem;
}

.founder-side li {
    color: rgba(214, 231, 248, 0.9);
    line-height: 1.6;
    margin-bottom: 0.35rem;
}

.founder-quote {
    border-radius: 14px;
    border: 1px solid rgba(95, 229, 255, 0.3);
    background: rgba(0, 173, 215, 0.12);
    padding: 0.85rem;
    margin-bottom: 1rem;
}

.founder-quote p {
    color: rgba(230, 247, 255, 0.95);
    margin: 0 0 0.5rem;
    line-height: 1.55;
}

.founder-quote span {
    color: #8eeeff;
    font-weight: 700;
    font-size: 0.9rem;
}

.founder-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (max-width: 767.98px) {
    .founder-page {
        padding-top: 5rem;
    }

    .founder-wrap {
        border-radius: 18px;
        padding: 1rem 0.9rem;
    }

    .founder-title {
        font-size: 1.7rem;
    }

    .founder-card h2,
    .founder-side h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 991.98px) {
    .training-card {
        min-height: 260px;
    }

    .proof-card {
        min-height: 100%;
    }
}

@media (max-width: 767.98px) {
    .training-heading {
        font-size: 1.6rem;
    }

    .training-card {
        min-height: auto;
        padding: 1.05rem 1rem;
    }

    .proof-section .container {
        border-radius: 18px;
        padding: 1rem;
    }

    .proof-heading {
        font-size: 1.72rem;
    }

    .proof-card {
        padding: 1rem 0.9rem;
    }

    .proof-card p {
        font-size: 0.9rem;
    }

    .training-syllabus {
        display: block;
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-top: 0.8rem;
        border-radius: 12px;
        padding: 0.75rem 0.8rem;
    }

    .training-syllabus h4 {
        font-size: 0.78rem;
        margin-bottom: 0.35rem;
    }

    .training-syllabus li {
        font-size: 0.78rem;
    }

    .proof-rubric {
        padding: 1rem;
    }

    .proof-pills span {
        font-size: 0.78rem;
    }
}

footer {
    width: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    color: #fff;
}

.footer-logo {
    max-width: 200px;
    height: auto;
}

.footer-divider {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 15px;
    padding-right: 15px;
}

footer .box-icons {
    gap: 15px;
    display: flex;
}

footer .box-icons a {
    color: #fff;
    font-size: 18px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

footer .box-icons a:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

@media (max-width: 767.98px) {
    .footer-divider {
        border-left: none;
        padding: 10px 0;
    }

    .footer-logo {
        max-width: 100px;
    }

    footer .box-icons {
        justify-content: center;
    }

    footer .box-icons a {
        font-size: 22px;
        padding: 8px;
    }
}


/* Auto Animate */

.autoDisplay {
    animation: autoDisplayAnimate;
    animation-timeline: view();
}

@keyframes autoDisplayAnimate {
    from {
        filter: blur(10px);
        transform: translateY(-200px) scale(0.5);
    }

    50% {
        filter: blur(0px);
        transform: translateY(0) scale(1);
    }
}

/* Fade Effect */

.fadeInLeft {
    opacity: 1;
    transform: translateX(0) scale(1);
    animation: fadeInLeftAnimate 0.8s ease-out forwards;
}

@keyframes fadeInLeftAnimate {
    0% {
        opacity: 0;
        transform: translateX(-500px) scale(0.2);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}

.fadeInRight {
    opacity: 1;
    transform: translateX(0) scale(1);
    animation: fadeInRightAnimate 0.8s ease-out forwards;
}

@keyframes fadeInRightAnimate {
    0% {
        opacity: 0;
        transform: translateX(500px) scale(0.2);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}

/* AutoBlur */

.autoBlur {
    animation: autoBlurAnimate linear both;
    animation-timeline: view();
}

@keyframes autoBlurAnimate {
    0% {
        filter: blur(40px);
    }

    30%,
    70% {
        filter: blur(0);
        opacity: 1;
    }

    100% {
        filter: blur(40px);
        opacity: 0;
    }
}

/* Fixed Action Buttons - Always Visible */
#whatsappBtn,
#chatbotBtn {
    position: fixed;
    z-index: 9998;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

/* Chatbot Button Animations */
@keyframes jiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

@keyframes robotWave {
    0% {
        opacity: 0;
        transform: translate(-30px, 20px) scale(0.3);
    }
    20% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    70% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(30px, -20px) scale(0.3);
    }
}

@keyframes handWave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

.robot-wave {
    position: absolute;
    bottom: 60px;
    right: 25px;
    font-size: 24px;
    animation: robotWave 2s ease-in-out forwards;
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.robot-wave i {
    display: inline-block;
    animation: handWave 0.5s ease-in-out infinite;
    transform-origin: right bottom;
}

#chatbotBtn:not(.chat-active) {
    animation: jiggle 0.6s ease-in-out infinite;
}

/* Confirmation Modal */
.confirmation-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(9, 20, 40, 0.98), rgba(15, 30, 50, 0.98));
    border: 2px solid rgba(0, 255, 195, 0.5);
    border-radius: 20px;
    padding: 40px;
    z-index: 99999;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: popupSlideIn 0.4s ease-out;
    max-width: 400px;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes popupSlideOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

.confirmation-popup.closing {
    animation: popupSlideOut 0.3s ease-in forwards;
}

.confirmation-popup-icon {
    font-size: 48px;
    color: #00ffc3;
    margin-bottom: 16px;
    animation: checkmark 0.6s ease-in-out;
}

@keyframes checkmark {
    0% { transform: scale(0) rotate(-45deg); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1) rotate(0); }
}

.confirmation-popup-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.confirmation-popup-subtext {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 8px;
}

#whatsappBtn {
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #0d1f2d, #1a3a52);
    border: 2px solid rgba(0, 255, 195, 0.4);
    color: #00ffc3;
    text-decoration: none !important;
}

#whatsappBtn i,
#whatsappBtn:hover,
#whatsappBtn:focus,
#whatsappBtn:active {
    text-decoration: none !important;
}

#whatsappBtn:hover {
    background: linear-gradient(135deg, #1a3a52, #0d1f2d);
    border-color: #00ffc3;
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 255, 195, 0.5);
}

#chatbotBtn {
    bottom: 100px;
    right: 30px;
    background: linear-gradient(135deg, #0d2a52, #1a3a7a);
    border: 2px solid rgba(0, 200, 255, 0.4);
    color: #00c8ff;
    overflow: visible;
}

#chatbotBtn:hover {
    background: linear-gradient(135deg, #1a3a7a, #0d2a52);
    border-color: #00c8ff;
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 200, 255, 0.5);
}

/* Chatbox Styling */
#chatbox {
    position: fixed;
    bottom: 110px;
    right: 100px;
    width: 380px;
    max-height: 550px;
    background: linear-gradient(145deg, 
        rgba(9, 20, 40, 0.95),
        rgba(15, 30, 50, 0.95));
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 255, 195, 0.3);
    padding: 16px;
    z-index: 9999;
    display: none;
    flex-direction: column;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
}

/* Header */
#chatbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 255, 195, 0.15), rgba(0, 200, 255, 0.15));
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 16px;
    color: #00ffc3;
    border: 1px solid rgba(0, 255, 195, 0.3);
}

/* Close button */
#closeChatbox {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#closeChatbox:hover {
    color: #00ffc3;
    transform: rotate(90deg);
}

/* FAQ Buttons */
#faqButtons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.faq-btn {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.1), rgba(0, 255, 195, 0.1));
    border: 1px solid rgba(0, 255, 195, 0.3);
    color: #e8f4f8 !important;
    padding: 10px 12px !important;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: left;
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.faq-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 195, 0.2), rgba(0, 200, 255, 0.2));
    border-color: #00ffc3;
    color: #00ffc3;
    transform: translateX(4px);
}

/* Chat messages container */
#chatbox-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
    max-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-message {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 82%;
    word-break: break-word;
    animation-duration: 0.28s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.bot-message {
    background: linear-gradient(135deg, rgba(0, 255, 195, 0.15), rgba(0, 200, 255, 0.1));
    color: #c9fff1;
    border-left: 3px solid #00ffc3;
    align-self: flex-start;
    margin-right: auto;
    animation-name: bubbleInLeft;
}

.user-message {
    background: linear-gradient(135deg, rgba(100, 150, 200, 0.2), rgba(50, 100, 150, 0.2));
    color: #c8e6f5;
    text-align: left;
    border-right: 3px solid #00b3ff;
    align-self: flex-end;
    margin-left: auto;
    animation-name: bubbleInRight;
}

@keyframes bubbleInRight {
    from {
        opacity: 0;
        transform: translateX(18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bubbleInLeft {
    from {
        opacity: 0;
        transform: translateX(-18px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

#chatInput {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 195, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

#chatInput::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#chatInput:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #00ffc3;
    box-shadow: 0 0 8px rgba(0, 255, 195, 0.3);
}

/* Scrollbar styling */
#faqButtons::-webkit-scrollbar,
#chatbox-messages::-webkit-scrollbar {
    width: 6px;
}

#faqButtons::-webkit-scrollbar-track,
#chatbox-messages::-webkit-scrollbar-track {
    background: rgba(0, 255, 195, 0.05);
    border-radius: 10px;
}

#faqButtons::-webkit-scrollbar-thumb,
#chatbox-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 195, 0.3);
    border-radius: 10px;
}

#faqButtons::-webkit-scrollbar-thumb:hover,
#chatbox-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 195, 0.5);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #whatsappBtn,
    #chatbotBtn {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    #whatsappBtn {
        bottom: 25px;
        right: 25px;
    }

    #chatbotBtn {
        bottom: 90px;
        right: 25px;
    }

    #chatbox {
        bottom: 100px;
        right: 15px;
        left: 15px;
        width: auto;
        max-height: 60vh;
    }

    .robot-wave {
        bottom: 52px;
        right: 8px;
        font-size: 22px;
    }
}

.slider-wrapper {
    width: 100%;
    position: relative;
    margin-top: 120px;
}

.slide-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: max-content;
    animation-name: scroll;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.slide {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    width: 80px;
    height: auto;
    object-fit: contain;
}

@keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    }

    100% {
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    }
}

/* Message thread styles are defined in the primary chatbot section above. */

.contact-section {
    position: relative;
    padding: 20px;
    max-width: 600px;
    margin: auto;
    text-align: center;
    background-color: rgb(20, 20, 20);
    border-radius: 15px;
}

.contact-section .bg-gradient-center {
    top: 25vh;
    left: 45vw;
}

.contact-title {
    font-size: 2.5rem;
    color: #00ffff;
    margin: 40px 0;
    padding: 15px 0;
}

.contact-subtitle {
    font-size: 1rem;
    color: #aaa;
    margin-bottom: 40px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group {
    position: relative;
}

.contact-input,
.contact-textarea {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 2px solid #00ffff99;
    border-radius: 8px;
    font-size: 1.2em;
    color: #ffffff;
    transition: border-color 0.3s, background 0.3s;
}

.contact-input:focus,
.contact-textarea:focus {
    border-color: #00ffff;
    outline: none;
}

.contact-label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    transition: all 0.2s ease;
    padding: 0 4px;
    font-size: 1.2rem;
}

.contact-input:focus+.contact-label,
.contact-textarea:focus+.contact-label,
.contact-input:not(:placeholder-shown)+.contact-label,
.contact-textarea:not(:placeholder-shown)+.contact-label {
    top: -10px;
    left: 12px;
    font-size: 0.75em;
    color: #00ffff;
}

.contact-button {
    background: #00ffff;
    color: #0f0f1a;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-button:hover {
    background: #00ffffb2;
}

.contact-status {
    font-size: 0.9em;
    margin-top: 10px;
    color: lightgreen;
}

.map-container {
    width: 100%;
    height: 150px;
}

/* Responsive Enhancements for All Elements */

/* Base styles remain unchanged in original style.css */

/* Hamburger menu styles */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger span {
    height: 3px;
    width: 25px;
    background: white;
    margin: 4px 0;
    border-radius: 2px;
}

.mobile-nav {
    display: none;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 1000;
}

.mobile-nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 18px;
}

.mobile-nav.show {
    display: flex;
}

/* 2026 Homepage Visual Refresh */
body.vibrant-shell {
    background: radial-gradient(circle at 12% 0%, rgba(0, 255, 231, 0.08), transparent 36%),
                radial-gradient(circle at 88% 8%, rgba(127, 66, 167, 0.14), transparent 34%),
                #0e0c15 !important;
}

body.vibrant-shell .navbar-blur {
    background: rgba(9, 12, 29, 0.68);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.22);
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

body.vibrant-shell .navbar-blur .container-fluid {
    padding-left: clamp(1rem, 2.3vw, 2rem);
    padding-right: clamp(1rem, 2.3vw, 2rem);
}

body.vibrant-shell .navbar-brand {
    margin-left: 0.15rem;
}

body.vibrant-shell .navbar-brand img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 231, 0.35));
}

body.vibrant-shell .navbar-nav .nav-link {
    font-size: 1.05rem;
    font-weight: 600;
    color: #d8deef !important;
}

body.vibrant-shell .hero {
    min-height: 92vh;
    padding-top: 7rem;
}

body.vibrant-shell .hero::before {
    background: radial-gradient(circle, rgba(0, 255, 231, 0.48) 0%, transparent 70%);
    filter: blur(10vw);
}

body.vibrant-shell .hero::after {
    background: radial-gradient(circle, rgba(110, 0, 220, 0.38) 0%, transparent 70%);
    filter: blur(10vw);
}

body.vibrant-shell .hero-heading {
    max-width: 1080px;
    background: linear-gradient(145deg, rgba(14, 28, 52, 0.34), rgba(28, 16, 56, 0.28));
    border: 1px solid rgba(215, 228, 255, 0.28);
    border-radius: 28px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    padding: 2rem 1.6rem !important;
}

body.vibrant-shell .hero h1.display-4 {
    width: min(95vw, 1020px);
    font-size: clamp(2.35rem, 5vw, 4.25rem);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #f7fbff;
    font-family: "Sansation", "Segoe UI", sans-serif;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

body.vibrant-shell .button-box2 .btn,
body.vibrant-shell .hero .btn {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(135deg, rgba(0, 255, 231, 0.17), rgba(127, 66, 167, 0.2));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.vibrant-shell .button-box2 .btn:hover,
body.vibrant-shell .hero .btn:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 255, 231, 0.55);
}

body.vibrant-shell .info-box {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(0, 255, 231, 0.08), rgba(17, 14, 27, 0.72));
    color: #f2f7ff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
    border-radius: 14px;
}

body.vibrant-shell .info-box:hover {
    border-color: rgba(0, 255, 231, 0.45);
    transform: translateY(-2px);
}

body.vibrant-shell .features-section {
    padding-top: 5rem;
    padding-bottom: 4rem;
}

body.vibrant-shell .features-card {
    background: linear-gradient(160deg, rgba(7, 21, 32, 0.95), rgba(23, 16, 43, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
    border-radius: 20px;
}

body.vibrant-shell .features-card h2 {
    color: #f7fbff;
    font-size: 1.42rem;
}

body.vibrant-shell .features-card p {
    color: rgba(232, 237, 246, 0.86);
    font-size: 1rem;
}

body.vibrant-shell .explore-more a {
    color: #7af7ff;
}

body.vibrant-shell .roadmap-section .row {
    background: linear-gradient(135deg, rgba(8, 26, 40, 0.5), rgba(34, 22, 60, 0.54));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 1.3rem 1rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

body.vibrant-shell .roadmap-section p {
    color: rgba(230, 235, 245, 0.86);
    font-size: 1.08rem;
}

body.vibrant-shell .tech-icons i {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: inset 0 0 12px rgba(0, 255, 231, 0.08);
}

body.vibrant-shell #testimonials-section {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(9, 20, 35, 0.7), rgba(30, 16, 49, 0.65));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
    padding: 2.2rem 1.4rem;
}

/* ═══════════════════════════════════════════════
   TESTIMONIALS — full redesign
═══════════════════════════════════════════════ */

/* Section wrapper */
body.vibrant-shell #testimonials-section {
    position: relative;
    padding: 5rem 0 4rem;
    overflow: hidden;
    contain: layout style paint;
    background:
        radial-gradient(120% 90% at 18% 72%, rgba(28, 92, 255, 0.20) 0%, rgba(0, 0, 0, 0) 62%),
        radial-gradient(120% 90% at 84% 18%, rgba(255, 42, 158, 0.20) 0%, rgba(0, 0, 0, 0) 62%),
        linear-gradient(145deg, rgba(9, 20, 46, 0.94), rgba(24, 16, 50, 0.92));
}

/* Ambient background glow blob */
body.vibrant-shell .testi-bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 50% at 15% 50%, rgba(0,255,231,0.13) 0%, transparent 70%),
        radial-gradient(ellipse 60% 55% at 85% 40%, rgba(127,66,167,0.17) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0, 120, 255, 0.1) 0%, transparent 70%);
    z-index: 0;
}

body.vibrant-shell .testi-heading {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #f0f6ff;
    margin-top: 0.5rem;
    margin-bottom: 0.4rem;
}

/* Stage — clips the sliding track */
body.vibrant-shell .testi-stage {
    position: relative;
    max-width: 1220px;
    margin: 0 auto;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

/* Single or empty testimonial — center it, no grab cursor */
body.vibrant-shell .testi-stage--single {
    cursor: default;
    overflow: visible;
}
body.vibrant-shell .testi-stage--single .testi-track--single {
    display: flex;
    justify-content: center;
    transform: none !important;
    transition: none !important;
}
body.vibrant-shell .testi-stage--single .testi-slide {
    flex: 0 0 auto;
    width: min(420px, 90vw);
}

body.vibrant-shell .testi-stage::before,
body.vibrant-shell .testi-stage::after {
    content: none;
}

body.vibrant-shell .testi-stage::before {
    left: 0;
    background: none;
}

body.vibrant-shell .testi-stage::after {
    right: 0;
    background: none;
}

/* Track — slides horizontally */
body.vibrant-shell .testi-track {
    display: flex;
    gap: 1rem;
    transform: translateX(calc(-1 * var(--testi-track-shift, 0px)));
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
}

body.vibrant-shell .testi-stage.is-dragging .testi-track {
    transition: none;
}

body.vibrant-shell .testi-stage.is-track-animating .testi-track {
    will-change: transform, opacity;
}

body.vibrant-shell .testi-stage.is-shifting-next .testi-track {
    transform: translateX(calc((-1 * var(--testi-track-shift, 0px)) - ((var(--testi-card-w, 420px) + 1rem) / 2)));
    opacity: 0.78;
}

body.vibrant-shell .testi-stage.is-shifting-prev .testi-track {
    transform: translateX(calc((-1 * var(--testi-track-shift, 0px)) + ((var(--testi-card-w, 420px) + 1rem) / 2)));
    opacity: 0.78;
}

body.vibrant-shell .testi-stage.is-entering-next .testi-track,
body.vibrant-shell .testi-stage.is-entering-prev .testi-track {
    transition: none;
    opacity: 0.78;
}

body.vibrant-shell .testi-stage.is-entering-next .testi-track {
    transform: translateX(calc((-1 * var(--testi-track-shift, 0px)) + ((var(--testi-card-w, 420px) + 1rem) / 2)));
}

body.vibrant-shell .testi-stage.is-entering-prev .testi-track {
    transform: translateX(calc((-1 * var(--testi-track-shift, 0px)) - ((var(--testi-card-w, 420px) + 1rem) / 2)));
}

body.vibrant-shell .testi-stage.is-mobile-shifting-next .testi-track {
    transform: translateX(calc(-1 * (var(--testi-card-w, 420px) * 0.18)));
    opacity: 0.8;
}

body.vibrant-shell .testi-stage.is-mobile-shifting-prev .testi-track {
    transform: translateX(calc(var(--testi-card-w, 420px) * 0.18));
    opacity: 0.8;
}

body.vibrant-shell .testi-stage.is-mobile-entering-next .testi-track,
body.vibrant-shell .testi-stage.is-mobile-entering-prev .testi-track {
    transition: none;
    opacity: 0.8;
}

body.vibrant-shell .testi-stage.is-mobile-entering-next .testi-track {
    transform: translateX(calc(var(--testi-card-w, 420px) * 0.18));
}

body.vibrant-shell .testi-stage.is-mobile-entering-prev .testi-track {
    transform: translateX(calc(-1 * (var(--testi-card-w, 420px) * 0.18)));
}

body.vibrant-shell .testi-slide {
    flex: 0 0 var(--testi-card-w, 420px);
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
}

/* The card itself */
body.vibrant-shell .testi-card {
    background: linear-gradient(145deg, rgba(8,18,34,0.92), rgba(20,10,36,0.9));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,255,231,0.0);
    opacity: 0.72;
    transform: scale(0.965);
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

body.vibrant-shell .testi-card.is-active {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(0,255,231,0.22);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(0,255,231,0.06);
}

body.vibrant-shell .testi-card[role="button"] {
    cursor: pointer;
}

body.vibrant-shell .testi-card[role="button"]:focus-visible {
    outline: 2px solid rgba(44, 240, 213, 0.85);
    outline-offset: 3px;
}

body.vibrant-shell .testi-card-hitarea {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

body.vibrant-shell .testi-card-hitarea:focus-visible {
    outline: 2px solid rgba(44, 240, 213, 0.85);
    outline-offset: -4px;
    border-radius: 24px;
}

/* Media (top) */
body.vibrant-shell .testi-media,
body.vibrant-shell .testi-no-media {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

body.vibrant-shell .testi-media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 12, 26, 0.9);
}

body.vibrant-shell .testi-no-media {
    height: 280px;
}

/* Decorative header for cards without a photo/video */
body.vibrant-shell .testi-no-media {
    background: linear-gradient(135deg, rgba(0,255,231,0.08) 0%, rgba(127,66,167,0.14) 50%, rgba(8,18,50,0.4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

body.vibrant-shell .testi-no-media-icon {
    font-size: 7rem;
    line-height: 1;
    color: rgba(0,255,231,0.18);
    font-family: Georgia, serif;
    user-select: none;
    margin-top: 1rem;
}

body.vibrant-shell .testi-media::after,
body.vibrant-shell .testi-no-media::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(8,18,34,0.92));
    pointer-events: none;
}

body.vibrant-shell .testi-video-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4;
}

body.vibrant-shell .testi-video-badge__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 16, 40, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32), 0 0 24px rgba(0, 255, 231, 0.18);
    backdrop-filter: blur(8px);
    font-size: 1.35rem;
}

body.vibrant-shell .testi-video-badge__icon i {
    margin-left: 3px;
}

body.vibrant-shell .testi-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.4s ease;
}

body.vibrant-shell .testi-media-img:hover {
    transform: scale(1.04);
}

/* Stars */
body.vibrant-shell .testi-stars {
    padding: 1.4rem 1.8rem 0.4rem;
    font-size: 1.1rem;
    color: #f0c040;
    letter-spacing: 0.12em;
}

body.vibrant-shell .testi-card:not(.testi-card:has(.testi-media)) .testi-stars {
    padding-top: 1.8rem;
}

/* Message */
body.vibrant-shell .testi-message {
    padding: 0.4rem 1.8rem 1.4rem;
    font-size: 1.05rem;
    line-height: 1.72;
    color: rgba(218, 230, 252, 0.9);
    font-style: italic;
    margin: 0;
    border: none;
    quotes: none;
}

/* Author row */
body.vibrant-shell .testi-author-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 86px;
    padding: 0 1.8rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: 0.3rem;
}

body.vibrant-shell .testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,255,231,0.3), rgba(127,66,167,0.4));
    border: 1px solid rgba(0,255,231,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: #00ffe7;
    flex-shrink: 0;
    overflow: hidden;
}

body.vibrant-shell .testi-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.vibrant-shell .testi-name {
    font-weight: 750;
    font-size: 1.08rem;
    line-height: 1.2;
    color: #c8e4ff;
    letter-spacing: 0.01em;
}

/* Arrow buttons — floated on sides */
body.vibrant-shell .testi-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(5, 16, 40, 0.86);
    border: 1px solid rgba(0, 255, 231, 0.55);
    color: #e9fbff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(9px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42), 0 0 18px rgba(0, 255, 231, 0.22);
}

body.vibrant-shell .testi-arrow:hover {
    background: rgba(0, 255, 231, 0.2);
    border-color: rgba(0, 255, 231, 0.85);
    transform: translateY(-50%) scale(1.08);
    color: #00ffe7;
}

body.vibrant-shell .testi-arrow--prev { left: 10px; }
body.vibrant-shell .testi-arrow--next { right: 10px; }

/* Dot indicators */
body.vibrant-shell .testi-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.8rem;
}

body.vibrant-shell .testi-dot-btn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}

body.vibrant-shell .testi-dot-btn.is-active {
    background: #00ffe7;
    width: 24px;
    border-radius: 4px;
    transform: none;
}

@media (max-width: 767.98px) {
    body.vibrant-shell .testi-stage { max-width: 100%; }
    body.vibrant-shell .testi-track { transform: translateX(0); justify-content: center; }
    body.vibrant-shell .testi-stage::before,
    body.vibrant-shell .testi-stage::after {
        display: none;
    }
    body.vibrant-shell .testi-arrow {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }
    body.vibrant-shell .testi-arrow--prev {
        left: max(6px, calc(50% - var(--testi-card-w, 420px) / 2 - 52px));
    }
    body.vibrant-shell .testi-arrow--next {
        right: max(6px, calc(50% - var(--testi-card-w, 420px) / 2 - 52px));
    }
    body.vibrant-shell .testi-message { font-size: 0.95rem; }
}

@media (max-width: 575.98px) {
    body.vibrant-shell .testi-track {
        gap: 0.75rem;
    }

    body.vibrant-shell .testi-card {
        min-height: 440px;
    }

    body.vibrant-shell .testi-media,
    body.vibrant-shell .testi-no-media {
        height: 230px;
    }

    body.vibrant-shell .testi-card {
        min-height: 420px;
    }
}

@media (max-width: 991.98px) {
    body,
    body.vibrant-shell,
    body.vibrant-shell .hero,
    body.vibrant-shell .generative-section,
    body.vibrant-shell .features-section,
    body.vibrant-shell .roadmap-section,
    body.vibrant-shell #testimonials-section,
    body.vibrant-shell .slider-heading,
    body.vibrant-shell .form-toggle-section {
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }
}

body.vibrant-shell .slider-heading h1 {
    color: #f3f8ff;
}

body.vibrant-shell .slider-heading {
    position: relative;
}

body.vibrant-shell .slider-heading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: 35vh;
    background: radial-gradient(ellipse, rgba(0, 255, 231, 0.1) 0%, rgba(90, 30, 180, 0.1) 50%, transparent 80%);
    filter: blur(8vw);
    pointer-events: none;
    z-index: 0;
}

body.vibrant-shell .slider-heading > * {
    position: relative;
    z-index: 1;
}

body.vibrant-shell .contact-shell .form-container {
    background: linear-gradient(145deg, rgba(0, 40, 52, 0.65), rgba(28, 14, 58, 0.68));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
    border-radius: 20px;
    padding: 2.4rem 2rem;
    max-width: none;
}

body.vibrant-shell .contact-shell .form-container .form-title {
    text-shadow: none;
    color: #f0f6ff;
}

body.vibrant-shell .contact-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Panel defaults for tabbed contact section */
body.vibrant-shell #form-section #panel-contact.contact-form-container {
    display: flex;
    visibility: visible;
    opacity: 1;
}

body.vibrant-shell #form-section #panel-feedback.contact-form-container {
    display: none;
}

body.vibrant-shell .contact-form-container .form-title {
    width: 100%;
    text-align: center;
    margin: 0 auto 1.8rem;
}

body.vibrant-shell .contact-form-container .contact-form {
    width: min(100%, 560px);
    margin: 0 auto;
}

body.vibrant-shell .contact-input,
body.vibrant-shell .contact-textarea {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(4, 13, 26, 0.58);
}

body.vibrant-shell .contact-input:focus,
body.vibrant-shell .contact-textarea:focus {
    border-color: rgba(0, 255, 231, 0.62);
    box-shadow: 0 0 0 3px rgba(0, 255, 231, 0.12);
}

@media (max-width: 767.98px) {
    body.vibrant-shell .contact-input,
    body.vibrant-shell .contact-textarea {
        font-size: 1rem;
        padding: 12px 14px;
    }

    body.vibrant-shell .contact-label {
        font-size: 1rem;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    body.vibrant-shell .hero {
        justify-content: flex-start;
        min-height: auto;
        padding-top: 0.9rem;
        padding-bottom: 1.8rem;
    }

    body.vibrant-shell .hero-heading {
        max-width: 96%;
        border-radius: 22px;
        padding: 1.2rem 0.85rem !important;
    }

    body.vibrant-shell .hero h1.display-4 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.13;
    }

    body.vibrant-shell .roadmap-section .row {
        padding: 1rem 0.8rem;
    }
}

/* ── Hero Copy Upgrades ── */
.hero-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(233, 241, 255, 0.94);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50px;
    padding: 0.34rem 1.05rem;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: clamp(1.03rem, 1.55vw, 1.34rem);
    color: rgba(230, 237, 250, 0.9);
    max-width: 980px;
    margin: 1rem auto 0;
    line-height: 1.62;
    font-weight: 400;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-cta-group .btn {
    clip-path: none !important;
    border-radius: 8px !important;
    padding: 0.78rem 1.7rem;
    font-size: 1.03rem;
    font-weight: 700;
}

.hero-cta-group .btn:first-child {
    background: rgba(8, 12, 24, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
    color: #ffffff !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.hero-cta-group .btn:first-child:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3) !important;
}

.hero-cta-group .btn + .btn {
    background: rgba(8, 12, 24, 0.24) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    color: #f4f8ff !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.hero-cta-group .btn + .btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
}

.hero-highlights {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.hero-highlights span {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(239, 244, 255, 0.9);
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    letter-spacing: 0.01em;
}

.hero-highlights span + span::before {
    content: '•';
    margin: 0 0.55rem;
    color: rgba(235, 242, 255, 0.6);
}

/* ── Section Kickers & Subtitles ── */
.section-kicker {
    display: inline-block;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #00ffe7;
    background: rgba(0, 255, 231, 0.1);
    border: 1px solid rgba(0, 255, 231, 0.28);
    border-radius: 50px;
    padding: 0.28rem 0.9rem;
    margin-bottom: 0.75rem;
}

.section-subtitle {
    font-size: 1.05rem;
    color: rgba(210, 220, 240, 0.72);
    max-width: 620px;
    line-height: 1.65;
    margin-bottom: 1.8rem;
}

/* ── Service Card Chips ── */
.service-chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00ffe7;
    background: rgba(0, 255, 231, 0.1);
    border: 1px solid rgba(0, 255, 231, 0.26);
    border-radius: 50px;
    padding: 0.22rem 0.75rem;
    margin-bottom: 0.65rem;
}

body.vibrant-shell .features-card {
    clip-path: none;
    height: auto;
    min-height: 300px;
    padding: 1.6rem 1.4rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

body.vibrant-shell .features-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 231, 0.3) !important;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.36) !important;
}

body.vibrant-shell .features-card .explore-more {
    margin-top: auto;
}

/* ── Two-Column Contact Layout ── */
body.vibrant-shell .contact-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0;
}

body.vibrant-shell .form-toggle-section {
    position: relative;
}

body.vibrant-shell .form-toggle-section::before {
    content: '';
    position: absolute;
    top: -10vh;
    left: -10vw;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(0, 210, 195, 0.22) 0%, transparent 70%);
    filter: blur(10vw);
    z-index: 0;
    pointer-events: none;
}

body.vibrant-shell .form-toggle-section::after {
    content: '';
    position: absolute;
    bottom: -8vh;
    right: -8vw;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(110, 40, 200, 0.2) 0%, transparent 70%);
    filter: blur(10vw);
    z-index: 0;
    pointer-events: none;
}

body.vibrant-shell .form-toggle-section .container {
    position: relative;
    z-index: 1;
}

body.vibrant-shell .contact-showcase {
    background: linear-gradient(145deg, rgba(0, 40, 52, 0.65), rgba(28, 14, 58, 0.68));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 2.4rem 2rem;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
    height: 100%;
}

body.vibrant-shell .contact-showcase .form-title {
    font-size: 1.55rem;
    line-height: 1.3;
    margin-top: 0.5rem;
    color: #f0f6ff;
    font-weight: 700;
}

body.vibrant-shell .contact-lead {
    color: rgba(215, 225, 248, 0.76);
    font-size: 1rem;
    line-height: 1.65;
    margin-top: 0.8rem;
}

.contact-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.8rem;
}

.contact-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-feature-card:hover {
    border-color: rgba(0, 255, 231, 0.3);
    background: rgba(0, 255, 231, 0.06);
}

.contact-feature-card > i {
    font-size: 1.35rem;
    color: #00ffe7;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.contact-feature-card strong {
    display: block;
    color: #f2f7ff;
    font-size: 0.96rem;
    margin-bottom: 0.25rem;
}

.contact-feature-card p {
    margin: 0;
    font-size: 0.84rem;
    color: rgba(200, 214, 240, 0.7);
    line-height: 1.5;
}

a.contact-feature-card--link,
a.contact-feature-card--link:hover {
    text-decoration: none;
}

body.vibrant-shell .contact-button {
    width: 100%;
    background: linear-gradient(135deg, #00ffe7cc, #0082b4bb);
    color: #050c1a;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.95rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 22px rgba(0, 255, 231, 0.22);
}

body.vibrant-shell .contact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 255, 231, 0.32);
}

@media (max-width: 991.98px) {
    body.vibrant-shell .contact-shell { padding: 1.2rem 0; }
    .hero-eyebrow { font-size: 0.72rem; }
    .hero-cta-group .btn { font-size: 0.9rem; padding: 0.65rem 1.3rem; }
}

/* =============================
   VIBRANT SHELL V3 - FULL PASS
============================= */
body.vibrant-shell {
    --vs-bg-0: #080b1a;
    --vs-bg-1: #0d1430;
    --vs-bg-2: #181036;
    --vs-text-main: #f7fbff;
    --vs-text-soft: rgba(220, 232, 252, 0.82);
    --vs-accent-1: #2cf0d5;
    --vs-accent-2: #5ea6ff;
    --vs-accent-3: #8d66ff;
    --vs-glass: rgba(255, 255, 255, 0.06);
    --vs-glass-border: rgba(255, 255, 255, 0.16);
    background:
        radial-gradient(circle at 10% 8%, rgba(44, 240, 213, 0.2), transparent 35%),
        radial-gradient(circle at 85% 10%, rgba(141, 102, 255, 0.17), transparent 32%),
        linear-gradient(145deg, var(--vs-bg-0) 0%, var(--vs-bg-1) 50%, var(--vs-bg-2) 100%) !important;
}

body.vibrant-shell section {
    position: relative;
}

body.vibrant-shell .navbar-blur {
    background: rgba(7, 13, 32, 0.68);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

body.vibrant-shell .navbar-nav .nav-link {
    color: rgba(225, 234, 252, 0.92) !important;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    transition: color 0.2s ease, background 0.2s ease;
}

body.vibrant-shell .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08);
}

body.vibrant-shell .hero {
    min-height: 94vh;
    padding-top: 5.8rem;
    padding-bottom: 2.8rem;
}

body.vibrant-shell .hero-heading {
    max-width: min(96vw, 1240px);
    background: linear-gradient(140deg, rgba(15, 30, 62, 0.32), rgba(25, 16, 52, 0.29));
    border: 1px solid rgba(216, 229, 255, 0.24);
    border-radius: 26px;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(11px) saturate(122%);
    -webkit-backdrop-filter: blur(11px) saturate(122%);
    padding: 1.75rem 1.5rem !important;
}

body.vibrant-shell .hero h1.display-4 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.85rem, 3.6vw, 3.2rem);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--vs-text-main);
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    white-space: normal;
    text-wrap: balance;
    margin: 0 auto;
}

body.vibrant-shell .hero-subtitle {
    max-width: min(95vw, 980px);
    font-size: clamp(0.95rem, 1.12vw, 1.06rem);
    line-height: 1.52;
    color: var(--vs-text-soft);
    margin-top: 0.9rem;
    white-space: normal;
    text-wrap: pretty;
    margin-left: auto;
    margin-right: auto;
}

body.vibrant-shell .hero-cta-group {
    margin-top: 1.3rem;
    gap: 0.75rem;
}

body.vibrant-shell .hero-cta-group .btn {
    border-radius: 10px !important;
    padding: 0.78rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.vibrant-shell .hero-cta-group .btn:first-child {
    background: linear-gradient(135deg, var(--vs-accent-1), #17b9cf) !important;
    border: 1px solid rgba(103, 255, 234, 0.72) !important;
    color: #05222e !important;
    box-shadow: 0 10px 24px rgba(44, 240, 213, 0.34) !important;
}

body.vibrant-shell .hero-cta-group .btn:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 32px rgba(44, 240, 213, 0.45) !important;
}

body.vibrant-shell .hero-cta-group .btn + .btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #f0f5ff !important;
}

body.vibrant-shell .hero-cta-group .btn + .btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-2px);
}

body.vibrant-shell .summer-camp-dropdown .summer-camp-menu {
    margin-top: 0.45rem !important;
    border-radius: 12px;
    border: 1px solid rgba(69, 255, 232, 0.42);
    background: linear-gradient(160deg, rgba(5, 17, 42, 0.96), rgba(23, 14, 58, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(30, 255, 235, 0.12) inset;
    backdrop-filter: blur(8px);
    min-width: 220px;
    right: 0 !important;
    left: auto !important;
    overflow: hidden;
}

body.vibrant-shell .summer-camp-dropdown .summer-camp-menu .dropdown-item {
    color: #eaf6ff;
    font-weight: 600;
    padding: 0.62rem 0.9rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* ══════════════════════════════════════════════
   SITE FOOTER  (website mode)
   ══════════════════════════════════════════════ */
.site-footer {
    background: linear-gradient(180deg, rgba(7, 11, 26, 0.0) 0%, rgba(5, 9, 22, 0.98) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3.5rem 2rem 1.4rem;
    color: rgba(210, 225, 250, 0.85);
    font-size: 1.12rem;
}

.site-footer__columns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Brand column */
.site-footer__col--brand {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.site-footer__logo {
    max-width: 160px;
    height: auto;
    filter: brightness(1.05);
}

/* Info columns */
.site-footer__col {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-footer__heading {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(241, 248, 255, 0.96);
    line-height: 1.12;
    margin: 0 0 0.38rem;
}

.site-footer__info {
    margin: 0 0 0.12rem;
    font-size: 1.34rem;
    font-weight: 600;
    line-height: 1.16;
}

.site-footer__info a {
    color: rgba(210, 225, 250, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__info a:hover {
    color: #00ffe7;
}

/* Dividers between columns */
.site-footer__col + .site-footer__col {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 2.5rem;
}

/* Bottom bar */
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 1.1rem 0;
    text-align: center;
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.14;
    color: rgba(180, 200, 235, 0.5);
    max-width: 1100px;
    margin: 0 auto;
}

.site-footer__bottom p {
    margin: 0;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .site-footer {
        padding: 2.5rem 1.25rem 1.1rem;
    }

    .site-footer__columns {
        flex-direction: column;
        gap: 1.75rem;
    }

    .site-footer__col + .site-footer__col {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-left: 0;
        padding-top: 1.5rem;
    }

    .site-footer__col--brand {
        justify-content: center;
    }

    .site-footer__info {
        font-size: 1.05rem;
    }

    .site-footer__heading {
        font-size: 1.45rem;
    }

    .site-footer__bottom {
        font-size: 1rem;
    }
}

body.vibrant-shell .summer-camp-dropdown .summer-camp-menu .dropdown-item:hover,
body.vibrant-shell .summer-camp-dropdown .summer-camp-menu .dropdown-item:focus {
    background: linear-gradient(135deg, rgba(39, 240, 213, 0.2), rgba(0, 188, 255, 0.18));
    color: #9ffbff;
    transform: translateX(2px);
}

body.vibrant-shell .hero-heading,
body.vibrant-shell .hero .rocket-img,
body.vibrant-shell .hero .slider-wrapper {
    animation: vsRise 0.8s ease both;
}

body.vibrant-shell .hero .rocket-img { animation-delay: 0.08s; }
body.vibrant-shell .hero .slider-wrapper { animation-delay: 0.16s; }

@keyframes vsRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.vibrant-shell .generative-section,
body.vibrant-shell .roadmap-section,
body.vibrant-shell #testimonials-section,
body.vibrant-shell .slider-heading,
body.vibrant-shell .form-toggle-section {
    padding-top: clamp(3rem, 7vw, 5.8rem);
    padding-bottom: clamp(2.6rem, 6vw, 5.2rem);
}

body.vibrant-shell .section-kicker {
    color: #d9fbff;
    background: rgba(44, 240, 213, 0.13);
    border-color: rgba(44, 240, 213, 0.35);
    letter-spacing: 0.12em;
}

body.vibrant-shell .section-subtitle {
    color: rgba(215, 228, 252, 0.84);
}

body.vibrant-shell .info-box,
body.vibrant-shell .features-card,
body.vibrant-shell .training-card,
body.vibrant-shell .testi-card,
body.vibrant-shell .contact-showcase,
body.vibrant-shell .contact-shell .form-container {
    border-radius: 18px;
    border: 1px solid var(--vs-glass-border);
    background: linear-gradient(145deg, rgba(10, 23, 46, 0.68), rgba(26, 15, 47, 0.62));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

body.vibrant-shell .features-card,
body.vibrant-shell .training-card,
body.vibrant-shell .contact-feature-card,
body.vibrant-shell .testi-card {
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

body.vibrant-shell .features-card:hover,
body.vibrant-shell .training-card:hover,
body.vibrant-shell .contact-feature-card:hover,
body.vibrant-shell .testi-card:hover {
    transform: translateY(-5px);
    border-color: rgba(94, 166, 255, 0.45);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34);
}

body.vibrant-shell .training-heading,
body.vibrant-shell .testi-heading,
body.vibrant-shell .slider-heading h1,
body.vibrant-shell .form-title {
    color: var(--vs-text-main);
    letter-spacing: -0.01em;
}

body.vibrant-shell .training-copy,
body.vibrant-shell .contact-lead,
body.vibrant-shell .testi-message {
    color: rgba(218, 230, 252, 0.85);
}

body.vibrant-shell .training-tag {
    color: #eef5ff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

body.vibrant-shell .tech-icons i,
body.vibrant-shell .contact-feature-card > i {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.vibrant-shell .contact-feature-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.vibrant-shell .training-cta-btn,
body.vibrant-shell .contact-button {
    background: linear-gradient(135deg, var(--vs-accent-1), #1799d1) !important;
    border: 1px solid rgba(100, 255, 238, 0.68) !important;
    color: #052533 !important;
    box-shadow: 0 10px 24px rgba(44, 240, 213, 0.32) !important;
}

body.vibrant-shell .training-cta-btn:hover,
body.vibrant-shell .contact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(44, 240, 213, 0.42) !important;
}

body.vibrant-shell .slider-heading::before {
    background: radial-gradient(ellipse, rgba(44, 240, 213, 0.16) 0%, rgba(141, 102, 255, 0.18) 46%, transparent 78%);
}

body.vibrant-shell footer {
    background: linear-gradient(180deg, rgba(7, 10, 22, 0.12), rgba(6, 10, 22, 0.72));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 991.98px) {
    body.vibrant-shell .hero {
        min-height: 88vh;
        padding-top: 5.2rem;
    }

    body.vibrant-shell .hero-heading {
        max-width: 96%;
        padding: 1.35rem 0.95rem !important;
    }

    body.vibrant-shell .hero h1.display-4,
    body.vibrant-shell .hero-subtitle {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    body.vibrant-shell .hero h1.display-4 {
        font-size: clamp(1.95rem, 9.5vw, 2.95rem);
        line-height: 1.14;
    }

    body.vibrant-shell .hero-subtitle {
        font-size: 1rem;
    }

    body.vibrant-shell .hero-icons-image {
        opacity: 0.72;
    }

    body.vibrant-shell .roadmap-section,
    body.vibrant-shell #testimonials-section,
    body.vibrant-shell .form-toggle-section {
        padding-top: 2.8rem;
        padding-bottom: 2.7rem;
    }
}

    /* ===================================================
       POST-SERVICES VIVID BACKGROUND EFFECTS
       Adds rich, animated colour glows to every section
       after the features/services section
    =================================================== */

    /* ── Shared floating-orb keyframe ── */
    @keyframes orbDrift {
        0%   { transform: translate(0, 0) scale(1); opacity: 0.85; }
        33%  { transform: translate(3%, -4%) scale(1.06); opacity: 0.95; }
        66%  { transform: translate(-3%, 3%) scale(0.96); opacity: 0.9; }
        100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    }
    @keyframes orbDriftB {
        0%   { transform: translate(0, 0) scale(1); opacity: 0.85; }
        40%  { transform: translate(-4%, 5%) scale(1.08); opacity: 0.95; }
        80%  { transform: translate(5%, -3%) scale(0.94); opacity: 0.9; }
        100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    }
    @keyframes orbPulse {
        0%, 100% { opacity: 0.55; }
        50%       { opacity: 0.85; }
    }

    /* ── roadmap-section (Training) ──
       Purple-violet top-left + vivid orange bottom-right */
    body.vibrant-shell .roadmap-section {
        overflow: hidden;
    }
    body.vibrant-shell .roadmap-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 70% 55% at 6% 12%,  rgba(139, 62, 255, 0.38) 0%, transparent 68%),
            radial-gradient(ellipse 60% 50% at 94% 88%, rgba(255, 90, 20, 0.30) 0%, transparent 65%),
            radial-gradient(ellipse 50% 45% at 50% 50%, rgba(30, 120, 255, 0.14) 0%, transparent 72%);
        pointer-events: none;
        z-index: 0;
        animation: orbPulse 9s ease-in-out infinite;
    }
    body.vibrant-shell .roadmap-section::after {
        content: '';
        position: absolute;
        top: -15%;
        right: 5%;
        width: 38vw;
        height: 38vw;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 60, 160, 0.22) 0%, transparent 68%);
        filter: blur(6vw);
        pointer-events: none;
        z-index: 0;
        animation: orbDrift 14s ease-in-out infinite;
    }
    /* Decorative side streak */
    body.vibrant-shell .roadmap-section .training-grid {
        position: relative;
        z-index: 1;
    }
    body.vibrant-shell .roadmap-section .container {
        position: relative;
        z-index: 1;
    }

    /* Training card top-border accent — per-colour glow */
    body.vibrant-shell .training-card--logic   { box-shadow: 0 0 0 1px rgba(255,200,50,0.3),  0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(255,200,50,0.55) !important; }
    body.vibrant-shell .training-card--iot     { box-shadow: 0 0 0 1px rgba(50,200,255,0.3),  0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(50,200,255,0.55) !important; }
    body.vibrant-shell .training-card--ai      { box-shadow: 0 0 0 1px rgba(130,80,255,0.35), 0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(130,80,255,0.6) !important; }
    body.vibrant-shell .training-card--arduino { box-shadow: 0 0 0 1px rgba(0,220,120,0.3),   0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(0,220,120,0.55) !important; }
    body.vibrant-shell .training-card--security{ box-shadow: 0 0 0 1px rgba(255,60,100,0.3),  0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(255,60,100,0.55) !important; }
    body.vibrant-shell .training-card--raspberry{ box-shadow: 0 0 0 1px rgba(255,120,0,0.3),  0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(255,120,0,0.55) !important; }
    body.vibrant-shell .training-card--mobile  { box-shadow: 0 0 0 1px rgba(44,240,213,0.3),  0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(44,240,213,0.55) !important; }
    body.vibrant-shell .training-card--comms   { box-shadow: 0 0 0 1px rgba(255,80,200,0.3),  0 16px 32px rgba(0,0,0,.28); border-top: 2px solid rgba(255,80,200,0.55) !important; }

    /* ── testimonials-section ──
       Hot pink top-right + electric blue bottom-left + amber centre-top */
    body.vibrant-shell #testimonials-section {
        overflow: hidden;
        background: transparent;
        clip-path: inset(0);
    }
    body.vibrant-shell #testimonials-section::before {
        content: none;
        position: absolute;
        inset: 0;
        background: none;
        pointer-events: none;
        z-index: 0;
        animation: none;
    }
    body.vibrant-shell #testimonials-section::after {
        content: none;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        background: none;
        filter: none;
        pointer-events: none;
        z-index: 0;
        animation: none;
    }
    body.vibrant-shell #testimonials-section .container,
    body.vibrant-shell #testimonials-section .testi-stage {
        position: relative;
        z-index: 1;
    }
    body.vibrant-shell #testimonials-section .pg-orb {
        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 55%, transparent 90%) !important;
        mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 55%, transparent 90%) !important;
        pointer-events: none;
    }
    body.vibrant-shell #testimonials-section .pg-orb--pink {
        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 65%, transparent 95%) !important;
        mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 65%, transparent 95%) !important;
    }
    body.vibrant-shell #testimonials-section .pg-orb--blue {
        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 65%, transparent 95%) !important;
        mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 65%, transparent 95%) !important;
    }
    body.vibrant-shell #testimonials-section .pg-orb--amber {
        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 70%, transparent 95%) !important;
        mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 70%, transparent 95%) !important;
    }
    body.vibrant-shell .testi-bg-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,60,160,0.12) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    /* Testi card — coloured top accent */
    body.vibrant-shell .testi-card {
        border-top: 2px solid rgba(255, 60, 160, 0.45) !important;
        box-shadow: 0 18px 38px rgba(0,0,0,.3), 0 0 0 1px rgba(255,60,160,0.18) !important;
    }
    body.vibrant-shell .testi-card.is-active {
        border-top-color: rgba(255, 60, 160, 0.75) !important;
        box-shadow: 0 22px 48px rgba(0,0,0,.36), 0 0 28px rgba(255,60,160,0.18) !important;
    }

    /* ── slider-heading (Flags / Global section) ──
       Vivid green-lime centre + golden-amber sides */
    body.vibrant-shell .slider-heading {
        overflow: hidden;
        position: relative;
    }
    body.vibrant-shell .slider-heading::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0, 230, 118, 0.20) 0%, transparent 68%),
            radial-gradient(ellipse 45% 60% at 10% 50%, rgba(255, 185, 0, 0.18) 0%, transparent 65%),
            radial-gradient(ellipse 45% 60% at 90% 50%, rgba(0, 160, 255, 0.18) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
        animation: orbPulse 10s ease-in-out infinite;
    }
    body.vibrant-shell .slider-heading > * {
        position: relative;
        z-index: 1;
    }
    body.vibrant-shell .slider-heading h1 {
        background: linear-gradient(90deg, #fff 0%, #2cf0d5 45%, #5ea6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ── form-toggle-section (Contact) ──
       Upgrade existing glows: teal top-left + violet bottom-right + magenta streak */
    body.vibrant-shell .form-toggle-section::before {
        width: 60vw !important;
        height: 60vw !important;
        background: radial-gradient(circle, rgba(0, 230, 200, 0.30) 0%, transparent 68%) !important;
        filter: blur(9vw) !important;
        animation: orbDrift 13s ease-in-out infinite;
    }
    body.vibrant-shell .form-toggle-section::after {
        width: 55vw !important;
        height: 55vw !important;
        background: radial-gradient(circle, rgba(140, 40, 255, 0.28) 0%, transparent 68%) !important;
        filter: blur(9vw) !important;
        animation: orbDriftB 15s ease-in-out infinite;
    }
    /* Magenta mid-section streak */
    body.vibrant-shell .form-toggle-section .contact-shell {
        position: relative;
    }
    body.vibrant-shell .form-toggle-section .contact-shell::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50vw;
        height: 50vw;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 40, 140, 0.12) 0%, transparent 65%);
        filter: blur(8vw);
        pointer-events: none;
        z-index: 0;
    }

    /* ── Extra ambient layer: full-page vertical gradient band
       adds a subtle colour shift from section to section */
    body.vibrant-shell .roadmap-section,
    body.vibrant-shell #testimonials-section,
    body.vibrant-shell .slider-heading,
    body.vibrant-shell .form-toggle-section {
        isolation: isolate;
    }

    /* ── Decorative floating pg-orb blobs ── */
    .pg-orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        filter: blur(7vw);
        animation: orbDrift 18s ease-in-out infinite;
        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 65%, transparent 95%);
        mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 65%, transparent 95%);
    }
    .pg-orb--violet {
        width: 42vw; height: 42vw;
        top: -8%; left: -6%;
        background: radial-gradient(circle, rgba(130, 50, 255, 0.40) 0%, transparent 65%);
        animation-duration: 17s;
    }
    .pg-orb--orange {
        width: 36vw; height: 36vw;
        bottom: -10%; right: -4%;
        background: radial-gradient(circle, rgba(255, 100, 20, 0.35) 0%, transparent 65%);
        animation-duration: 20s;
        animation-name: orbDriftB;
    }
    .pg-orb--cyan {
        width: 30vw; height: 30vw;
        top: 40%; right: 10%;
        background: radial-gradient(circle, rgba(0, 220, 210, 0.28) 0%, transparent 65%);
        animation-duration: 22s;
    }
    .pg-orb--pink {
        width: 44vw; height: 44vw;
        top: -10%; right: -5%;
        background: radial-gradient(circle, rgba(255, 30, 140, 0.38) 0%, transparent 65%);
        animation-duration: 19s;
        animation-name: orbDriftB;
    }
    .pg-orb--blue {
        width: 38vw; height: 38vw;
        bottom: -8%; left: -5%;
        background: radial-gradient(circle, rgba(20, 80, 255, 0.35) 0%, transparent 65%);
        animation-duration: 16s;
    }
    .pg-orb--amber {
        width: 28vw; height: 28vw;
        top: 20%; left: 40%;
        background: radial-gradient(circle, rgba(255, 170, 0, 0.22) 0%, transparent 65%);
        animation-duration: 24s;
        filter: blur(8vw);
    }
    .pg-orb--green {
        width: 50vw; height: 50vw;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(0, 220, 110, 0.22) 0%, transparent 65%);
        animation-duration: 20s;
        filter: blur(10vw);
    }
    .pg-orb--gold {
        width: 35vw; height: 35vw;
        top: 0; left: -5%;
        background: radial-gradient(circle, rgba(255, 195, 0, 0.20) 0%, transparent 65%);
        animation-duration: 25s;
        animation-name: orbDriftB;
        filter: blur(8vw);
    }

/* Tighten testimonial -> global flags -> contact transition on homepage */
body.vibrant-shell .slider-wrapper.slider-heading {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    padding-top: clamp(1rem, 2.2vw, 1.8rem) !important;
    padding-bottom: clamp(1rem, 2.2vw, 1.8rem) !important;
}

body.vibrant-shell .form-toggle-section {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    padding-top: clamp(1.2rem, 2.6vw, 2rem) !important;
}

body.vibrant-shell .slider-wrapper.slider-heading .pg-orb {
    position: absolute !important;
}

/* ================================================================
   CAREERS PAGE
   ================================================================ */
.careers-page {
    padding: clamp(4.8rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}
.careers-shell {
    max-width: 1200px;
}
.careers-content-glass {
    border-radius: 22px;
    border: 1px solid rgba(132, 220, 255, 0.2);
    background: linear-gradient(160deg, rgba(8, 18, 42, 0.62), rgba(16, 22, 56, 0.66));
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: clamp(1rem, 2.2vw, 1.4rem);
}
.careers-hero {
    margin-bottom: 3rem;
}
.careers-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #f2f8ff;
    margin-bottom: 0.75rem;
}
.careers-subtitle {
    font-size: 1.05rem;
    color: rgba(200, 220, 248, 0.85);
    max-width: 620px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.careers-contact-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 210, 255, 0.07);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}
.careers-contact-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(190, 220, 248, 0.7);
}
.careers-contact-inline a {
    font-size: 0.85rem;
    color: #00e0ff;
    font-weight: 600;
    text-decoration: none;
}
.careers-contact-inline a:hover {
    text-decoration: underline;
}
.careers-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 0.5rem;
}
.careers-points span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    font-size: 0.83rem;
    color: rgba(220, 235, 255, 0.85);
}
.careers-points i {
    color: #00e0ff;
}
/* Vacancy cards */
.career-card {
    background: linear-gradient(160deg, rgba(10, 22, 50, 0.9), rgba(16, 18, 54, 0.88));
    border: 1px solid rgba(132, 220, 255, 0.18);
    border-radius: 18px;
    padding: 1.35rem 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.career-card-clickable:hover,
.career-card-clickable:focus {
    border-color: rgba(0, 224, 255, 0.42);
    box-shadow: 0 8px 28px rgba(0, 180, 255, 0.12);
    transform: translateY(-2px);
    outline: none;
}
.career-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.career-card-top h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #eef4ff;
    margin: 0;
}
.career-chip {
    display: inline-block;
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.18), rgba(120, 80, 255, 0.18));
    border: 1px solid rgba(100, 200, 255, 0.3);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a8dcff;
    white-space: nowrap;
    flex-shrink: 0;
}
.career-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}
.career-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: rgba(190, 215, 245, 0.75);
}
.career-meta i {
    color: #00e0ff;
    font-size: 0.78rem;
}
.career-desc {
    font-size: 0.87rem;
    color: rgba(200, 220, 248, 0.72);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 1rem;
}
.career-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid rgba(132, 220, 255, 0.1);
    padding-top: 0.75rem;
}
.career-card-footer small {
    font-size: 0.78rem;
    color: rgba(180, 205, 240, 0.55);
}
.career-apply {
    font-size: 0.83rem;
    font-weight: 600;
    color: #00e0ff;
}
/* Empty state */
.careers-empty {
    padding: 4rem 1rem;
}
.careers-empty-icon {
    font-size: 3.5rem;
    color: rgba(0, 200, 255, 0.3);
    margin-bottom: 1rem;
}
.careers-empty h2 {
    font-size: 1.5rem;
    color: #eef4ff;
    margin-bottom: 0.75rem;
}
.careers-empty p {
    color: rgba(200, 220, 248, 0.7);
    max-width: 500px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.6;
}
/* Form */
.career-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(210, 230, 252, 0.9);
    margin-bottom: 0.3rem;
}
.career-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(132, 220, 255, 0.22) !important;
    border-radius: 10px !important;
    color: #e8f0ff !important;
    font-size: 0.9rem !important;
    transition: border-color 0.15s !important;
}
.career-input::placeholder {
    color: rgba(180, 205, 240, 0.4) !important;
}
.career-input:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(0, 200, 255, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.1) !important;
    color: #f2f8ff !important;
    outline: none;
}
.career-form-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(130, 220, 255, 0.07);
}
.career-form-section:last-child {
    border-bottom: none;
}
.career-form-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(200, 230, 255, 0.9);
    margin-bottom: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.career-form-section-title i {
    color: #00d2ff;
}
.career-hint {
    font-size: 0.78rem;
    color: rgba(170, 200, 240, 0.55);
}
.career-security-note {
    font-size: 0.8rem;
    color: rgba(180, 200, 240, 0.65);
}
.career-security-note i {
    color: #00d2ff;
}
.career-lang-remove {
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 8px;
    color: rgba(255, 140, 140, 0.8);
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.career-lang-remove:hover {
    background: rgba(255, 80, 80, 0.22);
}
.career-lang-add {
    background: transparent;
    border: 1px dashed rgba(0, 210, 255, 0.3);
    border-radius: 8px;
    color: rgba(0, 210, 255, 0.8);
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.career-lang-add:hover {
    border-color: rgba(0, 210, 255, 0.6);
    color: #00d2ff;
}
.career-submit-btn {
    background: linear-gradient(135deg, #00ffe7, #5b6cff);
    border: none;
    border-radius: 12px;
    color: #04121e;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.85rem 2rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 230, 231, 0.22);
    transition: opacity 0.15s, transform 0.15s;
}
.career-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.career-file-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.career-file-clear {
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 8px;
    color: rgba(255, 140, 140, 0.85);
    padding: 0.38rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}
.career-file-clear:hover {
    background: rgba(255, 80, 80, 0.22);
}
.career-upload-add {
    background: transparent;
    border: 1px dashed rgba(0, 210, 255, 0.3);
    border-radius: 8px;
    color: rgba(0, 210, 255, 0.7);
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
    margin-top: 0.4rem;
    display: inline-block;
    transition: border-color 0.15s, color 0.15s;
}
.career-upload-add:hover {
    border-color: rgba(0, 210, 255, 0.55);
    color: #00d2ff;
}
.career-upload-extra {
    margin-top: 0.75rem;
}
.career-upload-note {
    font-size: 0.78rem;
    color: rgba(170, 200, 240, 0.55);
    margin-bottom: 0.5rem;
}
.career-apply-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(160, 200, 240, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 0.15rem;
}
.career-back-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(132, 220, 255, 0.2);
    border-radius: 10px;
    color: rgba(200, 225, 252, 0.85);
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.career-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
/* Submit overlay */
.career-submit-status {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(4, 10, 26, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.career-submit-status__card {
    background: linear-gradient(160deg, rgba(10, 22, 50, 0.98), rgba(16, 18, 54, 0.98));
    border: 1px solid rgba(132, 220, 255, 0.28);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 380px;
    width: 90%;
}
.career-submit-status__card h3 {
    color: #eef4ff;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.career-submit-status__card p {
    color: rgba(200, 220, 248, 0.7);
    font-size: 0.9rem;
    margin: 0;
}
.career-submit-status__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(0, 200, 255, 0.2);
    border-top-color: #00d2ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1.25rem;
}
.career-submit-status__icon {
    font-size: 2.5rem;
    color: #00ffe7;
    margin-bottom: 1.25rem;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 767.98px) {
    .careers-hero { margin-bottom: 2rem; }
    .careers-title { font-size: 1.75rem; }
    .careers-content-glass { border-radius: 16px; padding: 0.9rem; }
    .career-form-section { padding: 1rem; }
}

/* ================================================================
   FOUNDER PAGE — new classes (portal tabs, pillars, profile block)
   ================================================================ */
.founder-hero {
    padding-bottom: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.founder-profile-block {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.founder-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.35), rgba(130, 80, 255, 0.35));
    border: 2px solid rgba(0, 200, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #a8e8ff;
    margin-bottom: 0.4rem;
}
.founder-name {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: #f2f8ff;
    margin: 0;
}
.founder-role {
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(0, 210, 255, 0.9);
    margin: 0;
}
.founder-credentials {
    font-size: 0.82rem;
    color: rgba(190, 215, 248, 0.65);
    margin: 0.25rem 0 0;
    max-width: 560px;
    line-height: 1.5;
}
.founder-body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.founder-story {
    background: linear-gradient(160deg, rgba(8, 18, 42, 0.82), rgba(11, 15, 40, 0.82));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(132, 220, 255, 0.14);
    border-radius: 18px;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.founder-story-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #00d2ff;
    margin-bottom: 0.6rem;
}
.founder-story h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 700;
    color: #eef4ff;
    margin-bottom: 1.5rem;
}
.founder-story-lead {
    font-size: 1.04rem;
    color: rgba(220, 238, 255, 0.92);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-weight: 500;
}
.founder-story-copy {
    font-size: 0.95rem;
    color: rgba(200, 220, 248, 0.82);
    line-height: 1.72;
    margin-bottom: 0.85rem;
}
.founder-story-copy em {
    color: #a8e0ff;
    font-style: italic;
}
/* Portal tabs */
.founder-portal-switch {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(132, 220, 255, 0.14);
    border-radius: 12px;
    padding: 0.3rem;
    width: fit-content;
}
.founder-portal-btn {
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 0.45rem 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(190, 215, 248, 0.65);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.founder-portal-btn.active {
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.2), rgba(120, 80, 255, 0.2));
    color: #d0eeff;
    box-shadow: 0 2px 8px rgba(0, 180, 255, 0.1);
}
.founder-portal-btn:hover:not(.active) {
    color: rgba(210, 235, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
}
.founder-portal-panel {
    display: none;
}
.founder-portal-panel.active {
    display: block;
}
/* Pillars */
.founder-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.founder-pillar {
    display: flex;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(132, 220, 255, 0.12);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}
.fpillar-icon {
    font-size: 1.4rem;
    color: #00d2ff;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.fpillar-body h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #d8eeff;
    margin-bottom: 0.35rem;
}
.fpillar-body p {
    font-size: 0.84rem;
    color: rgba(190, 215, 248, 0.72);
    line-height: 1.55;
    margin: 0;
}
/* Aside inline */
.founder-side-inline {
    background: linear-gradient(160deg, rgba(8, 18, 42, 0.82), rgba(11, 15, 40, 0.82));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(132, 220, 255, 0.14);
    border-radius: 18px;
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.founder-contact-card {
    border: 1px solid rgba(0, 210, 255, 0.18);
    border-radius: 14px;
    background: rgba(0, 180, 255, 0.06);
    padding: 1.1rem;
}
.founder-contact-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #00d2ff;
    margin-bottom: 0.55rem;
}
.founder-contact-card p {
    font-size: 0.88rem;
    color: rgba(200, 220, 248, 0.78);
    line-height: 1.55;
    margin-bottom: 0.85rem;
}
.founder-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #00d2ff;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    word-break: break-all;
}
.founder-contact-email:hover {
    color: #6ee8ff;
    text-decoration: underline;
}
.founder-contact-email i { flex-shrink: 0; }
.founder-inline-link {
    color: #00d2ff;
    text-decoration: none;
    font-weight: 600;
}
.founder-inline-link:hover {
    text-decoration: underline;
    color: #6ee8ff;
}
/* CTAs */
.founder-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.fcta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 12px;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
}
.fcta-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    text-decoration: none;
}
.fcta-primary {
    background: linear-gradient(135deg, #00ffe7cc, #0082b4bb);
    color: #03101f;
}
.fcta-outline {
    background: transparent;
    border: 1.5px solid rgba(0, 210, 255, 0.4);
    color: rgba(0, 210, 255, 0.9);
}
.fcta-outline:hover {
    border-color: rgba(0, 210, 255, 0.7);
    color: #00d2ff;
}
@media (max-width: 767.98px) {
    .founder-pillars { grid-template-columns: 1fr; }
    .founder-portal-switch { width: 100%; }
    .founder-portal-btn { flex: 1; text-align: center; font-size: 0.8rem; padding: 0.4rem 0.5rem; }
}

/* ================================================================
   GLOBAL BACKGROUND ORBS — ALL FRONTEND PAGES
   z-index: 0 (background layer, same as vibrant-shell ::before/::after)
   No mix-blend-mode — vivid glow without covering text.
   ================================================================ */
.site-global-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: clip;
    animation: siteAmbientPulse 12s ease-in-out infinite;
}

.site-global-orbs::before {
    content: "";
    position: absolute;
    inset: -18%;
    /* ================================================================
       CONTACT / FEEDBACK TWO-TAB COMPONENTS
       ================================================================ */

    /* ── Tab switcher buttons ── */
    .cf-tab-switcher {
        display: flex;
        gap: 0.6rem;
        margin: 1.4rem 0 1.6rem;
        flex-wrap: wrap;
    }

    .cf-tab-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.56rem 1.3rem;
        border-radius: 999px;
        border: 1.5px solid rgba(0, 210, 255, 0.28);
        background: rgba(4, 18, 36, 0.55);
        color: rgba(180, 220, 255, 0.72);
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
        backdrop-filter: blur(4px);
        letter-spacing: 0.02em;
    }

    .cf-tab-btn:hover {
        border-color: rgba(0, 210, 255, 0.55);
        color: #c8e8ff;
    }

    .cf-tab-btn--active {
        border-color: rgba(0, 224, 255, 0.7);
        background: rgba(0, 180, 255, 0.12);
        color: #e0f8ff;
        box-shadow: 0 0 14px rgba(0, 210, 255, 0.2);
    }

    /* ── Star rating ── */
    .cf-star-row {
        display: flex;
        align-items: center;
        gap: 0.22rem;
        flex-wrap: wrap;
    }

    .cf-star-btn {
        background: none;
        border: none;
        font-size: 1.55rem;
        cursor: pointer;
        color: rgba(180, 200, 255, 0.25);
        padding: 0 0.08rem;
        line-height: 1;
        transition: color 0.15s ease, transform 0.15s ease;
    }

    .cf-star-btn.cf-star-lit {
        color: #ffd84d;
    }

    .cf-star-btn:hover {
        transform: scale(1.18);
    }

    .cf-star-label {
        margin-left: 0.5rem;
        font-size: 0.82rem;
        color: rgba(180, 220, 255, 0.65);
        font-weight: 600;
    }

    /* ── File upload row ── */
    .cf-upload-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.9rem;
        margin-bottom: 1.2rem;
    }

    @media (max-width: 500px) {
        .cf-upload-row { grid-template-columns: 1fr; }
    }

    .cf-file-label {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        background: rgba(4, 18, 36, 0.45);
        border: 1px solid rgba(0, 210, 255, 0.22);
        border-radius: 10px;
        padding: 0.45rem 0.75rem;
        cursor: pointer;
        transition: border-color 0.2s ease;
        overflow: hidden;
    }

    .cf-file-label:hover {
        border-color: rgba(0, 210, 255, 0.5);
    }

    .cf-file-label input[type="file"] {
        display: none;
    }

    .cf-file-choose {
        flex-shrink: 0;
        padding: 0.28rem 0.72rem;
        border-radius: 7px;
        background: rgba(0, 180, 255, 0.14);
        border: 1px solid rgba(0, 210, 255, 0.35);
        color: #a8ddff;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .cf-file-name {
        font-size: 0.77rem;
        color: rgba(160, 210, 255, 0.6);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .cf-info-tip {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 999px;
        border: 1px solid rgba(127, 215, 255, 0.55);
        color: #7fd7ff;
        background: rgba(127, 215, 255, 0.09);
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
        cursor: help;
        user-select: none;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .cf-info-tip:hover,
    .cf-info-tip:focus-visible {
        color: #c6f2ff;
        border-color: rgba(157, 231, 255, 0.82);
        background: rgba(127, 215, 255, 0.2);
        outline: none;
    }

    .cf-info-tip::before {
        content: attr(data-tip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.58rem);
        transform: translateX(-50%) translateY(4px);
        min-width: 220px;
        max-width: min(320px, 78vw);
        padding: 0.45rem 0.55rem;
        border-radius: 8px;
        border: 1px solid rgba(127, 215, 255, 0.35);
        background: rgba(7, 18, 37, 0.97);
        color: rgba(222, 238, 255, 0.96);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.35;
        text-align: left;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
        z-index: 15;
    }

    .cf-info-tip::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.24rem);
        transform: translateX(-50%) translateY(4px);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid rgba(7, 18, 37, 0.97);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
        z-index: 15;
    }

    .cf-info-tip:hover::before,
    .cf-info-tip:hover::after,
    .cf-info-tip:focus-visible::before,
    .cf-info-tip:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 767.98px) {
        .cf-info-tip::before {
            left: 0;
            transform: translateX(0) translateY(4px);
            max-width: min(280px, 84vw);
        }

        .cf-info-tip::after {
            left: 0.55rem;
            transform: translateX(0) translateY(4px);
        }

        .cf-info-tip:hover::before,
        .cf-info-tip:hover::after,
        .cf-info-tip:focus-visible::before,
        .cf-info-tip:focus-visible::after {
            transform: translateX(0) translateY(0);
        }
    }
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 24%, rgba(60, 175, 255, 0.10), transparent 45%),
        radial-gradient(circle at 82% 22%, rgba(140, 110, 255, 0.09), transparent 44%),
        radial-gradient(circle at 66% 82%, rgba(0, 196, 170, 0.08), transparent 46%);
    filter: blur(26px);
    animation: siteAmbientDrift 26s ease-in-out infinite alternate;
}

.site-global-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    animation: siteOrbFloat 18s ease-in-out infinite;
}

/* ── Cyan — top-left ─────────────────────────── */
.site-global-orb--cyan {
    width: clamp(420px, 62vw, 1040px);
    height: clamp(420px, 62vw, 1040px);
    top: -28vh;
    left: -22vw;
    background: radial-gradient(circle, rgba(0, 220, 200, 0.32) 0%, rgba(0, 185, 200, 0.18) 44%, transparent 70%);
    filter: blur(110px);
    animation-duration: 18s;
    animation-delay: 0s;
}

/* ── Violet — top-right ──────────────────────── */
.site-global-orb--violet {
    width: clamp(400px, 58vw, 980px);
    height: clamp(400px, 58vw, 980px);
    top: -22vh;
    right: -24vw;
    background: radial-gradient(circle, rgba(140, 60, 240, 0.30) 0%, rgba(105, 35, 210, 0.16) 44%, transparent 70%);
    filter: blur(108px);
    animation-name: siteOrbFloatB;
    animation-duration: 21s;
    animation-delay: -10s;
}

/* ── Amber/Gold — bottom-right ───────────────── */
.site-global-orb--amber {
    width: clamp(380px, 54vw, 940px);
    height: clamp(380px, 54vw, 940px);
    bottom: -30vh;
    right: -18vw;
    background: radial-gradient(circle, rgba(230, 155, 0, 0.28) 0%, rgba(215, 100, 8, 0.14) 44%, transparent 70%);
    filter: blur(112px);
    animation-duration: 24s;
    animation-delay: -5s;
}

/* ── Rose — bottom-left ──────────────────────── */
.site-global-orb--rose {
    width: clamp(380px, 56vw, 960px);
    height: clamp(380px, 56vw, 960px);
    bottom: -24vh;
    left: -20vw;
    background: radial-gradient(circle, rgba(230, 30, 148, 0.26) 0%, rgba(190, 8, 105, 0.13) 44%, transparent 70%);
    filter: blur(110px);
    animation-name: siteOrbFloatB;
    animation-duration: 20s;
    animation-delay: -15s;
}

@keyframes siteOrbFloat {
    0%   { transform: translate3d(0,     0,    0) scale(1.00); }
    33%  { transform: translate3d(7vw, -9vh,  0) scale(1.07); }
    66%  { transform: translate3d(-6vw,  7vh, 0) scale(0.95); }
    100% { transform: translate3d(0,     0,    0) scale(1.00); }
}

@keyframes siteOrbFloatB {
    0%   { transform: translate3d(0,      0,   0) scale(1.00); }
    33%  { transform: translate3d(-7vw,  9vh, 0) scale(1.06); }
    66%  { transform: translate3d(6vw, -7vh,  0) scale(0.96); }
    100% { transform: translate3d(0,      0,   0) scale(1.00); }
}

@keyframes siteAmbientDrift {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1.00); }
    50%  { transform: translate3d(4%, 2%, 0) scale(1.04); }
    100% { transform: translate3d(-2%, 4%, 0) scale(1.01); }
}

@keyframes siteAmbientPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/* ================================================================
   FOUNDER PAGE — large vivid ambient orbs, clearly visible motion
   ================================================================ */
.founder-page {
    position: relative;
    overflow: hidden;
    animation: founderAmbientPulse 11s ease-in-out infinite;
}

.founder-page::before {
    content: "";
    position: absolute;
    inset: -16%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 18%, rgba(32, 185, 255, 0.11), transparent 44%),
        radial-gradient(circle at 78% 30%, rgba(150, 95, 255, 0.10), transparent 45%),
        radial-gradient(circle at 52% 86%, rgba(72, 220, 190, 0.08), transparent 44%);
    filter: blur(28px);
    animation: founderAmbientDrift 24s ease-in-out infinite alternate;
}

.founder-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: founderOrbFloat 20s ease-in-out infinite;
}

.founder-orb--cyan {
    width: clamp(360px, 54vw, 860px);
    height: clamp(360px, 54vw, 860px);
    top: -10vh;
    left: -18vw;
    background: radial-gradient(circle, rgba(0, 215, 196, 0.30) 0%, rgba(0, 185, 196, 0.15) 44%, transparent 72%);
    filter: blur(100px);
    animation-delay: 0s;
}

.founder-orb--violet {
    width: clamp(340px, 50vw, 820px);
    height: clamp(340px, 50vw, 820px);
    top: -8vh;
    right: -16vw;
    background: radial-gradient(circle, rgba(138, 58, 235, 0.28) 0%, rgba(105, 35, 200, 0.14) 44%, transparent 72%);
    filter: blur(96px);
    animation-name: founderOrbFloatB;
    animation-duration: 23s;
    animation-delay: -8s;
}

.founder-orb--rose {
    width: clamp(300px, 44vw, 720px);
    height: clamp(300px, 44vw, 720px);
    top: 30%;
    right: 2vw;
    background: radial-gradient(circle, rgba(225, 40, 148, 0.24) 0%, rgba(188, 12, 112, 0.12) 44%, transparent 72%);
    filter: blur(96px);
    animation-duration: 26s;
    animation-delay: -12s;
}

.founder-orb--amber {
    width: clamp(320px, 48vw, 780px);
    height: clamp(320px, 48vw, 780px);
    bottom: -10vh;
    right: -14vw;
    background: radial-gradient(circle, rgba(228, 152, 10, 0.26) 0%, rgba(205, 108, 4, 0.13) 44%, transparent 72%);
    filter: blur(100px);
    animation-duration: 28s;
    animation-delay: -5s;
}

.founder-orb--teal {
    width: clamp(280px, 42vw, 660px);
    height: clamp(280px, 42vw, 660px);
    bottom: 18%;
    left: 2vw;
    background: radial-gradient(circle, rgba(0, 204, 168, 0.24) 0%, rgba(0, 170, 150, 0.12) 44%, transparent 72%);
    filter: blur(92px);
    animation-name: founderOrbFloatB;
    animation-duration: 22s;
    animation-delay: -18s;
}

.founder-orb--indigo {
    width: clamp(260px, 38vw, 620px);
    height: clamp(260px, 38vw, 620px);
    top: 48%;
    left: 35%;
    background: radial-gradient(circle, rgba(58, 108, 235, 0.22) 0%, rgba(36, 72, 210, 0.11) 44%, transparent 72%);
    filter: blur(90px);
    animation-duration: 18s;
    animation-delay: -10s;
}

.founder-orb--lime {
    width: clamp(260px, 38vw, 600px);
    height: clamp(260px, 38vw, 600px);
    top: 15%;
    left: 20%;
    background: radial-gradient(circle, rgba(130, 230, 60, 0.20) 0%, rgba(96, 195, 38, 0.10) 44%, transparent 72%);
    filter: blur(96px);
    animation-duration: 30s;
    animation-delay: -22s;
}

.founder-orb--coral {
    width: clamp(280px, 42vw, 660px);
    height: clamp(280px, 42vw, 660px);
    bottom: 6vh;
    left: -14vw;
    background: radial-gradient(circle, rgba(228, 88, 52, 0.24) 0%, rgba(204, 52, 22, 0.12) 44%, transparent 72%);
    filter: blur(96px);
    animation-name: founderOrbFloatB;
    animation-duration: 24s;
    animation-delay: -15s;
}

@keyframes founderOrbFloat {
    0%   { transform: translate3d(0,     0,   0) scale(1.00); }
    33%  { transform: translate3d(7vw, -9vh, 0) scale(1.07); }
    66%  { transform: translate3d(-6vw,  7vh, 0) scale(0.95); }
    100% { transform: translate3d(0,     0,   0) scale(1.00); }
}

@keyframes founderOrbFloatB {
    0%   { transform: translate3d(0,      0,    0) scale(1.00); }
    33%  { transform: translate3d(-7vw,  9vh,  0) scale(1.06); }
    66%  { transform: translate3d(6vw, -7vh,   0) scale(0.96); }
    100% { transform: translate3d(0,      0,    0) scale(1.00); }
}

@keyframes founderAmbientDrift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1.00); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.04); }
    100% { transform: translate3d(-1%, 3%, 0) scale(1.01); }
}

@keyframes founderAmbientPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.92; }
}

/* ================================================================
   ANIMATED GEOMETRIC SHAPES LAYER — all pages
   Bold glowing outlines — diamonds, rings, dots, bars, crosses.
   Clearly visible against dark background. z-index: 2.
   ================================================================ */
.site-bg-shapes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    overflow: hidden;
    mix-blend-mode: screen;
    opacity: 0.92;
}

.site-bg-shapes::before,
.site-bg-shapes::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(120, 215, 255, 0.86);
    box-shadow: 0 0 36px rgba(0, 210, 255, 0.42);
    opacity: 1;
    animation: bgsEdgeRing 16s ease-in-out infinite;
}

.site-bg-shapes::before {
    width: min(28vw, 360px);
    height: min(28vw, 360px);
    top: 10vh;
    left: 4vw;
}

.site-bg-shapes::after {
    width: min(22vw, 280px);
    height: min(22vw, 280px);
    right: 6vw;
    bottom: 16vh;
    border-color: rgba(190, 120, 255, 0.82);
    box-shadow: 0 0 32px rgba(190, 120, 255, 0.38);
    animation-name: bgsEdgeRingB;
    animation-duration: 18s;
}

.bgs {
    position: absolute;
    display: block;
    pointer-events: none;
    will-change: transform;
}

/* ── Diamonds ── */
.bgs--diamond {
    border-style: solid;
    transform-origin: center center;
    animation: bgsDiamond 13s ease-in-out infinite;
}
.bgs--d1 {
    width: 70px; height: 70px;
    top: 14vh; left: 6vw;
    border-width: 2px;
    border-color: rgba(0, 220, 255, 0.75);
    box-shadow: 0 0 14px rgba(0, 220, 255, 0.35), inset 0 0 14px rgba(0, 220, 255, 0.08);
    transform: rotate(45deg);
    animation-duration: 13s;
    animation-delay: 0s;
}
.bgs--d2 {
    width: 48px; height: 48px;
    top: 40vh; right: 8vw;
    border-width: 2px;
    border-color: rgba(190, 100, 255, 0.72);
    box-shadow: 0 0 14px rgba(190, 100, 255, 0.32), inset 0 0 12px rgba(190, 100, 255, 0.07);
    transform: rotate(45deg);
    animation-name: bgsDiamondB;
    animation-duration: 17s;
    animation-delay: -5s;
}
.bgs--d3 {
    width: 90px; height: 90px;
    bottom: 20vh; left: 12vw;
    border-width: 2px;
    border-color: rgba(0, 220, 255, 0.60);
    box-shadow: 0 0 18px rgba(0, 220, 255, 0.28);
    transform: rotate(45deg);
    animation-duration: 19s;
    animation-delay: -9s;
}

/* ── Rings ── */
.bgs--ring {
    display: none !important;
}
.bgs--r1 {
    width: 100px; height: 100px;
    top: 22vh; right: 12vw;
    border-width: 2px;
    border-color: rgba(0, 230, 195, 0.68);
    box-shadow: 0 0 16px rgba(0, 230, 195, 0.30);
    animation-duration: 12s;
    animation-delay: -2s;
}
.bgs--r2 {
    width: 62px; height: 62px;
    bottom: 32vh; right: 5vw;
    border-width: 2px;
    border-color: rgba(210, 100, 255, 0.66);
    box-shadow: 0 0 14px rgba(210, 100, 255, 0.28);
    animation-name: bgsRingPulseB;
    animation-duration: 9s;
    animation-delay: -6s;
}
.bgs--r3 {
    width: 140px; height: 140px;
    top: 52vh; left: 4vw;
    border-width: 1.5px;
    border-color: rgba(80, 168, 255, 0.55);
    box-shadow: 0 0 18px rgba(80, 168, 255, 0.22);
    animation-duration: 15s;
    animation-delay: -11s;
}

/* ── Dots ── */
.bgs--dot {
    border-radius: 50%;
    animation: bgsDotFloat 8s ease-in-out infinite;
}
.bgs--dot1 {
    width: 10px; height: 10px;
    top: 30vh; left: 26vw;
    background: rgba(0, 215, 255, 0.90);
    box-shadow: 0 0 18px 4px rgba(0, 215, 255, 0.55);
    animation-duration: 7s;
    animation-delay: 0s;
}
.bgs--dot2 {
    width: 8px; height: 8px;
    top: 60vh; right: 20vw;
    background: rgba(190, 100, 255, 0.88);
    box-shadow: 0 0 16px 4px rgba(190, 100, 255, 0.50);
    animation-name: bgsDotFloatB;
    animation-duration: 9s;
    animation-delay: -3s;
}
.bgs--dot3 {
    width: 11px; height: 11px;
    bottom: 20vh; left: 40vw;
    background: rgba(0, 230, 185, 0.88);
    box-shadow: 0 0 20px 4px rgba(0, 230, 185, 0.48);
    animation-duration: 11s;
    animation-delay: -6s;
}
.bgs--dot4 {
    width: 7px; height: 7px;
    top: 46vh; right: 36vw;
    background: rgba(255, 165, 55, 0.88);
    box-shadow: 0 0 14px 3px rgba(255, 165, 55, 0.45);
    animation-name: bgsDotFloatB;
    animation-duration: 6s;
    animation-delay: -1s;
}

/* ── Bars ── */
.bgs--bar {
    height: 2px;
    border-radius: 2px;
    animation: bgsBarDrift 12s ease-in-out infinite;
    transform-origin: center center;
}
.bgs--bar1 {
    width: 220px;
    top: 32vh; left: 18vw;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.80), transparent);
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.40);
    transform: rotate(-28deg);
    animation-duration: 12s;
    animation-delay: 0s;
}
.bgs--bar2 {
    width: 160px;
    top: 70vh; right: 16vw;
    background: linear-gradient(90deg, transparent, rgba(175, 80, 255, 0.75), transparent);
    box-shadow: 0 0 8px rgba(175, 80, 255, 0.36);
    transform: rotate(22deg);
    animation-name: bgsBarDriftB;
    animation-duration: 16s;
    animation-delay: -7s;
}

/* ── Crosses ── */
.bgs--cross {
    animation: bgsCrossSpin 18s linear infinite;
}
.bgs--cross1 {
    width: 28px; height: 28px;
    top: 44vh; left: 77vw;
    animation-duration: 20s;
    animation-delay: 0s;
}
.bgs--cross2 {
    width: 20px; height: 20px;
    top: 20vh; left: 54vw;
    animation-duration: 16s;
    animation-delay: -8s;
}
.bgs--cross::before,
.bgs--cross::after {
    content: "";
    position: absolute;
    background: rgba(0, 215, 255, 0.80);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 215, 255, 0.50);
}
.bgs--cross::before {
    width: 100%; height: 2px;
    top: 50%; left: 0;
    transform: translateY(-50%);
}
.bgs--cross::after {
    width: 2px; height: 100%;
    left: 50%; top: 0;
    transform: translateX(-50%);
}
.bgs--cross2::before,
.bgs--cross2::after {
    background: rgba(190, 100, 255, 0.78);
    box-shadow: 0 0 8px rgba(190, 100, 255, 0.46);
}

/* ── Keyframes ── */
@keyframes bgsDiamond {
    0%   { transform: rotate(45deg) translate(0, 0) scale(1); opacity: 0.80; }
    30%  { transform: rotate(65deg) translate(22px, -24px) scale(1.18); opacity: 1; }
    60%  { transform: rotate(28deg) translate(-16px, 18px) scale(0.85); opacity: 0.65; }
    100% { transform: rotate(45deg) translate(0, 0) scale(1); opacity: 0.80; }
}
@keyframes bgsDiamondB {
    0%   { transform: rotate(45deg) translate(0, 0) scale(1); opacity: 0.75; }
    35%  { transform: rotate(18deg) translate(-20px, 22px) scale(1.15); opacity: 1; }
    65%  { transform: rotate(64deg) translate(14px, -14px) scale(0.87); opacity: 0.60; }
    100% { transform: rotate(45deg) translate(0, 0) scale(1); opacity: 0.75; }
}
@keyframes bgsRingPulse {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.75; }
    40%  { transform: translate(18px, -22px) scale(1.20); opacity: 1; }
    70%  { transform: translate(-14px, 14px) scale(0.82); opacity: 0.55; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
}
@keyframes bgsRingPulseB {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.70; }
    45%  { transform: translate(-16px, 18px) scale(1.16); opacity: 1; }
    72%  { transform: translate(10px, -12px) scale(0.86); opacity: 0.52; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.70; }
}
@keyframes bgsDotFloat {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(20px, -28px) scale(1.3); }
    60%  { transform: translate(-16px, 18px) scale(0.8); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes bgsDotFloatB {
    0%   { transform: translate(0, 0) scale(1); }
    30%  { transform: translate(-22px, 20px) scale(1.25); }
    65%  { transform: translate(14px, -14px) scale(0.82); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes bgsBarDrift {
    0%   { transform: rotate(-28deg) translate(0, 0) scaleX(1); opacity: 0.65; }
    40%  { transform: rotate(-16deg) translate(26px, -18px) scaleX(1.2); opacity: 1; }
    70%  { transform: rotate(-36deg) translate(-18px, 12px) scaleX(0.8); opacity: 0.45; }
    100% { transform: rotate(-28deg) translate(0, 0) scaleX(1); opacity: 0.65; }
}
@keyframes bgsBarDriftB {
    0%   { transform: rotate(22deg) translate(0, 0) scaleX(1); opacity: 0.60; }
    40%  { transform: rotate(34deg) translate(-22px, 18px) scaleX(1.15); opacity: 0.95; }
    70%  { transform: rotate(12deg) translate(16px, -12px) scaleX(0.82); opacity: 0.40; }
    100% { transform: rotate(22deg) translate(0, 0) scaleX(1); opacity: 0.60; }
}
@keyframes bgsCrossSpin {
    0%   { transform: rotate(0deg) translate(0, 0) scale(1); opacity: 0.75; }
    50%  { transform: rotate(180deg) translate(10px, -12px) scale(1.2); opacity: 1; }
    100% { transform: rotate(360deg) translate(0, 0) scale(1); opacity: 0.75; }
}

@keyframes bgsEdgeRing {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(20px, -16px, 0) scale(1.12); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bgsEdgeRingB {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-18px, 14px, 0) scale(1.1); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 767.98px) {
    .site-bg-shapes { display: none; }
}

@media (max-width: 767.98px) {
    .site-global-orb--cyan,
    .site-global-orb--violet,
    .site-global-orb--amber,
    .site-global-orb--rose {
        filter: blur(48px);
    }
}

@media (max-width: 767.98px) {
    body.vibrant-shell .hero {
        justify-content: flex-start !important;
        min-height: auto !important;
        padding-top: 0.5in !important;
        padding-bottom: 1.6rem !important;
    }

    body.vibrant-shell .hero-heading {
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) {
    body.vibrant-shell .hero,
    body.vibrant-shell .hero-rings-image,
    body.vibrant-shell .hero-heading {
        overflow-y: visible !important;
    }

    body.vibrant-shell .hero {
        overflow-x: clip !important;
    }
}

/* Desktop frontend: keep only browser/root scrollbar active (no secondary page scroller). */
@media (min-width: 768px) {
    html {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-color: rgba(126, 156, 214, 0.72) rgba(10, 18, 40, 0.92);
        scrollbar-width: thin;
    }

    body.vibrant-shell {
        overflow: visible !important;
    }

    body.vibrant-shell #main-content {
        overflow: visible !important;
    }
}

html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: rgba(10, 18, 40, 0.92);
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(88, 136, 215, 0.95), rgba(46, 86, 158, 0.95));
    border-radius: 999px;
    border: 2px solid rgba(10, 18, 40, 0.92);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(104, 154, 236, 0.98), rgba(52, 96, 176, 0.98));
}