/* Frontend Styles */
:root {
    --green-start: #00b09b;
    --green-end: #96c93d;
    --green-dark: #1a7a5c;
    --green-gradient: linear-gradient(135deg, var(--green-start) 0%, var(--green-end) 100%);
    --sky-blue: #87ceeb;
    --sky-blue-transparent: rgba(135, 206, 235, 0.85);
    --sky-blue-gradient-trans: linear-gradient(135deg, rgba(135, 206, 235, 0.85) 0%, rgba(184, 228, 240, 0.85) 100%);
}

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.navbar { padding: 0.8rem 0; transition: all 0.3s; background: var(--sky-blue-gradient-trans) !important; backdrop-filter: blur(10px); }
.navbar-brand { font-size: 1.4rem; }
.nav-link { font-weight: 500; padding: 0.5rem 1rem !important; }
.nav-link.active { color: var(--green-end) !important; border-bottom: 2px solid var(--green-end); }

.portfolio-card { transition: transform 0.3s, box-shadow 0.3s; overflow: hidden; }
.portfolio-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

.post-content h1, .post-content h2, .post-content h3 { margin-top: 1.5rem; }
.post-content p { line-height: 1.8; }
.post-content img { max-width: 100%; height: auto; border-radius: 8px; }

footer a:hover { color: var(--green-end) !important; }
.social-links a { transition: color 0.3s; }
.social-links a:hover { color: var(--green-end) !important; }

section { position: relative; }
.badge { font-weight: 500; }

.btn { font-weight: 500; border: none; }
.btn-primary { background: var(--green-gradient); color: #fff; }
.btn-primary:hover { background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-start) 100%); color: #fff; }
.btn-outline-primary { border-color: var(--green-start); color: var(--green-start); }
.btn-outline-primary:hover { background: var(--green-gradient); border-color: transparent; color: #fff; }

.hero-btn { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 1rem; font-weight: 500; letter-spacing: 1px; text-transform: lowercase; border-bottom: 2px solid var(--green-end); padding-bottom: 4px; transition: all 0.3s; }
.hero-btn:hover { color: var(--green-end); border-color: #fff; gap: 14px; }
.hero-btn svg { width: 20px; height: 20px; transition: transform 0.3s; }
.hero-btn:hover svg { transform: translateX(4px); }

.text-primary { color: var(--green-start) !important; }
.bg-primary { background: var(--green-gradient) !important; }

.card .badge.bg-primary { background: var(--green-gradient) !important; }

.footer-gradient { background: linear-gradient(135deg, #0a4f38 0%, #1a7a5c 50%, #00b09b 100%) !important; }
.sky-blue { background: var(--sky-blue-gradient-trans) !important; backdrop-filter: blur(10px); }
.sky-blue-gradient { background: linear-gradient(135deg, #87ceeb 0%, #b8e4f0 100%) !important; }

.footer-text { color: #e0e0e0 !important; }
.footer-text h5, .footer-text .fw-bold { color: #f5f5f5 !important; }
.footer-text p, .footer-text .text-muted { color: #d9d9d9 !important; }
.footer-text a { color: #d9d9d9 !important; }
.footer-text a:hover { color: #96c93d !important; }
.social-links a { color: #f5f5f5 !important; transition: color 0.3s; }
.social-links a:hover { color: #96c93d !important; }