:root {
    --black: #000000;
    --purple: #6200C8;
    --dark-purple: #120022;
    --purple-glow: #7000E6;
}

/* Card styles, glow effects, glassmorphism UI */
.glow-accent {
    box-shadow: 0 0 20px rgba(155, 0, 255, 0.25);
}

.glow-border:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

/* ============================================================ */
/* CUSTOM FUTURISTIC PURPLE ARROW CURSOR (PC Mode Only)        */
/* ============================================================ */
@media (min-width: 768px) and (pointer: fine) {
    *, *::before, *::after, html, body, a, button, input, textarea, select, [role="button"], .cursor-pointer {
        cursor: none !important;
    }

    .custom-cursor {
        display: block !important;
        width: 38px;
        height: 38px;
        background-image: url('../assets/custom-cursor.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: fixed;
        top: -100px;
        left: -100px;
        pointer-events: none;
        z-index: 2147483647;
        transform: translate(-8%, -3%);
        transform-origin: 8% 3%;
        filter: drop-shadow(0 0 10px rgba(138, 0, 255, 0.75)) drop-shadow(0 0 22px rgba(176, 0, 255, 0.45));
        transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease, opacity 0.2s ease;
        will-change: left, top, transform;
    }

    .custom-cursor.cursor-hover {
        transform: translate(-8%, -3%) scale(1.22);
        filter: drop-shadow(0 0 16px rgba(176, 0, 255, 0.95)) drop-shadow(0 0 32px rgba(138, 0, 255, 0.75));
    }

    .custom-cursor.cursor-active {
        transform: translate(-8%, -3%) scale(0.9);
    }

    .custom-cursor-ring {
        display: block !important;
        width: 34px;
        height: 34px;
        border: 1.5px solid rgba(176, 0, 255, 0.5);
        box-shadow: 0 0 15px rgba(138, 0, 255, 0.4), inset 0 0 8px rgba(138, 0, 255, 0.25);
        border-radius: 50%;
        position: fixed;
        top: -100px;
        left: -100px;
        pointer-events: none;
        z-index: 2147483646;
        transform: translate(-50%, -50%);
        transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                    height 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                    border-color 0.2s ease, 
                    box-shadow 0.2s ease,
                    opacity 0.2s ease;
        will-change: left, top;
    }

    .custom-cursor-ring.cursor-hover {
        width: 48px;
        height: 48px;
        border-color: #d8b4fe;
        box-shadow: 0 0 24px rgba(176, 0, 255, 0.85), inset 0 0 12px rgba(138, 0, 255, 0.45);
    }
}

@media (max-width: 767px), (pointer: coarse) {
    .custom-cursor,
    .custom-cursor-ring {
        display: none !important;
    }
}

.hero-glow {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 2;
}

/* ============================================================ */
/* MOBILE HERO V2 — Reference-Match Styles                      */
/* ============================================================ */

/* ── Background: Purple Neon Ring Custom Mobile Background Video ── */
.mobile-hero-bg-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background-color: #000000;
    background-image: url('../assets/mobile-bg-purple.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.mobile-hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    z-index: 0;
}

.mobile-hero-bg-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Rich dark gradient overlay for deep dark atmosphere & smooth top/bottom transition */
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.55) 0%, 
        rgba(0, 0, 0, 0.25) 40%, 
        rgba(0, 0, 0, 0.65) 75%, 
        rgba(0, 0, 0, 0.98) 100%
    );
}

/* ── Mobile Robot Container & Spline 3D Character ── */
.mobile-robot-container {
    height: 330px;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Fade out softly at the bottom */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 95%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 95%);
}

.mobile-robot-halo {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(112, 0, 230, 0.35) 0%,
        rgba(98, 0, 200, 0.18) 35%,
        rgba(18, 0, 34, 0.05) 65%,
        transparent 75%
    );
    filter: blur(22px);
    pointer-events: none;
    z-index: 1;
}

.mobile-spline-robot {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    position: relative;
    z-index: 2;
    /* Increase size and push down into bottom fade */
    transform: translateY(22px) scale(1.18);
    transform-origin: center top;
    /* Ultra-Deep Dark Purple Colorizing Filter */
    filter: sepia(100%) hue-rotate(220deg) saturate(450%) brightness(0.60) contrast(1.25) drop-shadow(0 0 24px #6200C8);
}

.mobile-spline-robot::part(logo) {
    display: none !important;
}

.mobile-robot-img {
    position: relative;
    z-index: 2;
    height: 280px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    pointer-events: none;
    /* Soft shadow to ground the robot */
    filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.12)) drop-shadow(0 20px 60px rgba(0, 0, 0, 0.9));
}

/* ============================================================ */
/* UNIVERSAL DROPDOWN ANIMATION SYSTEM (PC & MOBILE)           */
/* ============================================================ */

@keyframes dropDownEnter {
    0% {
        opacity: 0;
        transform: translate3d(0, -36px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ── Mobile Hero Text Drop Down Animation on Load/Reload ── */
@keyframes mobileDropDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -36px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Hero Section Instant Load Dropdown Choreography */
.hero-dropdown-nav {
    animation: dropDownEnter 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-dropdown-bg-text {
    animation: dropDownEnter 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.hero-dropdown-1 {
    animation: dropDownEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.hero-dropdown-2 {
    animation: dropDownEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero-dropdown-3 {
    animation: dropDownEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}
.hero-dropdown-4 {
    animation: dropDownEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
.hero-dropdown-5 {
    animation: dropDownEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both;
}
.hero-dropdown-6 {
    animation: dropDownEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

/* Scroll-Triggered Dropdown Reveal System */
.dropdown-reveal {
    opacity: 0;
    transform: translate3d(0, -42px, 0);
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.dropdown-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Helper stagger classes */
.dropdown-delay-1 { transition-delay: 0.08s; }
.dropdown-delay-2 { transition-delay: 0.16s; }
.dropdown-delay-3 { transition-delay: 0.24s; }
.dropdown-delay-4 { transition-delay: 0.32s; }
.dropdown-delay-5 { transition-delay: 0.40s; }
.dropdown-delay-6 { transition-delay: 0.48s; }
.dropdown-delay-7 { transition-delay: 0.56s; }
.dropdown-delay-8 { transition-delay: 0.64s; }

/* Accessibility fallback */
@media (prefers-reduced-motion: reduce) {
    .dropdown-reveal,
    .hero-dropdown-nav,
    .hero-dropdown-bg-text,
    .hero-dropdown-1,
    .hero-dropdown-2,
    .hero-dropdown-3,
    .hero-dropdown-4,
    .hero-dropdown-5,
    .hero-dropdown-6 {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── // NEXT GEN SOLUTIONS small italic label ── */
.mobile-next-gen-label {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: #8A00FF;
    text-transform: uppercase;
    animation: dropDownEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

/* ── Main Headline: THE FUTURE OF THINKING ── */
.mobile-hero-v2-title {
    font-family: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 14vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    animation: dropDownEnter 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

/* ── "THINKING" word — in dark purple glow ── */
.mobile-hero-thinking {
    color: #6200C8;
    text-shadow: 0 0 16px rgba(98, 0, 200, 0.50);
}

/* ── Subheadline text ── */
.mobile-hero-v2-sub {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: #a1a1aa;
    text-align: center;
    max-width: 290px;
    animation: dropDownEnter 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

/* ── OUR FUTURE Pill button with Dark Purple Border Glow Animation ── */
.mobile-our-future-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-radius: 9999px;
    border: 1px solid rgba(98, 0, 200, 0.55);
    background: rgba(18, 0, 34, 0.65);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 15px rgba(98, 0, 200, 0.3), inset 0 0 15px rgba(98, 0, 200, 0.2);
    transition: all 0.3s ease;
    animation: dropDownEnter 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both, purpleBorderGlow 3s infinite alternate ease-in-out 0.95s;
}

.mobile-our-future-btn:active {
    transform: scale(0.97);
}

.mobile-our-future-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7000E6;
    flex-shrink: 0;
    box-shadow: 0 0 10px #7000E6, 0 0 18px #6200C8;
    animation: purplePulse 1.8s infinite ease-in-out;
}

@keyframes purplePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px #7000E6, 0 0 18px #6200C8;
    }
    50% {
        opacity: 0.35;
        transform: scale(0.75);
        box-shadow: 0 0 4px #7000E6;
    }
}

@keyframes purpleBorderGlow {
    0% {
        border-color: rgba(98, 0, 200, 0.45);
        box-shadow: 0 0 12px rgba(98, 0, 200, 0.25), inset 0 0 10px rgba(98, 0, 200, 0.15);
    }
    100% {
        border-color: rgba(112, 0, 230, 0.95);
        box-shadow: 0 0 24px rgba(112, 0, 230, 0.55), inset 0 0 18px rgba(98, 0, 200, 0.35);
    }
}

.mobile-our-future-text {
    /* inherits from parent */
}

/* ── Bottom 3-column Stats Bar — Capsule Container with Dark Purple Accents ── */
.mobile-stats-bar {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(98, 0, 200, 0.40);
    border-radius: 16px;
    background: rgba(8, 4, 14, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: calc(100% - 32px);
    margin: 0 16px 20px 16px;
    padding: 18px 0;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 20px rgba(98, 0, 200, 0.18);
    animation: dropDownEnter 1.0s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both;
}

.mobile-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 0 8px;
}

.mobile-stat-number {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    line-height: 1;
}

.mobile-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #7000E6;
    line-height: 1.4;
}

.mobile-stat-divider {
    width: 1px;
    background: rgba(98, 0, 200, 0.40);
    align-self: stretch;
    margin: 4px 0;
    box-shadow: 0 0 6px rgba(98, 0, 200, 0.3);
}

/* Legacy/kept for old classes referenced elsewhere (kept unchanged) */
.mobile-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    user-select: none;
    pointer-events: none;
    display: block;
}

/* Top Ambient Glow on Mobile - Diffused Monochrome Grey/Silver Top Left & Right Spotlights (Overlay on Background) */
.mobile-top-ambient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 320px;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    background: 
        /* Left Top grey glow — corner glowing overlay */
        radial-gradient(circle 260px at 0% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.22) 40%, rgba(0, 0, 0, 0) 75%),
        /* Right Top grey glow — corner glowing overlay */
        radial-gradient(circle 260px at 100% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.22) 40%, rgba(0, 0, 0, 0) 75%);
}

.mobile-top-left-ambient {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 260px;
    height: 260px;
    /* Blended: strong at tip, dissolves to nothing with no hard mid ring */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0) 70%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 1;
}

.mobile-top-right-ambient {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 260px;
    height: 260px;
    /* Blended: strong at tip, dissolves to nothing with no hard mid ring */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(0, 0, 0, 0) 70%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 1;
}

/* Infinite Smooth Marquee for Orange Tagline */
@keyframes marquee-scroll-smooth {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee-smooth {
    display: flex;
    width: max-content;
    animation: marquee-scroll-smooth 8s linear infinite;
}

.animate-marquee-smooth:hover {
    animation-play-state: paused;
}

/* OUR FUTURE Pill — static border with moving line and inner glow */
.mobile-border-beam-pill {
    position: relative;
    border-radius: 9999px;
    padding: 1.5px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15); /* Static faint grey border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix iOS/Safari border-radius overflow clip */
}

/* Layer 1: Sharp thin line moving along the border edge & corners */
.mobile-border-beam-pill::after {
    content: '';
    position: absolute;
    width: 250%;
    height: 600%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 325deg,
        rgba(200, 212, 230, 0.40) 338deg,
        rgba(240, 245, 255, 0.90) 348deg,
        rgba(255, 255, 255, 1.00) 354deg,
        transparent 360deg
    );
    animation: mobile-beam-spin 5s linear infinite;
    z-index: 0;
}

/* Inner pill with solid dark background */
.mobile-border-beam-inner {
    position: relative;
    z-index: 1;
    background: #09090b;
    border-radius: 9999px;
    overflow: hidden; /* Clips the inner glow perfectly to pill shape */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Layer 2: The soft inner glow overlay INSIDE the inner pill (toned down & subtle) */
.mobile-border-beam-inner::before {
    content: '';
    position: absolute;
    width: 250%;
    height: 600%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    /* Soft, subtle light gradient radiating inwards smoothly */
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(180, 200, 230, 0.08) 315deg,
        rgba(210, 230, 255, 0.18) 330deg,
        rgba(255, 255, 255, 0.28) 345deg,
        rgba(210, 230, 255, 0.18) 354deg,
        rgba(180, 200, 230, 0.06) 358deg,
        transparent 360deg
    );
    filter: blur(10px);
    mix-blend-mode: screen;
    animation: mobile-beam-spin 5s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes mobile-beam-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Hero Title Typography & Gradient (legacy — kept for reference) */
.mobile-hero-title {
    font-family: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 0.95;
    display: inline-block !important;
    width: fit-content !important;
    max-width: 92vw;
    /* Balanced horizontal fade: soft muted silver on sides (22%), ramping smoothly to solid white at center */
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.45) 16%,
        rgba(255, 255, 255, 0.82) 34%,
        #ffffff 50%,
        rgba(255, 255, 255, 0.82) 66%,
        rgba(255, 255, 255, 0.45) 84%,
        rgba(255, 255, 255, 0.22) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    -webkit-font-smoothing: antialiased;
}


/* Bento Grid & Spotlight */
.bento-card {
    position: relative;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bento-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.spotlight-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(112, 0, 230, 0.12), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.bento-card:hover .spotlight-overlay {
    opacity: 1;
}

/* Equalizer Animation */
.eq-bar {
    width: 100%;
    background-color: #7000E6;
    opacity: 0.8;
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
    animation: eq-bounce 1s infinite ease-in-out alternate;
}

@keyframes eq-bounce {
    0% {
        transform: scaleY(0.2);
    }

    100% {
        transform: scaleY(1);
    }
}

.eq-bar:nth-child(1) {
    animation-duration: 0.7s;
    animation-delay: -0.2s;
}

.eq-bar:nth-child(2) {
    animation-duration: 0.5s;
    animation-delay: -0.4s;
}

.eq-bar:nth-child(3) {
    animation-duration: 0.9s;
    animation-delay: -0.1s;
}

.eq-bar:nth-child(4) {
    animation-duration: 0.6s;
    animation-delay: -0.5s;
}

.eq-bar:nth-child(5) {
    animation-duration: 0.8s;
    animation-delay: -0.3s;
}

.eq-bar:nth-child(6) {
    animation-duration: 0.4s;
    animation-delay: -0.6s;
}

.eq-bar:nth-child(7) {
    animation-duration: 0.7s;
    animation-delay: -0.1s;
}

/* Terminal Log Animation */
.log-slide {
    animation: slideUpLog 6s steps(6) infinite;
}

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

    100% {
        transform: translateY(-120px);
    }
}

/* CSS Wireframe Cube */
.scene {
    width: 100px;
    height: 100px;
    perspective: 400px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 10s infinite linear;
}

.cube__face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(112, 0, 230, 0.5);
    background: rgba(98, 0, 200, 0.08);
}

.cube__face--front {
    transform: rotateY(0deg) translateZ(50px);
}

.cube__face--right {
    transform: rotateY(90deg) translateZ(50px);
}

.cube__face--back {
    transform: rotateY(180deg) translateZ(50px);
}

.cube__face--left {
    transform: rotateY(-90deg) translateZ(50px);
}

.cube__face--top {
    transform: rotateX(90deg) translateZ(50px);
}

.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(50px);
}

@keyframes rotateCube {
    0% {
        transform: translateZ(-50px) rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: translateZ(-50px) rotateX(360deg) rotateY(360deg);
    }
}

/* Circuit SVG Pulse */
.circuit-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: pulseCircuit 4s infinite linear;
}

@keyframes pulseCircuit {
    0% {
        stroke-dashoffset: 1000;
    }

    50% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -1000;
    }
}

/* Terminal UI */
.terminal-window {
    background: #0c0c0e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
}

.terminal-header {
    background: #151518;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-red {
    background-color: #ff5f56;
}

.dot-yellow {
    background-color: #7000E6;
}

.dot-green {
    background-color: #27c93f;
}

.typewriter-cursor {
    display: inline-block;
    width: 8px;
    height: 15px;
    background-color: #8A00FF;
    animation: blinkCursor 1s step-end infinite;
    vertical-align: middle;
}

@keyframes blinkCursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Scanline Overlay */
.scanline-overlay {
    position: relative;
}

.scanline-overlay::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.2));
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
}

/* Process Line */
.process-line {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(112, 0, 230, 0.5) 0%, rgba(112, 0, 230, 0) 100%);
    z-index: 0;
}

/* -------------------------------- */
/* Swipe Up Text Hover Effect       */
/* -------------------------------- */
.swipe-up-hover {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    vertical-align: middle;
}

.swipe-up-hover::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    color: rgba(255, 255, 255, 0.9);
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.swipe-up-hover span {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.swipe-up-hover:hover::after,
.swipe-up-hover:hover span {
    transform: translateY(-100%);
}

/* ============================================================ */
/* MAJISTECH WEBSITE CONFIGURATOR & ESTIMATOR COMPONENT STYLES   */
/* ============================================================ */
.config-stepper-btn {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.config-stepper-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(155, 0, 255, 0.5);
}
.config-stepper-btn:active {
    transform: scale(0.94);
}

.config-step-panel {
    animation: configFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.config-glass-card {
    background: linear-gradient(160deg, rgba(20, 10, 35, 0.7) 0%, rgba(10, 10, 14, 0.9) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.config-glass-sidebar {
    background: linear-gradient(170deg, #18032d 0%, #0c0217 40%, #05010a 100%);
    border: 1px solid rgba(155, 0, 255, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(155, 0, 255, 0.15);
}

.config-section-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.config-section-card:hover:not(:disabled) {
    transform: translateY(-2px);
}

.config-pulse-glow {
    animation: configGlowPulse 3s ease-in-out infinite alternate;
}

@keyframes configGlowPulse {
    0% {
        box-shadow: 0 0 15px rgba(155, 0, 255, 0.25);
    }
    100% {
        box-shadow: 0 0 35px rgba(176, 0, 255, 0.55);
    }
}

/* ============================================================ */
/* STACKING CARDS HARDWARE-ACCELERATED SCROLL STACK             */
/* ============================================================ */

/* The parent section and container */
.services-stacked-section {
  position: relative !important;
  overflow: visible !important;
}

/* ── GSAP Desktop Stack (≥ 1024px) ──────────────────────────────────
   When .gsap-stack-active is present, GSAP JS handles positioning.
   CSS provides normal block layout container and visual styling. */
@media (min-width: 1024px) {
  #services.gsap-stack-active {
    display: block !important;
    position: relative;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #services.gsap-stack-active .max-w-7xl.mx-auto {
    width: 100% !important;
    margin-bottom: 2rem !important;
  }

  /* Card Stack Stage Wrapper: normal block flow, NO !important on position so ScrollTrigger can pin with position:fixed */
  #services.gsap-stack-active .services-wrapper,
  #services.gsap-stack-active .services-stack-container {
    display: block !important;
    position: relative;
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #services.gsap-stack-active .services-wrapper > div:not(.service-card),
  #services.gsap-stack-active .services-wrapper > *:not(.service-card) {
    display: contents !important;
  }

  #services.gsap-stack-active .service-card,
  #services.gsap-stack-active .service-card-stack {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 1120px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background-color: #0A0A0C !important;
    background: #0A0A0C !important;
    opacity: 1 !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    will-change: transform, box-shadow, border-color !important;
    transition: none !important;
  }

  #services.gsap-stack-active .service-card:nth-child(1) { z-index: 10 !important; }
  #services.gsap-stack-active .service-card:nth-child(2) { z-index: 20 !important; }
  #services.gsap-stack-active .service-card:nth-child(3) { z-index: 30 !important; }
  #services.gsap-stack-active .service-card:nth-child(4) { z-index: 40 !important; }
  #services.gsap-stack-active .service-card:nth-child(5) { z-index: 50 !important; }
  #services.gsap-stack-active .service-card:nth-child(6) { z-index: 60 !important; }
  #services.gsap-stack-active .service-card:nth-child(7) { z-index: 70 !important; }
  #services.gsap-stack-active .service-card:nth-child(8) { z-index: 80 !important; }
  #services.gsap-stack-active .service-card:nth-child(9) { z-index: 90 !important; }

  #services.gsap-stack-active .lead-service-card {
    display: none !important;
  }
}

/* ── Tablet Fallback: 769px–1023px keeps original CSS sticky ──────── */
@media (min-width: 769px) and (max-width: 1023px) {
  .services-stacked-section {
    position: relative !important;
    overflow: visible !important;
    display: block !important;
    height: auto !important;
    min-height: auto !important;
  }

  .services-wrapper,
  .services-stack-container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    padding-bottom: 3rem !important;
    overflow: visible !important;
  }

  .services-wrapper > div:not(.service-card),
  .services-wrapper > *:not(.service-card) {
    display: contents !important;
  }

  .service-card,
  .service-card-stack {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    width: 100% !important;
    max-width: 1120px !important;
    height: auto !important;
    min-height: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 75vh !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background-color: #0A0A0C !important;
    background: #0A0A0C !important;
    opacity: 1 !important;
    clear: both !important;
    box-shadow: 0 -25px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(138, 0, 255, 0.35) !important;
    isolation: isolate !important;
    will-change: transform;
    transform: translateZ(0);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
  }

  .service-card:last-child,
  .service-card-stack:last-child {
    margin-bottom: 0 !important;
  }

  .service-card:nth-child(1), .service-card-stack:nth-child(1) { z-index: 10 !important; border: 1px solid rgba(138,0,255,0.35) !important; box-shadow: 0 -20px 50px rgba(0,0,0,0.9), 0 0 16px rgba(138,0,255,0.20), 0 10px 30px rgba(0,0,0,0.85) !important; }
  .service-card:nth-child(2), .service-card-stack:nth-child(2) { z-index: 20 !important; border: 1px solid rgba(138,0,255,0.45) !important; box-shadow: 0 -20px 50px rgba(0,0,0,0.9), 0 0 22px rgba(138,0,255,0.26), 0 12px 35px rgba(0,0,0,0.85) !important; }
  .service-card:nth-child(3), .service-card-stack:nth-child(3) { z-index: 30 !important; border: 1.2px solid rgba(147,51,234,0.52) !important; box-shadow: 0 -22px 55px rgba(0,0,0,0.9), 0 0 28px rgba(138,0,255,0.32), 0 14px 40px rgba(0,0,0,0.88) !important; }
  .service-card:nth-child(4), .service-card-stack:nth-child(4) { z-index: 40 !important; border: 1.2px solid rgba(147,51,234,0.60) !important; box-shadow: 0 -22px 55px rgba(0,0,0,0.9), 0 0 34px rgba(138,0,255,0.38), 0 16px 45px rgba(0,0,0,0.88) !important; }
  .service-card:nth-child(5), .service-card-stack:nth-child(5) { z-index: 50 !important; border: 1.4px solid rgba(168,85,247,0.68) !important; box-shadow: 0 -25px 60px rgba(0,0,0,0.92), 0 0 42px rgba(138,0,255,0.44), 0 18px 50px rgba(0,0,0,0.9) !important; }
  .service-card:nth-child(6), .service-card-stack:nth-child(6) { z-index: 60 !important; border: 1.4px solid rgba(168,85,247,0.75) !important; box-shadow: 0 -25px 60px rgba(0,0,0,0.92), 0 0 50px rgba(138,0,255,0.50), 0 20px 55px rgba(0,0,0,0.92) !important; }
  .service-card:nth-child(7), .service-card-stack:nth-child(7) { z-index: 70 !important; border: 1.6px solid rgba(168,85,247,0.82) !important; box-shadow: 0 -25px 60px rgba(0,0,0,0.92), 0 0 58px rgba(138,0,255,0.56), 0 22px 58px rgba(0,0,0,0.95) !important; }
  .service-card:nth-child(8), .service-card-stack:nth-child(8) { z-index: 80 !important; border: 1.6px solid rgba(168,85,247,0.90) !important; box-shadow: 0 -25px 60px rgba(0,0,0,0.92), 0 0 68px rgba(138,0,255,0.62), 0 24px 60px rgba(0,0,0,0.95) !important; }
  .service-card:nth-child(9), .service-card-stack:nth-child(9) { z-index: 90 !important; border: 1.8px solid #c084fc !important; box-shadow: 0 -25px 60px rgba(0,0,0,0.95), 0 0 78px rgba(138,0,255,0.70), 0 0 30px rgba(192,132,252,0.45), 0 26px 65px rgba(0,0,0,0.95) !important; }

  .lead-service-card {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Mobile Services Section - Interactive Folder Tab System */
  #services.services-stacked-section {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
    padding-top: 3.5rem !important;
    padding-bottom: 4.5rem !important;
    background: #0a0a0c !important;
    display: block !important;
  }

  .mobile-services-container {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  /* Folder Tab Styling */
  .folder-card {
    position: relative;
    border-radius: 18px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  }

  .folder-tab-handle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px 5px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    user-select: none;
    transition: all 0.25s ease;
  }

  .folder-card.active {
    box-shadow: 0 20px 45px rgba(138, 0, 255, 0.3), 0 0 0 1.5px rgba(138, 0, 255, 0.5) !important;
    transform: translateY(-2px);
    z-index: 10;
  }

  .folder-card.active .folder-chevron {
    transform: rotate(90deg);
    color: #8A00FF;
  }

  /* ======================================================== */
  /* CYBER GLASS CASCADE SERVICES SYSTEM (ROBOT HAND 3D STACK) */
  /* ======================================================== */
  .services-cyber-section {
    position: relative;
    width: 100%;
    background: #08060f;
    overflow: visible;
  }

  .cyber-robot-hand-frame {
    position: relative;
    border-radius: 28px;
    background: #090714;
    border: 1px solid rgba(138, 0, 255, 0.35);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(138, 0, 255, 0.25);
    overflow: hidden;
    animation: floatingHand 6s ease-in-out infinite;
  }

  @keyframes floatingHand {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  /* 3D Angled Cascading Glass Cards Stack */
  .cascade-stack-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    perspective: 1200px;
  }

  @media (min-width: 1024px) {
    .cascade-card-stagger-0 { transform: translateX(0px); }
    .cascade-card-stagger-1 { transform: translateX(12px); }
    .cascade-card-stagger-2 { transform: translateX(24px); }
    .cascade-card-stagger-3 { transform: translateX(36px); }
    .cascade-card-stagger-4 { transform: translateX(48px); }
    .cascade-card-stagger-5 { transform: translateX(36px); }
    .cascade-card-stagger-6 { transform: translateX(24px); }
    .cascade-card-stagger-7 { transform: translateX(12px); }
    .cascade-card-stagger-8 { transform: translateX(0px); }

    .cascade-card-stagger-0:hover, .cascade-card-stagger-0.active { transform: translateX(0px) scale(1.02); }
    .cascade-card-stagger-1:hover, .cascade-card-stagger-1.active { transform: translateX(12px) scale(1.02); }
    .cascade-card-stagger-2:hover, .cascade-card-stagger-2.active { transform: translateX(24px) scale(1.02); }
    .cascade-card-stagger-3:hover, .cascade-card-stagger-3.active { transform: translateX(36px) scale(1.02); }
    .cascade-card-stagger-4:hover, .cascade-card-stagger-4.active { transform: translateX(48px) scale(1.02); }
    .cascade-card-stagger-5:hover, .cascade-card-stagger-5.active { transform: translateX(36px) scale(1.02); }
    .cascade-card-stagger-6:hover, .cascade-card-stagger-6.active { transform: translateX(24px) scale(1.02); }
    .cascade-card-stagger-7:hover, .cascade-card-stagger-7.active { transform: translateX(12px) scale(1.02); }
    .cascade-card-stagger-8:hover, .cascade-card-stagger-8.active { transform: translateX(0px) scale(1.02); }
  }

  .cyber-glass-card {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(22, 16, 44, 0.85) 0%, rgba(10, 8, 22, 0.92) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(138, 0, 255, 0.35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 0 20px rgba(138, 0, 255, 0.12);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
  }

  .cyber-glass-card:hover {
    border-color: rgba(168, 85, 247, 0.8);
    box-shadow: 0 18px 45px rgba(138, 0, 255, 0.35), 0 0 35px rgba(138, 0, 255, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  }

  .cyber-glass-card.active {
    border-color: #8A00FF !important;
    background: linear-gradient(135deg, rgba(34, 22, 68, 0.95) 0%, rgba(14, 10, 30, 0.98) 100%) !important;
    box-shadow: 0 22px 55px rgba(138, 0, 255, 0.45), 0 0 45px rgba(138, 0, 255, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
    z-index: 20;
  }

  .cyber-glass-card.active .cyber-card-chevron {
    transform: rotate(90deg);
    color: #c084fc;
  }

  .cyber-bullet-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #8A00FF;
    box-shadow: 0 0 8px #8A00FF, 0 0 14px rgba(138, 0, 255, 0.8);
    flex-shrink: 0;
    animation: purpleBulletBlink 1.8s infinite ease-in-out;
  }

  @keyframes purpleBulletBlink {
    0%, 100% {
      opacity: 0.4;
      transform: scale(0.85);
      box-shadow: 0 0 4px #8A00FF;
    }
    50% {
      opacity: 1;
      transform: scale(1.25);
      box-shadow: 0 0 12px #8A00FF, 0 0 20px rgba(138, 0, 255, 1);
    }
  }
}

/* ======================================================== */
/* CONVEX DOME ARCH MOBILE SERVICES CAROUSEL                */
/* (Matching Rainbow Convex Arc Reference Design)           */
/* ======================================================== */

/* Soft Top Swipe Gesture Pill */
.convex-swipe-gesture-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(18, 14, 32, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(138, 0, 255, 0.22);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
  transition: all 0.3s ease;
}

.convex-swipe-gesture-pill:hover {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(24, 18, 44, 0.7);
  box-shadow: 0 4px 18px rgba(138, 0, 255, 0.18);
}

.swipe-hand-left {
  display: inline-block;
  animation: swipeHintLeft 1.5s ease-in-out infinite;
}

.swipe-hand-right {
  display: inline-block;
  animation: swipeHintRight 1.5s ease-in-out infinite;
}

@keyframes swipeHintLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

@keyframes swipeHintRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.convex-services-mobile-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0 0.5rem;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* 3D Stage Viewport */
.convex-dome-stage {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  perspective: 1200px;
  -webkit-perspective: 1200px;
  perspective-origin: 50% 38%;
  -webkit-perspective-origin: 50% 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y pinch-zoom;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, transparent 100%);
}

@media (min-width: 440px) {
  .convex-dome-stage {
    height: 410px;
  }
}

@media (min-width: 640px) {
  .convex-dome-stage {
    height: 440px;
  }
}

/* The Cards Wrapper */
.convex-dome-cards-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Individual Sleek 3D Service Card (Balanced proportions - No excessive overlaying) */
.convex-dome-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 215px;
  height: 320px;
  margin-top: -160px;
  margin-left: -107.5px;
  border-radius: 22px;
  overflow: hidden;
  background: #0d0a1c;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  transform-origin: center center;
  will-change: transform, opacity, filter, box-shadow;
  transition: opacity 0.25s ease, filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

@media (min-width: 440px) {
  .convex-dome-card {
    width: 235px;
    height: 345px;
    margin-top: -172.5px;
    margin-left: -117.5px;
    border-radius: 24px;
  }
}

@media (min-width: 640px) {
  .convex-dome-card {
    width: 255px;
    height: 375px;
    margin-top: -187.5px;
    margin-left: -127.5px;
    border-radius: 26px;
  }
}

.convex-dome-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: brightness(0.72) contrast(1.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.convex-dome-card:hover img,
.convex-dome-card.is-active img {
  transform: scale(1.04);
  filter: brightness(1.02) contrast(1.08);
}

/* Category Badge on Card */
.convex-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 4px 11px;
  border-radius: 9999px;
  background: rgba(10, 8, 20, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(138, 0, 255, 0.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  color: #c084fc;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease;
}

/* Bottom Overlay with Service Name */
.convex-card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 42px 14px 14px;
  background: linear-gradient(to top, rgba(6, 4, 15, 0.98) 0%, rgba(6, 4, 15, 0.8) 55%, transparent 100%);
  pointer-events: none;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.convex-card-caption h4 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
  margin-bottom: 2px;
}

@media (min-width: 440px) {
  .convex-card-caption h4 {
    font-size: 15px;
  }
}

.convex-card-tag {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: #c084fc;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Active Highlight Card Glow */
.convex-dome-card.is-active {
  border-color: #8A00FF !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.95),
    0 0 35px rgba(138, 0, 255, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.convex-dome-card.is-active .convex-card-badge {
  background: #8A00FF;
  color: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 0 14px rgba(138, 0, 255, 0.85);
}

/* Navigation Arrows */
.convex-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(14, 10, 26, 0.92);
  border: 1.5px solid rgba(138, 0, 255, 0.45);
  color: #e4e4e7;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: all 0.25s ease;
}

.convex-nav-btn:hover {
  background: #8A00FF;
  color: #ffffff;
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(138, 0, 255, 0.8);
  transform: translateY(-50%) scale(1.08);
}

.convex-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.convex-nav-prev {
  left: 8px;
}

.convex-nav-next {
  right: 8px;
}

/* Pagination Dots */
.convex-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.convex-dot.is-active {
  width: 22px;
  background: #8A00FF;
  box-shadow: 0 0 10px #8A00FF;
}

/* 3-Pillar Feature Card Boxes */
.convex-feature-box {
  background: linear-gradient(145deg, rgba(20, 15, 40, 0.75) 0%, rgba(10, 8, 20, 0.92) 100%);
  border: 1px solid rgba(138, 0, 255, 0.22);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.convex-feature-box:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 12px 28px rgba(138, 0, 255, 0.2);
  transform: translateY(-2px);
}