/* Custom styles for modern look */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

.font-serif-display {
    font-family: 'Playfair Display', serif;
}

/* ======================================= */
/* === DYNAMIC SECTION BACKGROUNDS ====== */
/* ======================================= */

.hero-section {
    background-image: url('/images/webdev-2-background.webp');
    background-color: #000000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#about {
    background-image: url('/images/about-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#services {
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

#services > .max-w-7xl {
    position: relative;
    z-index: 1;
}

#process {
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

#process > .max-w-7xl {
    position: relative;
    z-index: 1;
}

#contact {
    background-image: url('/images/contact-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* About Section Cards - UPDATED WITH GLOW */
.value-card {
    background-color: #b8ffc1;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.8), 0 0 10px rgba(0, 255, 0, 0.6), 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 255, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 8px rgba(0, 255, 0, 1), 0 0 15px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.6), 0 0 60px rgba(0, 255, 0, 0.5);
}


/* ======================================= */
/* ====== GLASS CARD STYLES ========== */
/* ======================================= */

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate { to { --angle: 360deg; } }

.glass-card {
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 1.5rem;
    text-align: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: rotate 10s linear infinite;
    min-height: 24rem;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -2;
    border-radius: 1.5rem;
    animation: rotate 10s linear infinite;
}

.glow-gold::before { background: conic-gradient(from var(--angle), #FFD700, #DAA520, #FFD700); }
.glow-blue::before { background: conic-gradient(from var(--angle), #7dd3fc, #38bdf8, #7dd3fc); }
.glow-maroon::before { background: conic-gradient(from var(--angle), #b92b27, #800000, #b92b27); }
.glow-green::before { background: conic-gradient(from var(--angle), #00fc04, #00b303, #00fc04); }

.glow-gold { background: conic-gradient(from var(--angle) at 50% 50%, hsla(45, 100%, 70%, 0.25) 0%, hsla(45, 100%, 70%, 0) 25%, hsla(45, 100%, 70%, 0) 100%), linear-gradient(135deg, hsl(45, 100%, 25%), hsl(45, 100%, 45%) 50%, hsl(45, 100%, 25%)); }
.glow-blue { background: conic-gradient(from var(--angle) at 50% 50%, hsla(200, 100%, 70%, 0.25) 0%, hsla(200, 100%, 70%, 0) 25%, hsla(200, 100%, 70%, 0) 100%), linear-gradient(135deg, hsl(200, 100%, 25%), hsl(200, 100%, 45%) 50%, hsl(200, 100%, 25%)); }
.glow-maroon { background: conic-gradient(from var(--angle) at 50% 50%, hsla(0, 100%, 70%, 0.2) 0%, hsla(0, 100%, 70%, 0) 25%, hsla(0, 100%, 70%, 0) 100%), linear-gradient(135deg, hsl(0, 100%, 15%), hsl(0, 100%, 25%) 50%, hsl(0, 100%, 15%)); }
.glow-green { background: conic-gradient(from var(--angle) at 50% 50%, hsla(120, 100%, 70%, 0.2) 0%, hsla(120, 100%, 70%, 0) 25%, hsla(120, 100%, 70%, 0) 100%), linear-gradient(135deg, hsl(120, 100%, 12%), hsl(120, 100%, 22%) 50%, hsl(120, 100%, 12%)); }

.card-content { display: flex; flex-direction: column; align-items: center; height: 100%; }
.card-icon-wrapper { margin-bottom: 1.5rem; height: 80px; display: flex; justify-content: center; align-items: center; }
.card-icon { width: 64px; height: 64px; color: #e5e7eb; }

.glow-gold .card-icon { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7)); }
.glow-blue .card-icon { filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.7)); }
.glow-maroon .card-icon { filter: drop-shadow(0 0 10px rgba(176, 35, 35, 0.7)); }
.glow-green .card-icon { filter: drop-shadow(0 0 10px rgba(0, 252, 4, 0.7)); }

.card-title { color: #ffffff; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.card-price { color: #000000; font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem; }
.card-description { color: #ffffff; font-size: 1.125rem; font-weight: 700; line-height: 1.75; flex-grow: 1; margin-bottom: 2rem; }
.card-button { display: inline-block; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #e5e7eb; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 9999px; transition: all 0.2s ease-in-out; text-decoration: none; margin-top: auto; }
.card-button:hover { background-color: rgba(255, 255, 255, 0.2); color: #ffffff; }

/* Contact Form Styles */
@keyframes contact-pulse { 0% { box-shadow: 0 0 15px 5px rgba(0, 255, 0, 0.3), 0 0 5px 2px rgba(0, 255, 0, 0.2); } 50% { box-shadow: 0 0 25px 10px rgba(0, 255, 0, 0.6), 0 0 10px 4px rgba(0, 255, 0, 0.4); } 100% { box-shadow: 0 0 15px 5px rgba(0, 255, 0, 0.3), 0 0 5px 2px rgba(0, 255, 0, 0.2); } }

.contact-form-container { background-color: #000000; border: 2px solid #00ff00; border-radius: 1.5rem; padding: 3rem; box-shadow: 0 0 15px 5px rgba(0, 255, 0, 0.3), 0 0 5px 2px rgba(0, 255, 0, 0.2); position: relative; animation: contact-pulse 3.5s infinite; }
.form-field { margin-bottom: 1.5rem; }
.form-field label { display: block; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: #ffffff; margin-bottom: 0.5rem; text-transform: uppercase; }
.form-field input, .form-field textarea { width: 100%; background-color: transparent; border: 1px solid #4a5568; border-radius: 0.375rem; padding: 0.75rem 1rem; color: #ffffff; font-size: 1rem; transition: all 0.2s ease-in-out; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: #00ff00; box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); }
.form-field input::placeholder, .form-field textarea::placeholder { color: #718096; }
.submit-button-wrapper { text-align: center; margin-top: 1rem; }
.submit-button { background-color: #00ff00; color: #000000; font-weight: bold; font-size: 1.125rem; padding: 0.75rem 3rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.3s ease; display: inline-block; width: auto; }
.submit-button:hover { background-color: #ffffff; box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); }

/* Cookie Banner Styles */
.cookie-button { padding: 0.5rem 1.25rem; border-radius: 9999px; font-weight: 500; transition: background-color 0.2s ease; }

/* ======================================= */
/* ===== PROCESS SECTION STYLES ====== */
/* ======================================= */
@keyframes pulse-glow { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 252, 4, 0.7); } 50% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(0, 252, 4, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 252, 4, 0.7); } }
#process .grid > div:nth-child(1) .relative > div { animation: pulse-glow 3.5s infinite; animation-delay: 0s; }
#process .grid > div:nth-child(2) .relative > div { animation: pulse-glow 3.5s infinite; animation-delay: 0.5s; }
#process .grid > div:nth-child(3) .relative > div { animation: pulse-glow 3.5s infinite; animation-delay: 1s; }
#pulsating-line-container { position: absolute; top: 40px; left: 0; width: 100%; height: 2px; background-color: rgba(0, 252, 4, 0.2); }
.pulsating-line { position: absolute; top: 0; left: 0; height: 100%; width: 20%; background: #00fc04; box-shadow: 0 0 8px #00fc04, 0 0 15px #00fc04; animation: move-and-thicken 4s ease-in-out infinite; transform-origin: center; }
@keyframes move-and-thicken { 0% { transform: translateX(-25%) scaleY(1); } 50% { transform: translateX(200%) scaleY(2.5); } 100% { transform: translateX(500%) scaleY(1); } }

/* ======================================= */
/* ====== POPUP & LIGHTBULB STYLES ======= */
/* ======================================= */
.popup-content-wrapper { max-width: 650px; border: 2px solid transparent; border-radius: 1.5rem; padding: 2.5rem; position: relative; animation: rotate 10s linear infinite; background: conic-gradient(from var(--angle) at 50% 50%, hsla(120, 100%, 70%, 0.2) 0%, hsla(120, 100%, 70%, 0) 25%, hsla(120, 100%, 70%, 0) 100%), linear-gradient(135deg, hsl(120, 100%, 12%), hsl(120, 100%, 22%) 50%, hsl(120, 100%, 12%)); }
.popup-content-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 4px); height: calc(100% + 4px); z-index: -2; border-radius: 1.5rem; animation: rotate 10s linear infinite; background: conic-gradient(from var(--angle), #00fc04, #00b303, #00fc04); }

.popup-close-button { z-index: 10; color: #7dd3fc; font-size: 2.5rem; font-weight: bold; line-height: 1; cursor: pointer; transition: transform 0.2s ease, color 0.2s ease; text-shadow: 0 0 10px rgba(125, 211, 252, 0.8); }
.popup-close-button:hover { transform: scale(1.2); color: #ffffff; }

[data-popup-id="lightbulb"] .popup-close-button { position: absolute; top: 0.75rem; right: 1rem; }

/* --- NEW LIGHTBULB ANIMATION --- */
@keyframes pulse-lightbulb-glow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px #4FC3F7) drop-shadow(0 0 8px #4FC3F7);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px #4FC3F7) drop-shadow(0 0 16px #4FC3F7) drop-shadow(0 0 24px #4FC3F7);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px #4FC3F7) drop-shadow(0 0 8px #4FC3F7);
    }
}

#pulsating-lightbulb {
    animation: pulse-lightbulb-glow 2.5s infinite ease-in-out;
    transform-origin: center;
}
/* --- END NEW LIGHTBULB ANIMATION --- */

@media (max-width: 640px) { .popup-content-wrapper { padding: 2.75rem 1rem 1.75rem; } }

/* Services Section - Neon Green Headline */
#services .text-center h2 { color: #d1ffd7; text-shadow: 0 0 5px rgba(0, 255, 0, 0.8), 0 0 10px rgba(0, 255, 0, 0.6), 0 0 20px rgba(0, 255, 0, 0.4), 0 0 40px rgba(0, 255, 0, 0.3); }
#services .text-center p { color: #b3ffbe; text-shadow: 0 0 5px rgba(0, 255, 0, 0.4), 0 0 10px rgba(0, 255, 0, 0.4); }

@media (max-width: 767px) {
    #pulsating-line-container { width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
    .pulsating-line { width: 100%; height: 20%; animation: move-and-thicken-vertical 4s ease-in-out infinite; }
    @keyframes move-and-thicken-vertical {
        0% { transform: translateY(-50%) scaleX(1); }
        50% { transform: translateY(160%) scaleX(2.5); }
        100% { transform: translateY(450%) scaleX(1); }
    }
}

/* ======================================= */
/* ====== PORTFOLIO SECTION STYLES ======= */
/* ======================================= */
.portfolio-card { background-color: rgba(16, 16, 16, 0.5); border: 1px solid #00fc04; border-radius: 0.5rem; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.portfolio-card:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(0, 252, 4, 0.4); }
.portfolio-card .tag { background-color: #00fc04; color: black; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; }
.portfolio-button { border: 2px solid #00fc04; color: #00fc04; padding: 0.5rem 1rem; border-radius: 0.25rem; font-weight: 600; transition: all 0.3s ease; text-align: center; display: block; cursor: pointer; }
.portfolio-button:hover { background-color: #00fc04; color: black; }
.portfolio-image-placeholder { height: 250px; background-color: #000; border-bottom: 2px solid #00fc04; display: flex; align-items: center; justify-content: center; }
.portfolio-title { color: #00fc04; font-size: 3.5rem; font-weight: bold; }

/* PORTFOLIO POPUP STYLES */
.portfolio-popup-content { width: 100%; height: 100%; max-width: 90vw; max-height: 90vh; padding: 1.5rem; display: flex; flex-direction: column; }
.popup-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 252, 4, 0.3); flex-shrink: 0; }
.popup-header .popup-close-button { position: static; transform: none; }
.popup-body {
    flex-grow: 1;
    overflow: hidden; 
    padding-top: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* === BUG FIX: Override background for portfolio popups === */
.portfolio-popup-content {
    background: rgba(10, 20, 10, 0.95);
    animation: none;
    border: 1px solid #00fc04;
}

.portfolio-popup-content::before {
    display: none;
}
/* === End Bug Fix === */


/* ======================================= */
/* ====== SLIDESHOW STYLES ============= */
/* ======================================= */
.slideshow-container {
    position: relative;
    flex-grow: 1; 
    display: flex;
    align-items: center;
    min-height: 0;
}
.slide { 
    display: none; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
}
.slide img { 
    max-width:100%; 
    max-height:100%; 
    width: auto; 
    height: auto; 
    object-fit: contain; 
    border-radius: 0.5rem; 
    display: inline-block; 
}
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -30px; color: white; font-weight: bold; font-size: 24px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0,0,0,0.3); }
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: rgba(0, 252, 4, 0.5); }
.dot-container { 
    text-align: center; 
    padding: 0.5rem 0 0 0; /* <-- *** FIX: Changed padding-top from 1rem to 0.5rem *** */
    flex-shrink: 0; 
}
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 4px; background-color: #717171; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #00fc04; box-shadow: 0 0 8px #00fc04; }
.fade { animation-name: fade; animation-duration: 0.8s; }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

/* ======================================= */
/* ====== VIDEO SLIDESHOW STYLES ======= */
/* ======================================= */
.video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; 
}

.video-wrapper iframe {
    width: 100%; 
    max-width: 100%; 
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    max-height: 100%; 
}

/* Style for ALL vertical videos */
.video-wrapper-vertical iframe {
    width: 100%; 
    max-width: 100%; 
    height: auto;
    aspect-ratio: 9 / 16;
    transform: translateY(-2%);
    max-height: 100%; 
}

/* Make vertical video larger on mobile */
@media (max-width: 767px) {
  .video-wrapper-vertical iframe {
    width: 65%; 
  }
}

/* Base rule for thumbnails inside the popup */
[data-popup-id="thumbnails"] .slide img {
    max-width: 100%; 
    width: auto;
    margin: 0 auto;
    max-height: 100%; 
    object-fit: contain; 
}

/* ======================================= */
/* == PORTFOLIO VIDEO LANDSCAPE FIX ==== */
/* ======================================= */

@media (max-width: 767px) and (orientation: landscape) {
    
    /* --- FIX: Give popup more vertical space in mobile landscape --- */
    .portfolio-popup-content {
        max-height: 98vh;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* <-- *** FIX: Removed the incorrect max-width: 90% rule for thumbnails *** */

    /* --- VIDEO SIZE TWEAK --- */
    [data-popup-id="videos"] .video-wrapper:not(.video-wrapper-vertical) iframe {
        width: 60%;
    }
    [data-popup-id="videos"] .video-wrapper-vertical iframe {
        width: 30%;
    }

    /* --- LAYOUT TWEAKS FOR MORE VERTICAL SPACE --- */
    [data-popup-id="thumbnails"] .slideshow-container,
    [data-popup-id="videos"] .slideshow-container,
    [data-popup-id="websites"] .slideshow-container {
        align-items: flex-start;
    }

    .popup-body {
        padding-top: 0.5rem;
    }

    /* <-- *** FIX: Removed redundant .dot-container rule *** */
}