:root {
            --glass: rgba(25, 27, 46, .78);
            --glass-hover: rgba(37, 40, 65, .9);
            --glass-border: rgba(215, 214, 255, .18);
            --mouse-x: 50%;
            --mouse-y: 50%;
        }

        body {
            background-color: #080911;
            overflow-x: hidden;
            /* Prevent pull-to-refresh on mobile which ruins the app feel */
            overscroll-behavior: none; 
        }

        /* Cinematic Background */
        .ambient-light {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            z-index: -1;
            background: #080911;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(110px);
            opacity: 0.35;
            animation: blob 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Mobile-optimized Orbs: Larger relative size for small screens */
        .orb-1 { top: -5%; left: -20%; width: 80vw; height: 80vw; background: #4f46e5; } 
        .orb-2 { bottom: -10%; right: -20%; width: 80vw; height: 80vw; background: #be185d; animation-delay: -5s; } 
        .orb-3 { top: 40%; left: 30%; width: 60vw; height: 60vw; background: #0f766e; animation-delay: -10s; opacity: 0.4; } 

        @media (min-width: 768px) {
            .orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; }
            .orb-2 { bottom: -10%; right: -10%; width: 50vw; height: 50vw; }
            .orb-3 { top: 40%; left: 40%; width: 40vw; height: 40vw; }
        }

        /* Noise Texture */
        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
        }

        /* Glassmorphism Card */
        .card-glass {
            background-color: var(--glass);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 24px;
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: default;
            /* Better touch targets */
            touch-action: manipulation;
        }

        /* Desktop: Dynamic Border Glow via Mouse */
        @media (hover: hover) {
            .card-glass::before {
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                border-radius: 24px;
                padding: 2px;
                background: radial-gradient(
                    800px circle at var(--mouse-x) var(--mouse-y), 
                    rgba(255,255,255,0.2),
                    transparent 40%
                );
                z-index: 1;
                opacity: 0;
                transition: opacity 0.5s;
                pointer-events: none;
                mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                mask-composite: exclude;
                -webkit-mask-composite: xor;
            }

            .card-glass:hover::before {
                opacity: 1;
            }

            .card-glass[onclick]:hover, a.card-glass:hover {
                transform: translateY(-4px);
                background-color: var(--glass-hover);
                box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
                border-color: rgba(255,255,255,0.3);
            }
        }

        /* Mobile: Tap feedback */
        .card-glass[onclick]:active, a.card-glass:active {
            transform: scale(0.99);
            background-color: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .card-content {
            z-index: 2;
            position: relative;
        }

        /* Shimmer Effect (Desktop only to save mobile battery/performance) */
        @media (min-width: 768px) {
            .shimmer {
                position: absolute;
                top: 0;
                left: -100%;
                width: 50%;
                height: 100%;
                background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
                transform: skewX(-20deg);
                transition: 0.5s;
                pointer-events: none;
            }
            
            .card-glass:hover .shimmer {
                left: 150%;
                transition: 0.7s ease-in-out;
            }
        }

        /* Utilities */
        .text-glow {
            text-shadow: 0 0 20px rgba(255,255,255,0.3);
            letter-spacing: -0.02em;
        }
        
        .logo-text {
            font-feature-settings: "ss01", "ss02";
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
        
        .view-section {
            display: none;
            animation: fadeZoom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            padding-bottom: 80px; /* Space for footer/scroll */
        }
        
        .view-section.active {
            display: block;
        }

        @keyframes fadeZoom {
            from { opacity: 0; transform: scale(0.98); filter: blur(5px); }
            to { opacity: 1; transform: scale(1); filter: blur(0); }
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 10px #22c55e, 0 0 20px #22c55e; }
            50% { box-shadow: 0 0 20px #22c55e, 0 0 40px #22c55e; }
        }
        
        .status-dot {
            box-shadow: 0 0 0 4px rgba(110, 231, 183, .09);
        }
        
        /* Visible CTA Indicator on Cards */
        .card-cta-icon {
            opacity: 0.35; /* Higher base opacity for mobile visibility */
            transition: all 0.3s ease;
        }
        
        @media (hover: hover) {
            .card-cta-icon {
                opacity: 0.4;
            }
            .card-glass:hover .card-cta-icon {
                opacity: 1;
                transform: translateX(4px);
            }
        }
        
        /* Reduced Motion & Performance Mode */
        @media (prefers-reduced-motion: reduce) {
            .orb, .shimmer, .status-dot {
                animation: none !important;
            }
            .card-glass::before {
                display: none !important; /* Disable expensive spotlight calculation */
            }
            .card-glass, .card-glass:hover, .view-section {
                transition: none !important;
                transform: none !important;
            }
        }
        /* First Time Visitor Modal */
        #welcome-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 100;
            justify-content: center;
            align-items: center;
            padding: 20px;
            animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #welcome-modal.visible {
            display: flex;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }


/* The original glass palette, with deeper surfaces and clearer hierarchy. */
:root {
    --ink: #f4f3ff;
    --muted: #b3b3c9;
    --lavender: #c3b6ff;
}
body { color: var(--ink); line-height: 1.65; }
.ambient-light { background-image: radial-gradient(ellipse at 25% 5%, #34276735, transparent 65%); }
.orb-1 { background: #6350d7; opacity: .34; }
.orb-2 { background: #a83f85; opacity: .2; }
.orb-3 { background: #286c87; opacity: .2; }
main { isolation: isolate; }
main > header { padding-bottom: 24px; height: auto !important; min-height: 80px; border-bottom: 1px solid #c9c7ff16; }
.logo-text { letter-spacing: -.04em; }
.logo-text > span { margin-left: .15em; color: #bcb1ef; }
header .status-dot { background: #8bd9b7; }
header .text-green-400 { color: #a6ddc4; }
.home-intro { padding: 22px 0 10px; position: relative; }
.home-eyebrow { color: #c1b7e4; font-size: 13px; font-weight: 500; margin: 0 0 18px; letter-spacing: .025em; }
.home-eyebrow > span { display: inline-block; margin-right: 9px; color: #d7ccff; }
#greeting { font-size: clamp(42px, 6.8vw, 84px); line-height: 1.05; font-weight: 600; letter-spacing: -.065em; padding-bottom: .08em; background-image: linear-gradient(115deg, #fff 10%, #ece6ff 55%, #a69acb); text-shadow: none; }
.home-intro > p:last-child { border: 0; padding-left: 0; color: var(--muted); font-size: 17px; }
.card-glass { background-image: linear-gradient(140deg, #ffffff07, transparent 55%); box-shadow: inset 0 1px 0 #ffffff09, 0 16px 40px #00000020; }
.card-glass[onclick], a.card-glass { cursor: pointer; }
.card-glass:not([onclick]):not(a) { cursor: default; }
.service-grid { gap: 20px !important; }
.service-grid > .card-glass { padding: 28px; min-height: 225px; }
.service-grid > .card-glass:not(.cinema-card) { background-image: radial-gradient(ellipse at 10% 0%, #aaa0ff13, transparent 75%); }
.service-grid > .card-glass:nth-child(2) { background-image: radial-gradient(ellipse at 10% 0%, #e1a76e13, transparent 75%); }
.service-grid > .card-glass:nth-child(3) { background-image: radial-gradient(ellipse at 10% 0%, #76d4b61a, transparent 75%); }
.service-grid > .card-glass:nth-child(5) { background-image: radial-gradient(ellipse at 10% 0%, #7dbeef1a, transparent 75%); }
.service-grid > .card-glass:last-child { min-height: 84px; padding: 20px 26px; }
.service-grid h3 { letter-spacing: -.035em; font-weight: 600; }
.service-grid > .card-glass:not(.cinema-card) h3 { font-size: 23px; margin-bottom: 14px; }
.service-grid .card-content > .w-10 { width: 46px; height: 46px; border: 1px solid #ffffff12; border-radius: 14px; box-shadow: inset 0 1px 0 #ffffff0c; }
.service-grid .card-content .border-t { border-color: #ffffff12; padding-top: 14px; }
.service-grid .uppercase { letter-spacing: .06em; font-size: 10px; color: #bdb9d0; }
.cinema-card { min-height: 470px !important; padding: 36px !important; background: radial-gradient(ellipse at 85% 65%, #8763c83d, transparent 65%), linear-gradient(130deg, #30264e, #191d37 80%); border-color: #c8b5ff3b; }
.cinema-card h3 { font-size: 48px; margin-bottom: 12px; letter-spacing: -.05em; }
.cinema-card p { color: #d1c8e4; font-size: 16px; max-width: 290px; }
.cinema-card p.italic { max-width: 265px; font-size: 12px; color: #b6abc9; line-height: 1.65; }
.cinema-card .card-content:first-of-type { pointer-events: none; }
.cinema-card .card-content:last-child { flex-wrap: wrap; gap: 10px; }
.cinema-card button { background: linear-gradient(130deg, #ebe4ff, #c3b0ed); color: #2d2049; border: 1px solid #f1e7ff80; box-shadow: 0 5px 20px #09061525, inset 0 1px 0 #fff8; }
.cinema-card button:hover { background: #e9ddff; }
.cinema-card button, .cinema-card [role='button'] { font-size: 13px; padding: 13px 16px; }
.cinema-card [role='button'] { background: #ffffff0b; border-color: #d5c7f62b; }
.cinema-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.screen-halo { position: absolute; width: 330px; height: 330px; right: -90px; top: 70px; border-radius: 50%; background: radial-gradient(circle, #b990ff40, #9486ff08 60%, transparent 70%); }
.glass-screen { position: absolute; width: 205px; height: 143px; right: -17px; top: 155px; border-radius: 20px; transform: perspective(550px) rotateY(-25deg) rotateZ(-12deg); background: linear-gradient(150deg, #ede5ff3d, #9481cb18 45%, #3e37696e); border: 1px solid #dbccff6b; box-shadow: inset 2px 2px 2px #ffffff25, 12px 20px 50px #11082255, 5px 5px 0 #aa94d722; }
.screen-play { position: absolute; top: 35px; left: 80px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(140deg, #fbf4ff, #b09cd9); box-shadow: 0 6px 20px #0003, inset 0 1px 0 #fff; }
.screen-play::after { content: ''; position: absolute; left: 22px; top: 17px; border-left: 15px solid #544270; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.screen-progress { position: absolute; bottom: 19px; left: 20px; right: 20px; height: 3px; background: #efe8ff23; border-radius: 2px; }
.screen-progress::after { content: ''; position: absolute; width: 35%; height: 100%; background: #d9c9fb; }
.art-spark { position: absolute; color: #d6c5f5a3; font-size: 30px; }
.spark-one { right: 42px; top: 111px; }.spark-two { right: 178px; top: 305px; font-size: 19px; }
.view-section:not(#home) h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
.view-section:not(#home) p.text-sm, .view-section:not(#home) p.text-xs { font-size: 15px; line-height: 1.75; }
.text-gray-400 { color: #b3b3c9 !important; }
.text-gray-500, .text-gray-600 { color: #a5a3ba !important; }
button, a.block, [role='button'] { min-height: 44px; }
:focus-visible { outline: 2px solid #d6c2ff !important; outline-offset: 4px; }
#main-content:focus { outline: none; }
input:not([type='hidden']), textarea { background: #0c0d1b80 !important; border-color: #c4b8f42b !important; }
input::placeholder, textarea::placeholder { color: #aaa4bd !important; opacity: 1; }
footer { opacity: 1 !important; border-top: 1px solid #ffffff0d; max-width: 1184px; margin: auto; width: calc(100% - 32px); }
footer p { color: #a09aaf !important; }
#welcome-modal > .card-glass { background: linear-gradient(140deg, #28213e, #121422); border-color: #c3b0ed33; max-height: calc(100dvh - 40px); overflow-y: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 12px 20px; background: #eee4ff; color: #241735; border-radius: 8px; }
.skip-link:focus { top: 16px; }
@media(min-width:768px) and (max-width:1100px) {
    .cinema-card .glass-screen { width: 160px; right: -45px; top: 190px; opacity: .65; }
    .cinema-card .screen-play { left: 55px; }
    .spark-one, .spark-two { display: none; }
}
@media(max-width:767px) {
    main > header { padding: 14px 0 24px; margin-bottom: 20px !important; }
    .home-intro { padding-top: 10px; }
    .home-eyebrow { font-size: 12px; }
    .home-intro > p:last-child { font-size: 15px; }
    .service-grid { gap: 14px !important; }
    .service-grid > .card-glass { min-height: 185px; padding: 24px; }
    .cinema-card { padding: 26px !important; min-height: 410px !important; }
    .cinema-card h3 { font-size: 38px; }
    .cinema-card p { font-size: 15px; max-width: 220px; }
    .cinema-card p.italic { max-width: 220px; }
    .glass-screen { right: -58px; top: 170px; width: 140px; height: 100px; opacity: .45; }
    .screen-play { width: 40px; height: 40px; left: 50px; top: 23px; }
    .screen-play::after { left: 16px; top: 12px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
    .spark-one, .spark-two { display: none; }
    .cinema-card .card-content:last-child { align-items: stretch; margin-top: 36px; }
    .cinema-card button, .cinema-card [role='button'] { width: 100%; justify-content: center; }
    .view-section .ml-8 { margin-left: 0; }.view-section .pl-8 { padding-left: 0; }
    .view-section .flex > div { min-width: 0; }
    .view-section p, .view-section li { overflow-wrap: anywhere; }
    .view-section svg { flex-shrink: 0; }
}
@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.journey-panel { padding: 24px; margin: 24px 0; }
.journey-panel h3 { font-family: 'Outfit', sans-serif; font-size: 23px; font-weight: 600; margin-bottom: 12px; }
.journey-panel p, .journey-detail p, .journey-detail li { font-size: 15px; line-height: 1.8; color: #c1bed2; }
.journey-panel p + p { margin-top: 12px; }
.journey-detail { margin: 12px 0; padding: 0 20px; text-align: left; background: #ffffff04; border: 1px solid #c3b0ed26; border-radius: 14px; }
.journey-detail summary { cursor: pointer; padding: 19px 0; font-weight: 600; font-size: 16px; }
.journey-detail[open] { padding-bottom: 20px; }
.journey-detail a:not(.journey-button) { color: #d1c0ff; text-decoration: underline; text-underline-offset: 4px; }
.journey-panel ol, .journey-detail ol { list-style: decimal; padding-left: 22px; }
.journey-panel li, .journey-detail li { margin-bottom: 12px; }
.journey-button { display: inline-flex; justify-content: center; align-items: center; padding: 12px 18px; min-height: 44px; border-radius: 12px; background: #c3b0ed18; border: 1px solid #c3b0ed33; color: #e4daff; font-size: 14px; font-weight: 600; margin-top: 12px; }
.journey-button:hover { background: #c3b0ed2e; }
header .journey-button { margin: 0; }
button:disabled { opacity: .65; cursor: wait; }
[hidden] { display: none !important; }
#request-status, #copy-status { color: #d6caed; font-size: 14px; }
#request-preview p { margin-top: 12px; }
@media(max-width:767px) { .journey-panel { padding: 20px; } .journey-detail { padding-left: 16px; padding-right: 16px; } }