/* Marwa Ameen Art - Frontend v2 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
    --primary: #B8860B; --primary-dark: #8B6914; --primary-light: #F5E6CC;
    --accent: #D4A5A5; --bg: #FDFBF7; --white: #FFFFFF;
    --text: #1A1A2E; --text-body: #4A4A5A; --text-muted: #8E8E9A;
    --success: #2D9F5C; --warning: #E8A838; --danger: #D4524A;
    --radius: 20px; --radius-sm: 12px;
    --shadow: 0 4px 24px rgba(0,0,0,0.06); --shadow-lg: 0 16px 48px rgba(0,0,0,0.1);
    --transition: all 0.35s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text-body);line-height:1.8;font-size:15px;background-image:radial-gradient(at 0% 0%, rgba(184, 134, 11, 0.06) 0px, transparent 50%),radial-gradient(at 100% 100%, rgba(212, 165, 165, 0.08) 0px, transparent 50%);background-attachment:fixed;}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
img{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
h1,h2,h3,h4{font-family:'Cormorant Garamond','Cairo',serif;color:var(--text);line-height:1.3;font-weight:600}
.decorative{font-family:'Cormorant Garamond',serif;color:var(--primary);font-style:italic}

/* Glassmorphism Utility */
.glass-panel {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04) !important;
}

/* === SVG Icon Helper === */
.icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* === Navbar === */
.navbar{position:fixed;top:0;width:100%;z-index:1000;padding:18px 0;transition:var(--transition);background:transparent}
.navbar.scrolled{background:rgba(253,251,247,0.97);box-shadow:0 1px 20px rgba(0,0,0,0.06);padding:12px 0;backdrop-filter:blur(12px)}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.brand-text{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--text);letter-spacing:-0.5px}
.brand-logo{height:44px}
.navbar-menu{list-style:none;display:flex;gap:32px;align-items:center}
.navbar-menu a{color:var(--text);font-weight:500;font-size:0.9rem;position:relative;padding:6px 0}
.navbar-menu a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--primary);transition:var(--transition);border-radius:2px}
.navbar-menu a:hover::after,.navbar-menu a.active::after{width:100%}
.nav-whatsapp{background:var(--success)!important;color:white!important;padding:8px 20px!important;border-radius:25px;font-size:0.85rem!important}
.nav-whatsapp::after{display:none!important}
.navbar-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.navbar-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;transition:var(--transition);border-radius:2px}

/* ─────────────────────────────────────────
   HERO — Romantic & Elegant Glassmorphism
   ───────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #FFF5F7;         /* Soft blush pink background */
    color: var(--text);
}
/* Dreamy romantic glow gradients */
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(212, 165, 165, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(245, 230, 204, 0.4) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
}
/* Smooth fade into site bg at bottom */
.hero::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:120px; z-index:1;
    background: linear-gradient(to top, var(--bg), transparent);
}
/* Inner wrapper — sits above bg, below ::after */
.hero-inner {
    position: relative; z-index: 2; width:100%; padding: 120px 0 100px;
}
/* Text block centred - Bright Glass Card */
.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 36px;
    padding: 60px 40px;
    box-shadow: 0 30px 60px rgba(212, 165, 165, 0.15), inset 0 2px 0 rgba(255,255,255,0.8);
    position: relative;
    overflow: hidden;
    animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Pill badge */
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(212, 165, 165, 0.15);
    border: 1px solid rgba(212, 165, 165, 0.3);
    backdrop-filter: blur(12px);
    padding: 8px 22px; border-radius: 40px;
    font-size: 0.83rem; color: #8A5A5A;
    margin-bottom: 28px; letter-spacing: 0.5px;
    font-weight: 600;
}
.hero-badge svg { color: #D4A5A5; flex-shrink:0; }
/* Heading */
.hero h1 { margin-bottom: 18px; }
.hero-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.5rem, 8vw, 5.8rem);
    font-weight: 600; font-style: italic;
    display: block; margin-bottom: 6px;
    background: linear-gradient(135deg, #B8860B 0%, #D4A5A5 50%, #8A5A5A 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}
.hero-tagline {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 700; color: #2C2526;
    display: block; line-height: 1.5;
}
.hero-desc {
    font-size: 1.05rem; color: #665A5A;
    max-width: 540px; margin: 0 auto 40px; line-height: 1.9;
}
/* Action buttons */
.hero-actions {
    display: flex; gap: 14px; justify-content: center; margin-bottom: 56px; flex-wrap: wrap;
}
.btn-hero {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(45deg, #D4A5A5, #C48B8B);
    color: white; padding: 15px 38px; border-radius: 60px;
    font-size: 0.98rem; font-weight: 700; font-family: inherit;
    border: none; cursor: pointer; transition: var(--transition);
    box-shadow: 0 8px 25px rgba(212, 165, 165, 0.4);
}
.btn-hero:hover { background: linear-gradient(45deg, #C48B8B, #B37575); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(212, 165, 165, 0.5); color:white; }
.btn-hero-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(212, 165, 165, 0.4);
    color: #8A5A5A;
    padding: 15px 32px; border-radius: 60px;
    font-size: 0.98rem; font-weight: 600; font-family: inherit;
    backdrop-filter: blur(12px); cursor: pointer; transition: var(--transition);
}
.btn-hero-ghost:hover { background: white; color: #2C2526; transform:translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }

/* ── Glassmorphism Stats Row ── */
.hero-stats {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 24px;
    padding: 24px 40px;
    gap: 0; width: 100%;
}
.hero-stat-card {
    text-align: center; padding: 0 32px; flex: 1;
}
.stat-num {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem; font-weight: 700;
    color: #2C2526;
    line-height: 1;
    margin-bottom: 6px;
}
.stat-num .stat-counter { color: #D4A5A5; }
.stat-label {
    display: block; font-size: 0.85rem; color: #665A5A;
    font-family: 'Cairo', sans-serif; letter-spacing: 0.3px; font-weight: 500;
}
.stat-divider {
    width: 1px; height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(212,165,165,0.4), transparent);
    flex-shrink: 0;
}

/* Floating Petals */
.petals-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.petal{position:absolute;opacity:0;animation:petalFall linear infinite}
.petal svg{width:100%;height:100%}
@keyframes petalFall{0%{opacity:0;transform:translateY(-10vh) rotate(0deg) scale(0.8)}10%{opacity:0.25}90%{opacity:0.15}100%{opacity:0;transform:translateY(110vh) rotate(720deg) scale(0.3)}}

/* Golden line decorations */
.gold-line{display:block;width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);margin:16px auto}



/* === Sections === */
.section{padding:90px 0}
.section-light{background:var(--white)}
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{font-size:2.4rem;margin-bottom:8px;letter-spacing:-0.5px}
.section-header .decorative{font-size:1.6rem;display:block;margin-bottom:6px}
.section-header p{color:var(--text-muted);max-width:560px;margin:0 auto;font-size:0.95rem}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 30px;border-radius:60px;font-family:inherit;font-size:0.92rem;font-weight:600;cursor:pointer;transition:var(--transition);border:none;text-decoration:none}
.btn-primary{background:var(--primary);color:white}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);color:white}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:white}
.btn-block{width:100%;justify-content:center}

/* === Banner === */
.promo-banner{padding:14px 0;text-align:center;position:relative;z-index:5;font-size:0.9rem;font-weight:600}
.promo-banner a{color:inherit;text-decoration:underline}
.promo-banner .banner-close{position:absolute;left:20px;top:50%;transform:translateY(-50%);background:none;border:none;color:inherit;cursor:pointer;font-size:1.2rem;opacity:0.7}

/* === Features === */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:36px 28px;border-radius:var(--radius);text-align:center;transition:var(--transition);border:1px solid rgba(255,255,255,0.8);box-shadow:0 12px 40px rgba(0,0,0,0.03)}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,0.08);background:rgba(255,255,255,0.85)}
.feature-icon{width:64px;height:64px;border-radius:50%;background:rgba(184,134,11,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--primary-dark)}
.feature-icon svg{width:28px;height:28px}
.feature-card h3{font-size:1.1rem;margin-bottom:8px}
.feature-card p{font-size:0.88rem;color:var(--text-muted);line-height:1.7}

/* === Portfolio Grid === */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.portfolio-card{border-radius:var(--radius);overflow:hidden;position:relative}
.portfolio-card img{width:100%;height:340px;object-fit:cover;transition:transform 0.6s ease}
.portfolio-card:hover img{transform:scale(1.06)}
.portfolio-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 55%);opacity:0;transition:var(--transition);display:flex;align-items:flex-end;padding:24px}
.portfolio-card:hover .portfolio-card-overlay{opacity:1}
.portfolio-card-info h3{color:white;font-size:1.05rem;margin-bottom:4px}
.portfolio-card-info p{color:rgba(255,255,255,0.7);font-size:0.82rem}

/* === Category Tabs === */
.category-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.category-tab{padding:9px 26px;border-radius:30px;border:2px solid #E8E0D8;color:var(--text-body);cursor:pointer;transition:var(--transition);font-family:inherit;font-size:0.88rem;background:rgba(255,255,255,0.5);backdrop-filter:blur(8px);text-decoration:none}
.category-tab:hover,.category-tab.active{background:var(--primary);color:white;border-color:var(--primary)}

/* === Pricing === */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;max-width:960px;margin:0 auto}
.pricing-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius);padding:40px 28px;text-align:center;border:1px solid rgba(255,255,255,0.8);transition:var(--transition);position:relative;box-shadow:0 12px 40px rgba(0,0,0,0.03)}
.pricing-card:hover{box-shadow:0 16px 48px rgba(0,0,0,0.08);background:rgba(255,255,255,0.85)}
.pricing-card.popular{border-color:var(--primary);transform:scale(1.04);background:rgba(255,255,255,0.95)}
.pricing-card.popular::before{content:'الأكثر طلباً';position:absolute;top:-14px;right:50%;transform:translateX(50%);background:var(--primary);color:white;padding:5px 20px;border-radius:20px;font-size:0.75rem;font-weight:600}
.pricing-card h3{font-size:1.2rem;margin-bottom:10px}
.pricing-price{font-size:2.8rem;font-weight:700;color:var(--primary-dark);margin:18px 0;font-family:'Cormorant Garamond',serif}
.pricing-price span{font-size:0.95rem;color:var(--text-muted);font-family:'Cairo',sans-serif}
.pricing-features{list-style:none;margin:24px 0;text-align:right}
.pricing-features li{padding:9px 0;border-bottom:1px solid rgba(184,134,11,0.1);font-size:0.9rem;display:flex;align-items:center;gap:10px}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li svg{color:var(--success);flex-shrink:0}

/* === Testimonials === */
.testimonials-slider{max-width:700px;margin:0 auto;position:relative}
.testimonial-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.8);padding:40px;border-radius:var(--radius);text-align:center;box-shadow:0 12px 40px rgba(0,0,0,0.03);display:none}
.testimonial-card.active{display:block;animation:fadeIn 0.5s ease}
.testimonial-stars{color:var(--warning);font-size:1.2rem;margin-bottom:16px;letter-spacing:3px}
.testimonial-text{font-size:1.05rem;font-style:italic;margin-bottom:20px;line-height:2;font-family:'Cormorant Garamond',serif;font-size:1.2rem}
.testimonial-name{font-weight:600;color:var(--text)}
.testimonial-nav{display:flex;justify-content:center;gap:8px;margin-top:20px}
.testimonial-dot{width:10px;height:10px;border-radius:50%;border:none;background:rgba(184,134,11,0.2);cursor:pointer;transition:var(--transition)}
.testimonial-dot.active{background:var(--primary);width:28px;border-radius:5px}

/* === FAQ === */
.faq-list{max-width:750px;margin:0 auto}
.faq-item{background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.8);box-shadow:0 4px 15px rgba(0,0,0,0.02)}
.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:0.95rem}
.faq-question svg{transition:var(--transition);color:var(--primary);flex-shrink:0}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.faq-answer-inner{padding:0 24px 20px;color:var(--text-muted);font-size:0.9rem;line-height:1.9}
.faq-item.open .faq-answer{max-height:500px}

/* === Form Styles === */
.order-form-container{max-width:800px;margin:0 auto}
.form-steps{display:flex;justify-content:center;gap:4px;margin-bottom:44px}
.form-step{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--text-muted)}
.form-step-num{width:36px;height:36px;border-radius:50%;background:#E8E0D8;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-body);transition:var(--transition)}
.form-step.active .form-step-num{background:var(--primary);color:white}
.form-step.completed .form-step-num{background:var(--success);color:white}
.form-step-line{width:36px;height:2px;background:#E8E0D8}
.step-panel{display:none}.step-panel.active{display:block;animation:fadeIn 0.4s ease}
.form-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:40px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.8);box-shadow:0 12px 40px rgba(0,0,0,0.05)}
.form-group{margin-bottom:22px}
.form-group label{display:block;margin-bottom:7px;font-weight:600;font-size:0.9rem}
.form-control{width:100%;padding:13px 18px;border:2px solid #E8E0D8;border-radius:var(--radius-sm);font-family:inherit;font-size:0.92rem;transition:var(--transition);background:rgba(253,251,247,0.8)}
.form-control:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px rgba(184,134,11,0.1);background:var(--white)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.upload-zone{border:2px dashed #D4CFC8;border-radius:var(--radius);padding:44px;text-align:center;cursor:pointer;transition:var(--transition)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--primary);background:rgba(184,134,11,0.03)}
.upload-zone svg{margin-bottom:10px;color:var(--primary)}
.upload-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:14px}
.upload-previews img{width:80px;height:80px;object-fit:cover;border-radius:10px}

/* === Track Order === */
.track-container{max-width:620px;margin:0 auto}
.track-form{background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:40px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.8);box-shadow:0 12px 40px rgba(0,0,0,0.05)}
.progress-tracker{margin-top:36px}
.progress-step{display:flex;align-items:flex-start;gap:18px;padding:18px 0;position:relative}
.progress-step::before{content:'';position:absolute;right:17px;top:44px;bottom:-18px;width:2px;background:#E8E0D8}
.progress-step:last-child::before{display:none}
.progress-dot{width:36px;height:36px;border-radius:50%;border:3px solid #E8E0D8;background:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;transition:var(--transition)}
.progress-step.completed .progress-dot{background:var(--success);border-color:var(--success);color:white}
.progress-step.current .progress-dot{background:var(--primary);border-color:var(--primary);color:white;animation:pulse 2s infinite}
.progress-info h4{font-size:0.95rem;margin-bottom:3px}.progress-info p{font-size:0.82rem;color:var(--text-muted)}

/* === Blog === */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:28px}
.blog-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.8);border-radius:var(--radius);overflow:hidden;transition:var(--transition);box-shadow:0 12px 40px rgba(0,0,0,0.03)}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,0.08);background:rgba(255,255,255,0.85)}
.blog-card img{width:100%;height:210px;object-fit:cover}
.blog-card-body{padding:24px}.blog-card-body h3{font-size:1.1rem;margin-bottom:10px}.blog-card-body p{font-size:0.88rem;color:var(--text-muted)}
.blog-meta{font-size:0.8rem;color:var(--text-muted);margin-top:10px}

/* === Page Hero === */
.page-hero{padding:150px 0 60px;text-align:center;background:rgba(253,251,247,0.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.04)}
.page-hero h1{font-size:2.6rem;letter-spacing:-0.5px}
.page-hero p{color:var(--text-muted);margin-top:8px}
.page-content{padding:60px 0}
.content-body{max-width:800px;margin:0 auto;background:rgba(255,255,255,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.8);padding:44px;border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,0.03)}
.content-body h2{margin:28px 0 14px;font-size:1.4rem}.content-body h3{margin:22px 0 10px;font-size:1.1rem;color:var(--primary-dark)}
.content-body p{margin-bottom:14px}.content-body img{border-radius:var(--radius-sm)}

/* === CTA === */
.cta-section{background:var(--text);padding:90px 0;text-align:center;color:white;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(184,134,11,0.15),transparent 60%)}
.cta-section h2{color:white;font-size:2.2rem;margin-bottom:14px;position:relative}.cta-section p{opacity:0.7;margin-bottom:28px;position:relative}
.btn-cta{background:var(--primary);color:white;padding:16px 44px;border-radius:60px;font-weight:600;border:none;cursor:pointer;font-family:inherit;font-size:1rem;transition:var(--transition);position:relative}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(184,134,11,0.4);background:var(--primary-dark)}

/* === Lightbox === */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:10000;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}.lightbox img{max-width:90%;max-height:90vh;border-radius:10px}
.lightbox-close{position:absolute;top:24px;left:24px;color:white;font-size:1.8rem;cursor:pointer;background:rgba(255,255,255,0.1);border:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:white;cursor:pointer;background:rgba(255,255,255,0.1);border:none;padding:14px;border-radius:50%;transition:var(--transition)}
.lightbox-nav:hover{background:rgba(255,255,255,0.2)}
.lightbox-prev{right:24px}.lightbox-next{left:24px}

/* === WhatsApp Float === */
.whatsapp-float{position:fixed;bottom:28px;left:28px;width:56px;height:56px;background:#25D366;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.35);z-index:999;transition:var(--transition)}
.whatsapp-float:hover{transform:scale(1.1);color:white}
.whatsapp-float svg{width:28px;height:28px;fill:white;stroke:none}

/* === Footer === */
.footer{background:var(--text);color:rgba(255,255,255,0.65);padding:70px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px}
.footer-brand{font-family:'Cormorant Garamond',serif;color:white;font-size:1.4rem;margin-bottom:14px}
.footer h4{color:white;font-size:1rem;margin-bottom:18px}
.footer ul{list-style:none}.footer ul li{margin-bottom:10px}
.footer ul a{color:rgba(255,255,255,0.55);font-size:0.88rem}.footer ul a:hover{color:var(--primary)}
.social-links{display:flex;gap:10px;margin-top:18px}
.social-links a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:white;transition:var(--transition)}
.social-links a:hover{background:var(--primary)}
.social-links a svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;text-align:center;font-size:0.82rem}
.footer-contact p{margin-bottom:10px;font-size:0.88rem}

/* === Utilities === */
.alert{padding:14px 22px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:0.9rem}
.alert-success{background:#D4EDDA;color:#155724}.alert-danger{background:#F8D7DA;color:#721C24}.alert-info{background:#D1ECF1;color:#0C5460}
.text-center{text-align:center}.text-muted{color:var(--text-muted)}.mt-2{margin-top:14px}.mt-4{margin-top:36px}.mb-2{margin-bottom:14px}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:36px}
.pagination a,.pagination span{padding:9px 16px;border-radius:var(--radius-sm);border:1px solid #E8E0D8;color:var(--text);font-size:0.88rem}
.pagination a:hover{background:var(--primary-light)}.pagination .active{background:var(--primary);color:white;border-color:var(--primary)}

/* === Animations === */
@keyframes fadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(184,134,11,0.35)}50%{box-shadow:0 0 0 12px rgba(184,134,11,0)}}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* === Responsive === */
@media(max-width:768px){
    /* Hero */
    .hero-inner{ padding: 100px 0 80px; }
    .hero-content{ max-width:100%; padding: 40px 20px; border-radius: 24px; }
    .hero-stats{ display:flex; flex-direction:column; gap:0; padding:16px; border-radius:20px; width:100%; max-width:100%; margin:0 auto; background: transparent; border: none; }
    .hero-stat-card{ padding: 14px 0; }
    .stat-divider{ width:80%; height:1px; margin:0 auto; background:linear-gradient(to right,transparent,rgba(255,255,255,0.15),transparent); }
    .stat-num{ font-size:2.2rem; }
    .hero-name { font-size: 2.8rem; }
    .hero-tagline { font-size: 1.4rem; }
    /* Features / Pricing */
    .features-grid,.pricing-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
    /* Navbar */
    .navbar-toggle{display:block}
    .navbar-menu{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--white);flex-direction:column;padding:80px 30px;box-shadow:var(--shadow-lg);transition:var(--transition);z-index:1001}
    .navbar-menu.open{right:0}
    /* Forms */
    .form-row{grid-template-columns:1fr}
    .pricing-card.popular{transform:none}
    .page-hero h1{font-size:1.9rem}
    .section{padding:56px 0}
}
@media(max-width:480px){
    .hero-stats{ max-width:100%; }
    .footer-grid{grid-template-columns:1fr}
    .portfolio-grid{grid-template-columns:1fr}
}