/* Modern Dark Theme CSS Variables */
:root {
    --orange: #FE7743;
    --sand: #EFEEEA;
    --ink: #273F4F;
    --black: #000000;
    --glow: 0 8px 40px rgba(254,119,67,.35), 0 0 0 1px rgba(254,119,67,.18) inset;
}

/* Global Styles */
html, body {
    height: 100%;
}

body {
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--sand);
    background: #000;
    display: flex;
    flex-direction: column;
}

/* Sticky Footer Layout */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Simplified background - solid color only */
.bg-future {
    background: #000000;
    position: relative;
    overflow-x: hidden;
}

/* Remove animated lines and patterns */
.bg-future:before,
.bg-future:after {
    display: none;
}

/* Shared styles */
.glass {
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(239,238,234,.08), rgba(239,238,234,.04));
    border: 1px solid rgba(239,238,234,.14);
}

.text-neon {
    background: linear-gradient(90deg, var(--orange) 0%, var(--sand) 40%, var(--ink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 40px rgba(254,119,67,.25);
}

.btn-glow {
    box-shadow: 0 10px 35px rgba(254,119,67,.28), 0 0 0 2px rgba(254,119,67,.28) inset;
}

.btn-glow:hover {
    box-shadow: 0 16px 45px rgba(254,119,67,.38), 0 0 0 2px rgba(254,119,67,.38) inset;
}

.outline-gradient {
    position: relative;
    border-radius: 18px;
}

.outline-gradient:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    background: linear-gradient(120deg, rgba(254,119,67,.7), rgba(239,238,234,.6), rgba(39,63,79,.7));
    z-index: 0;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    opacity: .35;
}

/* Coverflow slider */
.card {
    position: absolute;
    inset: 3%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.25), var(--glow);
    transition: transform 600ms cubic-bezier(.2,.8,.2,1), opacity 450ms ease, filter 450ms ease;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.35), transparent 40%);
    pointer-events: none;
}

.cf-center {
    z-index: 50;
    transform: translateX(0) scale(1) rotateY(0deg);
}

.cf-left {
    z-index: 40;
    transform: translateX(-20%) scale(.88) rotateY(22deg);
    filter: saturate(.9) blur(.2px);
}

.cf-right {
    z-index: 40;
    transform: translateX(20%) scale(.88) rotateY(-22deg);
    filter: saturate(.9) blur(.2px);
}

.cf-far-left {
    z-index: 30;
    transform: translateX(-40%) scale(.78) rotateY(30deg);
    opacity: .6;
    filter: blur(.4px);
}

.cf-far-right {
    z-index: 30;
    transform: translateX(40%) scale(.78) rotateY(-30deg);
    opacity: .6;
    filter: blur(.4px);
}

/* Toggle switch */
.switch {
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    transition: background 200ms ease;
}

.switch-dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff, #dfe4ea);
    box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.35) inset;
    transition: transform 220ms ease;
}

.switch.on {
    background: linear-gradient(90deg, rgba(254,119,67,.35), rgba(39,63,79,.35));
    border-color: rgba(239,238,234,.45);
}

.switch.on .switch-dot {
    transform: translateX(20px);
}

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all .6s ease;
}

.reveal.show {
    opacity: 1;
    transform: none;
}

/* Lightbox */
.lightbox-enter {
    transform: scale(.96);
    opacity: 0;
}

.lightbox-enter-active {
    transform: scale(1);
    opacity: 1;
    transition: all 220ms ease;
}

.lightbox-exit {
    transform: scale(1);
    opacity: 1;
}

.lightbox-exit-active {
    transform: scale(.96);
    opacity: 0;
    transition: all 180ms ease;
}

/* Testimonials quote mark */
.quote-mark {
    position: absolute;
    top: -10px;
    left: -6px;
    font-size: 90px;
    line-height: 1;
    color: rgba(254,119,67,.15);
    user-select: none;
}

/* Avoid selection flickers */
.no-select {
    user-select: none;
    -webkit-user-select: none;
}

.link-underline:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Gallery Grid */
#galleryGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    transition: all 0.4s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.gallery-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(39, 63, 79, 0.9) 0%, rgba(254, 119, 67, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-content {
    text-align: center;
    color: var(--sand);
    padding: 1rem;
}

.gallery-content h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.gallery-content p {
    font-size: 1rem;
    opacity: 0.9;
}

/* Areas Tabs */
.area-tab {
    transition: all 0.3s ease;
}

.area-tab.active {
    background: var(--orange);
    color: var(--black);
}

.area-panel {
    transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .bg-future:before,
    .bg-future:after {
        opacity: 0.1;
    }
    
    #galleryGrid {
        grid-template-columns: 1fr;
    }
    
    .quote-mark {
        font-size: 60px;
    }
}

@media (max-width: 480px) {
    .quote-mark {
        font-size: 40px;
    }
    
    .gallery-content h4 {
        font-size: 1.1rem;
    }
    
    .gallery-content p {
        font-size: 0.9rem;
    }
}