/* ============================================
   BILLYS COCKTAILSERVICE – CONVERSION OPTIMIZED
   Modern, clean, high-converting design
============================================ */
:root {
    --color-bg: #f8fafc;
    --color-bg-warm: #f1f5f9;
    --color-bg-card: #ffffff;
    --color-bg-dark: #0f172a;
    --color-bg-dark-elevated: #1e293b;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-subtle: #94a3b8;
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-muted: #cbd5e1;
    --color-accent: #2563eb;
    --color-accent-light: #3b82f6;
    --color-accent-dark: #1d4ed8;
    --color-accent-bg: rgba(37,99,235,0.08);
    --color-success: #16a34a;
    --color-success-bg: rgba(22,163,74,0.1);
    --color-urgent: #dc2626;
    --color-urgent-bg: rgba(220,38,38,0.1);
    --color-border: rgba(15,23,42,0.06);
    --color-border-strong: rgba(15,23,42,0.12);
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 100px;
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.1);
    --shadow-lg: 0 12px 40px rgba(15,23,42,0.12);
    --shadow-xl: 0 25px 60px rgba(15,23,42,0.15);
    --transition-fast: 0.15s ease; --transition-medium: 0.3s ease;
}

/* ============================================
   STICKY CTA BAR - Mobile Conversion
============================================ */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    padding: 12px 16px;
    display: none;
    gap: 12px;
    z-index: 999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.sticky-cta .btn { flex: 1; justify-content: center; padding: 14px 20px; }
@media (max-width: 768px) {
    .sticky-cta { display: flex; }
    .floating-buttons { bottom: 80px; }
    body { padding-bottom: 70px; }
}

/* ============================================
   URGENCY BADGE
============================================ */
.urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-urgent-bg);
    border: 1px solid rgba(220,38,38,0.2);
    color: var(--color-urgent);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    animation: urgency-pulse 2s ease-in-out infinite;
}
.urgency-badge .dot {
    width: 8px;
    height: 8px;
    background: var(--color-urgent);
    border-radius: 50%;
    animation: dot-pulse 1.5s ease-in-out infinite;
}
@keyframes urgency-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   TRUST BADGE
============================================ */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ============================================
   CONVERSION CTA BUTTON
============================================ */
.btn-conversion {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 18px 32px;
    box-shadow: 0 4px 14px rgba(37,99,235,0.4);
    position: relative;
    overflow: hidden;
}
.btn-conversion::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: btn-shimmer 2s infinite;
}
@keyframes btn-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}
.btn-conversion:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37,99,235,0.5);
}

/* ============================================
   SOCIAL PROOF COUNTER
============================================ */
.social-proof {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Hero Grid */
.hero-section {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        padding: 100px 0 60px !important;
    }
    
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-image {
        order: -1; /* Image first on mobile */
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .hero-floating-card {
        display: none !important;
    }
    
    .feature-checks {
        text-align: left;
    }
    
    .social-proof {
        justify-content: center;
    }
}

.social-proof-avatars {
    display: flex;
}
.social-proof-avatars span {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
    border: 2px solid #fff;
    border-radius: 50%;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
}
.social-proof-avatars span:first-child { margin-left: 0; }
.social-proof-text { font-size: 0.9rem; color: var(--color-text-muted); }
.social-proof-text strong { color: var(--color-text); }

/* ============================================
   FEATURE CHECKMARKS
============================================ */
.feature-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feature-check {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--color-text);
}
.feature-check .icon {
    width: 24px;
    height: 24px;
    background: var(--color-success-bg);
    color: var(--color-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Typography */
.section-label{font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);margin-bottom:12px}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:500;line-height:1.2;margin-bottom:16px}
.section-subtitle{font-size:1.1rem;color:var(--color-text-muted);max-width:600px;line-height:1.7}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:var(--radius-full);font-family:var(--font-body);font-weight:600;font-size:.95rem;text-decoration:none;transition:all var(--transition-fast);cursor:pointer;border:none}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(91,147,184,.25)}
.btn-secondary{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border-strong)}
.btn-secondary:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* Animation */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.active{opacity:1;transform:translateY(0)}

/* Floating */
.floating-buttons{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:12px;z-index:1000}
.floating-btn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;text-decoration:none;box-shadow:var(--shadow-lg);transition:all var(--transition-fast)}
.floating-btn:hover{transform:scale(1.1)}
.floating-btn.whatsapp{background:#25D366;color:#fff}
.floating-btn.phone{background:var(--color-accent);color:#fff}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 0;transition:all var(--transition-medium)}
.nav.scrolled{background:rgba(250,248,244,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border);padding:14px 0;box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;justify-content:space-between;align-items:center}
.nav-logo{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--color-text);text-decoration:none;display:flex;align-items:center;gap:10px}
.nav-logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links>li{position:relative}
.nav-links>li>a{color:var(--color-text-muted);font-size:.9rem;font-weight:500;transition:color var(--transition-fast);padding:8px 0;position:relative}
.nav-links>li>a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--color-accent);transition:width var(--transition-fast)}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--color-text)}
.nav-links>li>a:hover::after,.nav-links>li>a.active::after{width:100%}
.nav-cta{background:var(--color-accent);color:#fff;padding:12px 24px;border-radius:var(--radius-full);font-weight:600;font-size:.875rem;transition:all var(--transition-fast);white-space:nowrap}
.nav-cta:hover{background:var(--color-accent-dark);transform:translateY(-2px)}
.nav-dropdown{position:absolute;top:100%;left:-16px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 0;min-width:220px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:all var(--transition-fast);z-index:100;list-style:none}
.nav-links>li:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{display:block;padding:8px 20px;font-size:.85rem;color:var(--color-text-muted);transition:all var(--transition-fast)}
.nav-dropdown a::after{display:none!important}
.nav-dropdown a:hover{background:var(--color-accent-bg);color:var(--color-accent)}
.nav-mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px}
.nav-mobile-toggle span{width:24px;height:2px;background:var(--color-text);transition:all var(--transition-fast)}
.nav-mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);z-index:9999;flex-direction:column;justify-content:flex-start;align-items:center;overflow-y:auto;padding:80px 24px 120px;}
.nav-mobile-menu.open{display:flex}
.nav-mobile-menu a{font-family:var(--font-display);font-size:1.2rem;color:var(--color-text);padding:12px 0;text-decoration:none;width:100%;text-align:center;border-bottom:1px solid var(--color-border);}
.nav-mobile-menu a:last-of-type{border-bottom:none;}
.nav-mobile-close{position:absolute;top:20px;right:20px;background:none;border:none;font-size:2rem;cursor:pointer;color:var(--color-text);z-index:10;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}

/* Mobile Nav Phone Button in Header */
.nav-phone-mobile {
    display: none;
    width: 44px;
    height: 44px;
    background: var(--color-success);
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 8px;
    box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}

/* Mobile Menu CTAs - HIDDEN to prevent overlap */
.nav-mobile-cta {
    display: none !important;
}

.nav-mobile-call-btn {
    display: none !important;
}

.nav-mobile-bottom-cta {
    display: none !important;
}

/* Hide floating buttons when mobile menu is open */
body.mobile-menu-open .floating-buttons {
    display: none !important;
}

body.mobile-menu-open .sticky-cta {
    display: none !important;
}

@media (max-width: 768px) {
    .nav-phone-mobile {
        display: flex;
    }
    
    .nav-mobile-menu {
        padding-top: 70px;
        padding-bottom: 100px;
        gap: 0;
    }
    
    .nav-mobile-menu > a {
        font-size: 1.15rem;
        padding: 14px 0;
    }
}

/* PAGE HERO */
.page-hero{padding:160px 0 80px;text-align:center;background:var(--color-bg-warm);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,var(--color-accent-bg),transparent)}
.page-hero-content{position:relative;z-index:1}
.page-hero .section-title{font-size:clamp(2.5rem,5vw,3.5rem);margin-bottom:16px}
.page-hero .section-subtitle{margin:0 auto}

/* STATS */
.stats{padding:48px 0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:var(--color-text-on-dark)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-item{text-align:center}
.stat-number{font-family:var(--font-display);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:600;color:var(--color-accent-light);line-height:1;margin-bottom:4px}
.stat-label{font-size:.85rem;color:var(--color-text-on-dark-muted);text-transform:uppercase;letter-spacing:.05em}

/* TRUST */
.trust{padding:48px 0;border-bottom:1px solid var(--color-border)}
.trust-label{text-align:center;font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-subtle);margin-bottom:24px}
.trust-logos{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:24px}
.trust-logo{font-size:.85rem;font-weight:600;color:var(--color-text-muted);padding:10px 20px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:all var(--transition-fast);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px}
.trust-logo:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md)}
.trust-logo img{height:48px;width:auto;filter:grayscale(100%) opacity(.6);transition:all var(--transition-fast)}
.trust-logo:hover img{filter:grayscale(0%) opacity(1)}

/* CARDS */
.card-grid{display:grid;gap:24px}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:40px 32px;transition:all var(--transition-medium);box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-accent)}
.card-icon{width:64px;height:64px;background:var(--color-accent-bg);border:1px solid rgba(91,147,184,.15);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:20px}
.card-title{font-family:var(--font-display);font-size:1.25rem;font-weight:500;margin-bottom:8px}
.card-text{color:var(--color-text-muted);font-size:.95rem;line-height:1.7}

/* EVENT SECTIONS */
.event-section{padding:100px 0}
.event-section.alt-bg{background:var(--color-bg-warm)}
.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.event-grid.reverse{direction:rtl}
.event-grid.reverse>*{direction:ltr}
.event-image-placeholder{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,var(--color-bg-warm),var(--color-bg));border-radius:var(--radius-lg);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:5rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.event-image-placeholder img{width:100%;height:100%;object-fit:cover}
.event-description{color:var(--color-text-muted);font-size:1.05rem;line-height:1.8;margin-bottom:24px}
.event-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.event-tag{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--color-accent-bg);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;color:var(--color-accent-dark);border:1px solid rgba(91,147,184,.15)}

/* PROCESS */
.process{padding:100px 0}
.process.alt-bg{background:var(--color-bg-warm)}
.process-header{text-align:center;margin-bottom:60px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.process-grid::before{content:'';position:absolute;top:48px;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--color-border-strong),var(--color-border-strong),transparent)}
.process-step{text-align:center;position:relative}
.process-number{width:96px;height:96px;background:var(--color-bg-card);border:2px solid var(--color-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--color-accent);margin:0 auto 20px;position:relative;z-index:1;transition:all var(--transition-medium);box-shadow:var(--shadow-sm)}
.process-step:hover .process-number{background:var(--color-accent);color:#fff}
.process-step h3{font-family:var(--font-display);font-size:1.2rem;font-weight:500;margin-bottom:8px}
.process-step p{color:var(--color-text-muted);font-size:.9rem}

/* TESTIMONIAL */
.testimonial-section{padding:100px 0;background:var(--color-bg-warm)}
.testimonial-card{max-width:800px;margin:0 auto;text-align:center;padding:60px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);position:relative;box-shadow:var(--shadow-md)}
.testimonial-quote-mark{font-size:5rem;color:var(--color-accent);opacity:.15;position:absolute;top:20px;left:40px;font-family:var(--font-display);line-height:1}
.testimonial-text{font-family:var(--font-display);font-size:clamp(1.2rem,2.5vw,1.6rem);font-style:italic;line-height:1.7;margin-bottom:32px}
.testimonial-author{display:flex;align-items:center;justify-content:center;gap:16px}
.testimonial-avatar{width:52px;height:52px;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.2rem;color:#fff}
.testimonial-name{font-weight:600}
.testimonial-company{color:var(--color-text-muted);font-size:.9rem}

/* CTA */
.cta-section{padding:100px 0;text-align:center;background:var(--color-bg-dark);color:var(--color-text-on-dark);position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(91,147,184,.1),transparent)}
.cta-content{position:relative;z-index:1}
.cta-section .section-label{color:var(--color-accent-light)}

/* CONTACT */
.contact-section{padding:100px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}
.contact-info h2{font-family:var(--font-display);font-size:2rem;margin-bottom:16px}
.contact-info>p{color:var(--color-text-muted);margin-bottom:32px}
.contact-item{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.contact-item-icon{width:48px;height:48px;background:var(--color-accent-bg);border:1px solid rgba(91,147,184,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.contact-item-label{font-size:.8rem;color:var(--color-text-subtle);margin-bottom:2px;text-transform:uppercase;letter-spacing:.05em}
.contact-item-value{font-weight:500}
.contact-item-value a:hover{color:var(--color-accent)}
.contact-form{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-md)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:.85rem;color:var(--color-text-muted);margin-bottom:8px;font-weight:500}
.form-input,.form-textarea,.form-select{width:100%;padding:14px 16px;background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:12px;color:var(--color-text);font-family:var(--font-body);font-size:1rem;transition:all var(--transition-fast)}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}
.form-textarea{min-height:140px;resize:vertical}
.form-submit{width:100%;margin-top:8px}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:40px 32px;text-align:center;position:relative;transition:all var(--transition-medium);box-shadow:var(--shadow-sm)}
.pricing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pricing-card.featured{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-md)}
.pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--color-accent);color:#fff;padding:6px 20px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600}
.pricing-name{font-family:var(--font-display);font-size:1.5rem;font-weight:500;margin-bottom:8px}
.pricing-cocktails{color:var(--color-text-muted);font-size:.95rem;margin-bottom:24px}
.pricing-price{font-family:var(--font-display);font-size:2.5rem;font-weight:600;color:var(--color-accent);margin-bottom:4px}
.pricing-price-note{color:var(--color-text-subtle);font-size:.85rem;margin-bottom:24px}
.pricing-features{list-style:none;text-align:left;margin-bottom:32px}
.pricing-features li{padding:8px 0;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--color-text-muted)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features .check{color:var(--color-success);font-weight:bold}
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.staff-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:32px;text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition-medium)}
.staff-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.staff-card h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:8px}
.staff-card p{color:var(--color-text-muted);font-size:.9rem;margin-bottom:16px}
.staff-price{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--color-accent)}
.staff-price span{font-size:1rem;color:var(--color-text-muted)}

/* COCKTAILS */
.cocktail-category{margin-bottom:60px}
.cocktail-category h2{font-family:var(--font-display);font-size:2rem;font-weight:500;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--color-accent);display:inline-block}
.cocktail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.cocktail-item{text-align:center;transition:all var(--transition-fast)}
.cocktail-item:hover{transform:translateY(-4px)}
.cocktail-image{width:100%;aspect-ratio:1;background:var(--color-bg-warm);border-radius:var(--radius-md);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-medium)}
.cocktail-item:hover .cocktail-image{box-shadow:var(--shadow-md);border-color:var(--color-accent)}
.cocktail-image img{width:100%;height:100%;object-fit:cover}
.cocktail-name{font-family:var(--font-display);font-size:1rem;font-weight:500}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-item{aspect-ratio:1;background:var(--color-bg-warm);border-radius:var(--radius-md);border:1px solid var(--color-border);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:3rem;box-shadow:var(--shadow-sm);transition:all var(--transition-medium);cursor:pointer}
.gallery-item:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)}
.gallery-item img{width:100%;height:100%;object-fit:cover}

/* LOCATION CARDS */
.location-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-medium);box-shadow:var(--shadow-sm)}
.location-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.location-card-image{width:100%;aspect-ratio:16/9;background:var(--color-bg-warm);display:flex;align-items:center;justify-content:center;font-size:3rem;overflow:hidden}
.location-card-image img{width:100%;height:100%;object-fit:cover}
.location-card-body{padding:24px}
.location-card-body h3{font-family:var(--font-display);font-size:1.25rem;margin-bottom:8px}
.location-card-body p{color:var(--color-text-muted);font-size:.9rem;margin-bottom:16px}

/* CITY GRID */
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.city-link{display:flex;align-items:center;gap:8px;padding:14px 20px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.95rem;font-weight:500;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}
.city-link:hover{border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* FEATURE LIST */
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.feature-list-item{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--color-text-muted)}
.feature-list-item .icon{color:var(--color-accent)}

/* LEGAL */
.legal-content{padding:40px 0 80px;max-width:800px;margin:0 auto}
.legal-content h2{font-family:var(--font-display);font-size:1.5rem;margin:40px 0 16px}
.legal-content h3{font-size:1.1rem;margin:24px 0 8px}
.legal-content p,.legal-content li{color:var(--color-text-muted);margin-bottom:12px;line-height:1.8}
.legal-content ul{margin-bottom:16px;padding-left:24px}

/* FOOTER */
.footer{padding:60px 0 30px;background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-brand .nav-logo{color:var(--color-text-on-dark);margin-bottom:16px}
.footer-brand p{color:var(--color-text-on-dark-muted);font-size:.9rem;margin-bottom:20px;max-width:300px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;background:var(--color-bg-dark-elevated);border:1px solid rgba(255,255,255,.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--color-text-on-dark-muted);transition:all var(--transition-fast)}
.footer-social a:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.footer-title{font-weight:600;margin-bottom:20px;color:var(--color-text-on-dark)}
.footer-links{list-style:none}
.footer-links li{margin-bottom:12px}
.footer-links a{color:var(--color-text-on-dark-muted);font-size:.9rem;transition:color var(--transition-fast)}
.footer-links a:hover{color:var(--color-accent-light)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.85rem;color:var(--color-text-on-dark-muted)}
.footer-legal a{color:var(--color-text-on-dark-muted);margin-left:24px;transition:color var(--transition-fast)}
.footer-legal a:hover{color:var(--color-accent-light)}
.footer-cities{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.05)}
.footer-cities p{color:var(--color-text-on-dark-muted);font-size:.8rem;line-height:1.8}
.footer-cities a{color:var(--color-text-on-dark-muted);transition:color var(--transition-fast)}
.footer-cities a:hover{color:var(--color-accent-light)}

/* RESPONSIVE */
@media(max-width:1024px){
    .event-grid{grid-template-columns:1fr;gap:40px}
    .event-grid.reverse{direction:ltr}
    .pricing-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto}
    .card-grid.cols-4{grid-template-columns:repeat(2,1fr)}
    .process-grid{grid-template-columns:repeat(2,1fr);gap:40px}
    .process-grid::before{display:none}
    .staff-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
    .footer-grid{grid-template-columns:1fr 1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .feature-list{grid-template-columns:1fr}
}
@media(max-width:768px){
    .nav-links{display:none}
    .nav-cta{display:none}
    .nav-mobile-toggle{display:flex}
    .card-grid.cols-3,.card-grid.cols-4,.card-grid.cols-2{grid-template-columns:1fr}
    .process-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .cocktail-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr;gap:32px}
    .footer-bottom{flex-direction:column;gap:12px;text-align:center}
    .footer-legal a{margin:0 12px}
    .btn{width:100%;justify-content:center}
    .city-grid{grid-template-columns:1fr 1fr}
}

/* ============================================
   MOBILE OPTIMIERUNGEN - CONVERSION FOCUSED
============================================ */

/* Mobile Hero */
@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .hero-content {
        text-align: center;
        order: 1;
    }
    
    .hero-image {
        order: 2;
    }
    
    /* Floating Cards auf Mobile ausblenden */
    .hero-floating-card {
        display: none !important;
    }
    
    /* Urgency Badge zentriert */
    .urgency-badge {
        justify-content: center;
        font-size: 0.8rem;
        padding: 10px 16px;
    }
    
    /* Feature Checks kompakter */
    .feature-checks {
        gap: 10px;
    }
    
    .feature-check {
        font-size: 0.9rem;
        text-align: left;
        justify-content: flex-start;
    }
    
    /* Social Proof zentriert */
    .social-proof {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Touch-freundliche Buttons (min 48px Höhe) */
@media (max-width: 768px) {
    .btn {
        min-height: 52px;
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .btn-conversion {
        padding: 16px 24px;
        font-size: 1.05rem;
    }
    
    /* Telefon-Button prominent */
    .btn-secondary[href^="tel:"] {
        background: var(--color-success);
        color: #fff;
        border-color: var(--color-success);
    }
}

/* Mobile Navigation verbessert */
@media (max-width: 768px) {
    .nav {
        padding: 12px 0;
    }
    
    .nav.scrolled {
        padding: 10px 0;
    }
    
    .nav-logo img {
        height: 32px !important;
    }
    
    .nav-mobile-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-mobile-menu {
        padding-top: 70px;
        padding-bottom: 100px;
    }
    
    .nav-mobile-menu a {
        font-size: 1.1rem;
        padding: 14px 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide CTAs in mobile menu to prevent overlap */
    .nav-mobile-cta,
    .nav-mobile-call-btn,
    .nav-mobile-bottom-cta {
        display: none !important;
    }
}

/* Mobile Sticky CTA Bar optimiert */
@media (max-width: 768px) {
    .sticky-cta {
        display: flex;
        padding: 12px 16px;
        gap: 10px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    
    .sticky-cta .btn {
        flex: 1;
        min-height: 48px;
        font-size: 0.95rem;
        padding: 12px 16px;
    }
    
    .sticky-cta .btn-conversion {
        flex: 1.5;
    }
    
    /* Floating Buttons über Sticky Bar */
    .floating-buttons {
        bottom: 85px;
        right: 16px;
    }
    
    .floating-btn {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
    
    /* Mehr Platz unten für Sticky Bar */
    body {
        padding-bottom: 80px;
    }
}

/* Mobile Typografie */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .section-label {
        font-size: 0.7rem;
    }
    
    h1 {
        font-size: 1.8rem !important;
        line-height: 1.25 !important;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Mobile Spacing */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    section {
        padding: 60px 0;
    }
    
    .page-hero {
        padding: 120px 0 60px;
    }
    
    /* Stats kompakter */
    .stats {
        padding: 40px 0;
    }
    
    .stats-grid {
        gap: 20px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .stat-item::after {
        display: none;
    }
}

/* Mobile Formular */
@media (max-width: 768px) {
    .contact-form {
        padding: 24px 20px;
        border-radius: 16px;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px !important; /* Verhindert iOS Zoom */
        padding: 14px 16px;
        min-height: 52px;
    }
    
    .form-textarea {
        min-height: 120px;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }
    
    .event-type-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    .event-type-label {
        padding: 14px 10px;
        font-size: 0.8rem;
    }
    
    .event-type-icon {
        font-size: 1.3rem;
    }
    
    .slider-current {
        font-size: 1.5rem;
    }
    
    /* Range Slider touch-freundlich */
    input[type="range"] {
        height: 12px;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: 32px;
        height: 32px;
    }
}

/* Mobile Cards */
@media (max-width: 768px) {
    .card {
        padding: 24px 20px;
        border-radius: 16px;
    }
    
    .card-icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .pricing-card {
        padding: 28px 24px;
    }
    
    .pricing-name {
        font-size: 1.3rem;
    }
    
    .pricing-price {
        font-size: 2.5rem;
    }
}

/* Mobile Trust Logos */
@media (max-width: 768px) {
    .trust {
        padding: 40px 0;
    }
    
    .trust-logos {
        gap: 24px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .trust-logo {
        height: 35px;
    }
    
    .trust-logo img {
        max-height: 35px !important;
    }
}

/* Mobile Process Steps */
@media (max-width: 768px) {
    .process-step {
        padding: 24px 20px;
    }
    
    .process-number {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .process-step h3 {
        font-size: 1.1rem;
    }
    
    .process-step p {
        font-size: 0.9rem;
    }
}

/* Mobile Testimonials */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 28px 20px;
    }
    
    .testimonial-text {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .testimonial-quote-mark {
        font-size: 4rem;
        top: 15px;
        left: 15px;
    }
}

/* Mobile CTA Section */
@media (max-width: 768px) {
    .cta-section {
        padding: 60px 0;
    }
    
    .cta-content h2 {
        font-size: 1.5rem !important;
    }
    
    .cta-content p {
        font-size: 0.95rem;
    }
}

/* Mobile Bar Cards */
@media (max-width: 768px) {
    .bar-compare {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .bar-card {
        border-radius: 20px;
    }
    
    .bar-card-body {
        padding: 24px 20px;
    }
    
    .bar-card-name {
        font-size: 1.4rem;
    }
    
    .bar-card-price-amount {
        font-size: 2rem;
    }
}

/* Mobile Quick Contact */
@media (max-width: 768px) {
    .quick-contact {
        grid-template-columns: 1fr;
    }
    
    .quick-contact-btn {
        padding: 16px;
        font-size: 1rem;
        min-height: 56px;
    }
}

/* Mobile FAQ */
@media (max-width: 768px) {
    .faq-item {
        padding: 16px 0;
    }
    
    .faq-item strong {
        font-size: 0.95rem;
    }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    h1 {
        font-size: 1.6rem !important;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .urgency-badge {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
    
    .event-type-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 100px 0 60px;
    }
    
    .sticky-cta {
        padding: 8px 16px;
    }
    
    .sticky-cta .btn {
        min-height: 44px;
    }
}

/* ============================================
   COOKIE CONSENT BANNER - DSGVO
============================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    padding: 20px 24px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}
.cookie-banner.show {
    transform: translateY(0);
}
.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cookie-banner-text {
    flex: 1;
    min-width: 300px;
}
.cookie-banner-text h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text);
}
.cookie-banner-text p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}
.cookie-banner-text a {
    color: var(--color-accent);
    text-decoration: underline;
}
.cookie-banner-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.cookie-btn {
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
.cookie-btn-primary {
    background: var(--color-accent);
    color: #fff;
}
.cookie-btn-primary:hover {
    background: var(--color-accent-dark);
}
.cookie-btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}
.cookie-btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .cookie-banner {
        padding: 16px;
    }
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
    }
    .cookie-banner-buttons {
        width: 100%;
        flex-direction: column;
    }
    .cookie-btn {
        width: 100%;
    }
}

/* Event Image Wrapper - Proper sizing */
.event-image-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.event-image-wrapper img.event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.event-image-wrapper:hover img.event-image {
    transform: scale(1.03);
}

/* Cocktail Grid Fix */
.cocktail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
}
.cocktail-item {
    text-align: center;
    transition: transform 0.3s ease;
}
.cocktail-item:hover {
    transform: translateY(-5px);
}
.cocktail-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.cocktail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.cocktail-item:hover .cocktail-image img {
    transform: scale(1.05);
}
.cocktail-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}
@media (max-width: 768px) {
    .cocktail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .cocktail-name {
        font-size: 0.85rem;
    }
}