/* ==========================================================================
   TABLE OF CONTENTS
   1. Variables & Base Setup
   2. Typography & Globals
   3. Header (App Style)
   4. UI Components (Glassmorphism & Buttons)
   5. Hero Section
   6. Recent Projects (Swipe Carousel)
   7. Reviews & FAQ
   8. Contact Form (Centered)
   9. Footer
   10. Media Queries (Tablet & Desktop Upgrades)
   ========================================================================== */

/* ==========================================================================
   1. Variables & Base Setup
   ========================================================================== */
:root {
    --bg-dark: #050505;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --neon-purple: #8a2be2;
    --neon-cyan: #00e5ff;
    --text-main: #ffffff;
    --text-muted: #8892b0;
}
html { scroll-behavior: smooth; }
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
    position: relative;
}

/* Background Ambient Glow */
.ambient-glow {
    position: fixed;
    top: -20%; left: -10%; width: 50vw; height: 50vh;
    background: radial-gradient(circle, rgba(138,43,226,0.15) 0%, rgba(5,5,5,0) 70%);
    z-index: -1; 
    filter: blur(60px); 
    animation: pulse 8s infinite alternate;
}

.ambient-glow::after {
    content: ''; 
    position: absolute;
    bottom: -100%; right: -50%; width: 60vw; height: 60vh;
    background: radial-gradient(circle, rgba(0,229,255,0.1) 0%, rgba(5,5,5,0) 70%);
}

@keyframes pulse { 
    0% { opacity: 0.6; transform: scale(1); } 
    100% { opacity: 1; transform: scale(1.2); } 
}

/* ==========================================================================
   2. Typography & Globals
   ========================================================================== */
.container { width: 100%; padding: 0 20px; margin: 0 auto; }
.section-padding { padding: 60px 0; }
a { text-decoration: none; color: inherit; }

.gradient-text {
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.section-title { 
    font-size: 1.8rem; 
    margin-bottom: 25px; 
    font-weight: 700; 
    letter-spacing: -0.5px; 
    text-align: center; 
}

.text-center { text-align: center; }
.mt-3 { margin-top: 15px; }
.full-width { width: 100%; }


/* ==========================================================================
   3. Header (App Style με διακριτικό LED Strip)
   ========================================================================== */
.app-header {
    position: fixed; top: 0; width: 100%; z-index: 100;
    background: rgba(5, 5, 5, 0.7); 
    backdrop-filter: blur(12px); 
    border-bottom: none; 
    padding: 15px 0;
}

.app-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px; 
    
    /* Γραμμικό gradient που "σβήνει" στις άκρες (transparent) και στο κέντρο έχει Μωβ & Cyan */
    background: linear-gradient(90deg, transparent 0%, var(--neon-purple) 30%, var(--neon-cyan) 70%, transparent 100%);
    
    /* Η λάμψη (glow) που ρίχνει το φως προς τα κάτω */
    box-shadow: 0 2px 15px rgba(0, 229, 255, 0.4), 0 1px 5px rgba(138, 43, 226, 0.5);
    opacity: 0.8; 
}

.header-flex { display: flex; justify-content: space-between; align-items: center; }


.header-flex { display: flex; justify-content: space-between; align-items: center; }

.logo { font-size: 1.4rem; font-weight: 900; letter-spacing: 1px; }
.logo span { color: var(--neon-cyan); }

.call-btn {
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; 
    color: var(--text-main);
}

/* ==========================================================================
   4. UI Components (Glassmorphism & Buttons)
   ========================================================================== */
.glass-panel, .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
}

.glass-card { text-align: center; align-content: center; }

/* Primary Button Effect */
.btn-glow {
    background: linear-gradient(45deg, var(--neon-purple), var(--neon-cyan));
    border: none; 
    color: white; 
    padding: 14px 24px; 
    border-radius: 12px; 
    font-weight: 600; 
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2); 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.btn-glow:hover {
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.6); 
    transform: translateY(-3px) scale(1.02); 
    filter: brightness(1.05); 
}

.btn-glow:active {
    transform: translateY(1px) scale(0.98); 
    box-shadow: 0 2px 10px rgba(0, 229, 255, 0.4); 
    filter: brightness(1); 
}

/* ==========================================================================
   5. Hero Section
   ========================================================================== */
.hero { padding-top: 100px; min-height: 80vh; display: flex; align-items: center; }
.hero-content { display: flex; flex-direction: column; gap: 20px; }
/* 🌟 LED Strip (Underglow) στο κάτω μέρος του Hero Section 🌟 */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Λίγο πιο έντονη από του header */
    
    /* Ένα πιο πολύπλοκο gradient που παίζει ανάμεσα σε Μωβ και Cyan */
    background: linear-gradient(90deg, transparent 0%, var(--neon-purple) 15%, var(--neon-cyan) 50%, var(--neon-purple) 85%, transparent 100%);
    
    /* Η λάμψη (box-shadow) εδώ έχει αρνητικές τιμές (π.χ. -5px) για να ρίχνει το φως ΠΡΟΣ ΤΑ ΠΑΝΩ, μέσα στη φωτογραφία */
    box-shadow: 0 -5px 25px rgba(0, 229, 255, 0.4), 0 -2px 10px rgba(138, 43, 226, 0.5);
    z-index: 5; /* Φροντίζει να είναι πάνω από τη φωτογραφία αλλά κάτω από το περιεχόμενο */
}

.badge {
    align-self: flex-start; 
    background: rgba(138,43,226,0.2); 
    border: 1px solid var(--neon-purple);
    color: var(--neon-cyan); 
    padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
}

.hero h1 { font-size: 2.8rem; line-height: 1.1; }
.hero p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.5; }

.search-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 15px; }
.search-panel label { font-size: 0.9rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; }

.input-group { display: flex; gap: 10px; }
.input-group select {
    flex: 1; 
    background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border);
    color: white; padding: 0 15px; border-radius: 12px; font-size: 1rem; outline: none; appearance: none;
}
.input-group select:focus { border-color: var(--neon-cyan); }

.quick-stats { display: flex; gap: 10px; margin-top: 10px; justify-items: center; }
.stat-item { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.stat-item i { color: #f1c40f; } 

/* ==========================================================================
   6. Recent Projects (Swipe Carousel)
   ========================================================================== */
.flex-between { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }

.view-all {
    font-size: 0.9rem; font-weight: 600; color: var(--neon-cyan); display: flex; align-items: center; gap: 5px; transition: 0.3s;
}

.view-all:hover { color: var(--neon-purple); transform: translateX(3px); }

.projects-scroll {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 15px; 
    scrollbar-width: none; -ms-overflow-style: none; 
}
.projects-scroll::-webkit-scrollbar { display: none; }

.project-card {
    min-width: 280px; width: 280px; scroll-snap-align: start; padding: 12px;
    display: flex; flex-direction: column; gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    border-color: rgba(138, 43, 226, 0.5); 
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.15); 
}

.project-image { position: relative; width: 100%; height: 180px; border-radius: 12px; overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.project-card:hover .project-image img { transform: scale(1.05); }

.project-badge {
    position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);
    padding: 5px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; color: white;
    border: 1px solid rgba(0, 229, 255, 0.2); 
}

.project-info h3 { font-size: 1.1rem; margin-bottom: 5px; color: var(--text-main); }
.project-info p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

/* ==========================================================================
   7. Reviews & FAQ
   ========================================================================== */
.glass-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

.review-card { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.review-header { display: flex; justify-content: space-between; align-items: center; }
.google-icon { color: #4285F4; font-size: 1.2rem; }
.review-text { font-size: 0.95rem; font-style: italic; color: #d1d5db; line-height: 1.5; }
.reviewer { font-weight: 600; font-size: 0.85rem; color: var(--neon-cyan); }

.faq-list { display: flex; flex-direction: column; gap: 15px; }
.faq-item summary { font-weight: 600; font-size: 0.95rem; list-style: none; outline: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--neon-cyan); font-size: 1.2rem; transition: 0.3s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-content { margin-top: 15px; font-size: 0.9rem; color: var(--text-muted); border-top: 1px solid var(--glass-border); padding-top: 15px; text-align: left; }

/* ==========================================================================
   Reviews Summary Badge
   ========================================================================== */
.reviews-summary {
    max-width: 600px;
    margin: 0 auto 40px auto; /* Το κεντράρει και αφήνει χώρο από κάτω για τις κάρτες */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-color: rgba(241, 196, 15, 0.3); /* Απαλό χρυσό περίγραμμα */
    box-shadow: 0 5px 20px rgba(241, 196, 15, 0.1); /* Χρυσή λάμψη από πίσω */
}

.summary-rating {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rating-number {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.rating-stars {
    display: flex;
    gap: 5px;
    font-size: 1.5rem;
    color: #f1c40f; /* Χρυσό χρώμα για τα αστέρια */
}

.summary-text {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

/* Κάνουμε τον αριθμό 500+ να ανάβει με το gradient χρώμα μας */
.highlight-number {
    font-weight: 800;
    font-size: 1.3rem;
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ==========================================================================
   8. Contact Form (Centered)
   ========================================================================== */
.form-container { max-width: 600px; margin: 0 auto; }
.section-subtitle { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 30px; line-height: 1.5; }

.centered-form {
    display: flex; flex-direction: column; gap: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
}

.input-group-vertical { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.input-group-vertical label { font-size: 0.85rem; color: var(--text-main); font-weight: 600; letter-spacing: 0.5px; }

.input-group-vertical input, .input-group-vertical textarea {
    width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--glass-border);
    color: white; padding: 15px; border-radius: 12px; font-size: 0.95rem; outline: none; transition: all 0.3s ease;
}

.input-group-vertical input:focus, .input-group-vertical textarea:focus {
    border-color: var(--text-main); 
    box-shadow: 0 0 12px rgba(138, 43, 226, 0.2); 
    background: rgba(0, 0, 0, 0.6); 
}

.input-group-vertical input::placeholder, .input-group-vertical textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
/* ==========================================================================
   9. Footer (Main)
   ========================================================================== */
.main-footer {
    /* Σκούρο φόντο ΚΑΙ διαγώνιες λευκές γραμμές (Carbon/Racing style) */
    background-color: rgba(5, 5, 5, 0.85);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.03) 0px,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px,
        transparent 15px
    );
    
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border);
    margin-top: 60px;
    padding-top: 60px;
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 στήλη στα κινητά */
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo { font-size: 1.5rem; margin-bottom: 15px; }

.footer-bio {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Κουμπιά Social Media */
.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%; /* Στρογγυλά εικονίδια */
    color: var(--text-main);
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.footer-socials a:hover {
    background: rgba(0, 229, 255, 0.1); /* Απαλό Cyan φόντο */
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
}

/* Τίτλοι Στηλών (Τοποθεσίες, Επικοινωνία) */
.footer-col h3 {
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 35px;
    height: 2px;
    background: var(--neon-purple); /* Μωβ γραμμούλα από κάτω για στυλ */
}

/* Λίστες Footer */
.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-links li, .footer-links a {
    color: var(--text-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s ease;
}

.footer-links i {
    color: var(--neon-purple); /* Τα εικονίδια έχουν Μωβ χρώμα */
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.footer-links a:hover {
    color: var(--neon-cyan); /* Στο hover τα links γίνονται Cyan */
    transform: translateX(3px); /* Κινούνται λίγο δεξιά */
}

.footer-bottom {
    text-align: center;
    padding: 25px 0;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ==========================================================================
   Minimal App Footer (Για τις εσωτερικές σελίδες)
   ========================================================================== */
.app-footer {
    text-align: center;
    padding: 30px 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px solid var(--glass-border);
    margin-top: 40px;
}

/* ==========================================================================
   10. Media Queries (Tablet & Desktop Upgrades)
   ========================================================================== */
@media (min-width: 768px) {
    .container { max-width: 720px; }
    .hero h1 { font-size: 3.5rem; }
    .glass-grid { grid-template-columns: 1fr 1fr; }
    .input-group { flex-direction: row; }
    
    .projects-scroll { overflow-x: visible; flex-wrap: wrap; justify-content: center; }
    .project-card { min-width: calc(33.333% - 20px); width: auto; flex: 1; }
    
    .footer-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px; 
    }
    .hero { height: 100vh;}
    .subpage-hero {height: 60vh;}
}

@media (min-width: 1024px) {
    .container { max-width: 1000px; }
    .hero { min-height: 90vh; }
    .hero h1 { font-size: 4.5rem; }
    .hero-content { align-items: center; text-align: center; max-width: 800px; margin: 0 auto; }
    .badge { align-self: center; }
    .search-panel { width: 100%; max-width: 600px; }
}

/* ==========================================================================
   Sub-Pages (π.χ. Mercedes, BMW κλπ)
   ========================================================================== */

/* Κουμπί Επιστροφής (Back Button) στο Header */
.back-btn {
    width: 40px; height: 40px; 
    display: flex; justify-content: center; align-items: center; 
    color: var(--text-main); font-size: 1.2rem;
    transition: 0.3s;
}
.back-btn:hover { color: var(--neon-cyan); transform: translateX(-3px); }

/* Το Hero Section των εσωτερικών σελίδων είναι πιο κοντό */
.subpage-hero { min-height: 50vh; padding-top: 120px; padding-bottom: 40px; }

/* Λογότυπο μάρκας στο Hero */
.brand-logo-hero {
    width: 80px; height: 80px; 
    margin: 0 auto 20px; 
    filter: invert(1); /* Κάνει το μαύρο λογότυπο της Mercedes λευκό */
    opacity: 0.9;
}

/* Κάρτες Projects σε διάταξη Grid (για τις εσωτερικές σελίδες) */
.grid-card {
    min-width: 100%; /* Στη σελίδα μάρκας η κάρτα πιάνει όλο το πλάτος */
    width: 100%;
}

.project-tags {
    display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap;
}

.project-tags span {
    background: rgba(0, 229, 255, 0.1);
    color: var(--neon-cyan);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 229, 255, 0.2);
    display: flex; align-items: center; gap: 5px;
}

/* ==========================================================================
   Brand Cards (Για τη σελίδα brands.html)
   ========================================================================== */
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-decoration: none; /* Βγάζει την υπογράμμιση από το link */
    transition: all 0.3s ease;
    cursor: pointer;
}

.brand-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon-cyan);
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.15);
}

.brand-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: invert(1); /* Κάνει τα μαύρα λογότυπα λευκά για το dark theme */
    opacity: 0.9;
    transition: 0.3s ease;
}

/* Εξαίρεση για λογότυπα που έχουν ήδη χρώμα (π.χ. BMW) */
.brand-logo.no-invert {
    filter: none;
}

.brand-card:hover .brand-logo {
    transform: scale(1.1); /* Μεγαλώνει ελαφρώς το σήμα στο hover */
}

.brand-card h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.3rem;
}

.brand-link {
    margin: 0;
    color: var(--neon-purple);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s ease;
}

.brand-card:hover .brand-link {
    color: var(--neon-cyan); /* Το κείμενο "Δες τα projects" γίνεται Cyan στο hover */
}