/* ========================================
   HAUSRUCK BARF - Modern Stylesheet
   Designed by microcode.at
   ======================================== */

/* CSS Variables */
:root {
    --primary-dark: #0a0c0a;
    --secondary-dark: #141814;
    --tertiary-dark: #1f241f;
    --accent-green: #8b9a6d;
    --accent-green-light: #a8b88a;
    --accent-gold: #c4b896;
    --accent-gold-light: #d4c9a6;
    --text-light: #f5f5f0;
    --text-muted: #b8b8a8;
    --text-dark: #6b6b5f;
    --glass-bg: rgba(20, 24, 20, 0.7);
    --glass-border: rgba(139, 154, 109, 0.2);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --border-radius: 16px;
    --border-radius-sm: 10px;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--primary-dark);
    color: var(--text-light);
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.3;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-normal);
}

img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   FLOATING ELEMENTS / SCHWEBENDE ELEMENTE
   ======================================== */

/* Floating Paws Container */
.floating-paws {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-paw {
    position: absolute;
    color: var(--accent-green);
    opacity: 0.15;
    font-size: 2rem;
    animation: floatPaw 15s infinite ease-in-out;
}

.floating-paw:nth-child(1) { left: 5%; top: 20%; animation-delay: 0s; font-size: 1.5rem; }
.floating-paw:nth-child(2) { left: 15%; top: 60%; animation-delay: 3s; font-size: 2.5rem; }
.floating-paw:nth-child(3) { left: 25%; top: 40%; animation-delay: 6s; font-size: 1.8rem; }
.floating-paw:nth-child(4) { right: 10%; top: 25%; animation-delay: 2s; font-size: 2.2rem; }
.floating-paw:nth-child(5) { right: 20%; top: 70%; animation-delay: 5s; font-size: 1.6rem; }
.floating-paw:nth-child(6) { right: 5%; top: 50%; animation-delay: 8s; font-size: 2rem; }
.floating-paw:nth-child(7) { left: 50%; top: 80%; animation-delay: 4s; font-size: 1.4rem; }
.floating-paw:nth-child(8) { left: 70%; top: 15%; animation-delay: 7s; font-size: 2.3rem; }

@keyframes floatPaw {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        transform: translateY(-30px) rotate(10deg);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-15px) rotate(-5deg);
        opacity: 0.15;
    }
    75% {
        transform: translateY(-40px) rotate(5deg);
        opacity: 0.25;
    }
}

/* Floating Particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    opacity: 0.5;
    animation: particleFloat 12s infinite linear;
    box-shadow: 0 0 10px var(--accent-green);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 30%; animation-delay: 2s; animation-duration: 18s; }
.particle:nth-child(3) { left: 50%; animation-delay: 4s; animation-duration: 14s; }
.particle:nth-child(4) { left: 70%; animation-delay: 1s; animation-duration: 16s; }
.particle:nth-child(5) { left: 90%; animation-delay: 3s; animation-duration: 20s; }

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

/* Glow Orbs */
.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.glow-orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 154, 109, 0.25) 0%, transparent 70%);
    top: 5%;
    right: -150px;
    animation: orbFloat1 15s infinite ease-in-out;
}

.glow-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(196, 184, 150, 0.2) 0%, transparent 70%);
    bottom: 10%;
    left: -150px;
    animation: orbFloat2 18s infinite ease-in-out;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-50px, 30px); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, -30px); }
}

/* ========================================
   NAVIGATION
   ======================================== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 12, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-normal);
}

nav.scrolled {
    padding: 0.7rem 5%;
    background: rgba(10, 12, 10, 0.95);
}

.logo {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--accent-green);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo span {
    color: var(--accent-gold);
    font-size: 0.75rem;
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-links a {
    color: var(--text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    padding: 0.5rem 0;
    font-weight: 500;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
    transition: width var(--transition-normal);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent-green);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: var(--secondary-dark);
    z-index: 1001;
    padding: 5rem 2rem 2rem;
    transition: right var(--transition-normal);
    border-left: 1px solid var(--glass-border);
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu li {
    margin-bottom: 1.5rem;
}

.mobile-menu a {
    color: var(--text-light);
    font-size: 1.1rem;
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--glass-border);
}

.mobile-menu a:hover,
.mobile-menu a.active {
    color: var(--accent-green);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   REALISTIC FOREST BACKGROUND
   ======================================== */
.forest-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(180deg, #0d140f 0%, #1a2318 40%, #0f1611 100%);
}

/* Background Trees Layer - Far away */
.forest-trees-far {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 800' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%2318251a' opacity='0.6'%3E%3Cpath d='M100,800 L100,500 L50,550 L100,450 L30,520 L100,400 L20,500 L100,350 L0,480 L100,300 L40,450 L100,250 L60,420 L100,200 L80,400 L100,150 L120,400 L100,200 L140,420 L100,250 L160,450 L100,300 L200,480 L100,350 L180,500 L100,400 L170,520 L100,450 L150,550 L100,500 Z'/%3E%3Cpath d='M300,800 L300,520 L250,580 L300,450 L220,550 L300,380 L200,520 L300,320 L180,500 L300,280 L220,450 L300,220 L260,430 L300,180 L280,410 L300,140 L320,410 L300,180 L340,430 L300,220 L380,450 L300,280 L420,500 L300,320 L400,520 L300,380 L390,550 L300,450 L350,580 L300,520 Z'/%3E%3Cpath d='M500,800 L500,480 L440,550 L500,400 L420,520 L500,350 L400,500 L500,300 L380,480 L500,250 L420,450 L500,200 L460,430 L500,160 L480,420 L500,120 L520,420 L500,160 L540,430 L500,200 L560,450 L500,250 L600,480 L500,300 L580,500 L500,350 L590,520 L500,400 L560,550 L500,480 Z'/%3E%3Cpath d='M700,800 L700,550 L640,600 L700,480 L620,580 L700,420 L600,560 L700,380 L580,540 L700,340 L620,520 L700,300 L660,500 L700,280 L680,490 L700,250 L720,490 L700,280 L740,500 L700,300 L760,520 L700,340 L800,540 L700,380 L780,560 L700,420 L790,580 L700,480 L760,600 L700,550 Z'/%3E%3Cpath d='M900,800 L900,500 L840,560 L900,420 L820,540 L900,360 L800,520 L900,320 L780,500 L900,280 L820,480 L900,240 L860,460 L900,220 L880,450 L900,200 L920,450 L900,220 L940,460 L900,240 L960,480 L900,280 L1000,500 L900,320 L980,520 L900,360 L990,540 L900,420 L960,560 L900,500 Z'/%3E%3Cpath d='M1100,800 L1100,530 L1040,590 L1100,450 L1020,570 L1100,390 L1000,550 L1100,350 L980,530 L1100,310 L1020,510 L1100,270 L1060,490 L1100,250 L1080,480 L1100,230 L1120,480 L1100,250 L1140,490 L1100,270 L1160,510 L1100,310 L1200,530 L1100,350 L1180,550 L1100,390 L1190,570 L1100,450 L1160,590 L1100,530 Z'/%3E%3Cpath d='M1300,800 L1300,480 L1240,550 L1300,400 L1220,530 L1300,350 L1200,510 L1300,300 L1180,490 L1300,260 L1220,470 L1300,220 L1260,460 L1300,200 L1280,450 L1300,180 L1320,450 L1300,200 L1340,460 L1300,220 L1360,470 L1300,260 L1400,490 L1300,300 L1380,510 L1300,350 L1390,530 L1300,400 L1360,550 L1300,480 Z'/%3E%3Cpath d='M1500,800 L1500,520 L1440,580 L1500,440 L1420,560 L1500,380 L1400,540 L1500,340 L1380,520 L1500,300 L1420,500 L1500,260 L1460,480 L1500,240 L1480,470 L1500,220 L1520,470 L1500,240 L1540,480 L1500,260 L1560,500 L1500,300 L1600,520 L1500,340 L1580,540 L1500,380 L1590,560 L1500,440 L1560,580 L1500,520 Z'/%3E%3Cpath d='M1700,800 L1700,500 L1640,560 L1700,420 L1620,540 L1700,360 L1600,520 L1700,320 L1580,500 L1700,280 L1620,480 L1700,240 L1660,460 L1700,220 L1680,450 L1700,200 L1720,450 L1700,220 L1740,460 L1700,240 L1760,480 L1700,280 L1800,500 L1700,320 L1780,520 L1700,360 L1790,540 L1700,420 L1760,560 L1700,500 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: repeat-x;
    background-position: bottom;
    filter: blur(2px);
}

/* Mid Trees Layer */
.forest-trees-mid {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 600' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%2324352a' opacity='0.8'%3E%3Cpath d='M-50,600 L-50,350 L-100,420 L-50,280 L-130,400 L-50,220 L-150,380 L-50,180 L-170,360 L-50,150 L-130,340 L-50,120 L-90,320 L-50,100 L-70,310 L-50,80 L-30,310 L-50,100 L-10,320 L-50,120 L30,340 L-50,150 L70,360 L-50,180 L50,380 L-50,220 L30,400 L-50,280 L10,420 L-50,350 Z'/%3E%3Cpath d='M200,600 L200,380 L140,450 L200,300 L120,430 L200,240 L100,410 L200,200 L80,390 L200,160 L120,370 L200,120 L160,350 L200,100 L180,340 L200,80 L220,340 L200,100 L240,350 L200,120 L280,370 L200,160 L320,390 L200,200 L300,410 L200,240 L320,430 L200,300 L260,450 L200,380 Z'/%3E%3Cpath d='M450,600 L450,340 L380,420 L450,260 L360,400 L450,200 L340,380 L450,160 L320,360 L450,120 L360,340 L450,80 L400,320 L450,60 L430,310 L450,40 L470,310 L450,60 L490,320 L450,80 L520,340 L450,120 L560,360 L450,160 L540,380 L450,200 L550,400 L450,260 L510,420 L450,340 Z'/%3E%3Cpath d='M700,600 L700,400 L630,470 L700,320 L620,450 L700,260 L600,430 L700,220 L580,410 L700,180 L620,390 L700,140 L660,370 L700,120 L680,360 L700,100 L720,360 L700,120 L740,370 L700,140 L760,390 L700,180 L800,410 L700,220 L780,430 L700,260 L790,450 L700,320 L760,470 L700,400 Z'/%3E%3Cpath d='M950,600 L950,360 L880,430 L950,280 L870,410 L950,220 L850,390 L950,180 L830,370 L950,140 L870,350 L950,100 L910,330 L950,80 L930,320 L950,60 L970,320 L950,80 L990,330 L950,100 L1030,350 L950,140 L1070,370 L950,180 L1050,390 L950,220 L1060,410 L950,280 L1020,430 L950,360 Z'/%3E%3Cpath d='M1200,600 L1200,420 L1130,490 L1200,340 L1120,470 L1200,280 L1100,450 L1200,240 L1080,430 L1200,200 L1120,410 L1200,160 L1160,390 L1200,140 L1180,380 L1200,120 L1220,380 L1200,140 L1240,390 L1200,160 L1280,410 L1200,200 L1320,430 L1200,240 L1300,450 L1200,280 L1310,470 L1200,340 L1270,490 L1200,420 Z'/%3E%3Cpath d='M1450,600 L1450,380 L1380,450 L1450,300 L1370,430 L1450,240 L1350,410 L1450,200 L1330,390 L1450,160 L1370,370 L1450,120 L1410,350 L1450,100 L1430,340 L1450,80 L1470,340 L1450,100 L1510,350 L1450,120 L1530,370 L1450,160 L1570,390 L1450,200 L1550,410 L1450,240 L1560,430 L1450,300 L1520,450 L1450,380 Z'/%3E%3Cpath d='M1700,600 L1700,400 L1630,470 L1700,320 L1620,450 L1700,260 L1600,430 L1700,220 L1580,410 L1700,180 L1620,390 L1700,140 L1660,370 L1700,120 L1680,360 L1700,100 L1720,360 L1700,120 L1740,370 L1700,140 L1780,390 L1700,180 L1820,410 L1700,220 L1800,430 L1700,260 L1810,450 L1700,320 L1770,470 L1700,400 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: repeat-x;
    background-position: bottom;
}

/* Close Trees Layer */
.forest-trees-close {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 400' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23304535'%3E%3Cpath d='M-100,400 L-100,150 L-150,220 L-100,80 L-180,200 L-100,20 L-200,180 L-100,-20 L-220,160 L-100,-50 L-180,140 L-100,-80 L-140,120 L-100,-100 L-120,110 L-100,-120 L-80,110 L-100,-100 L-60,120 L-100,-80 L-20,140 L-100,-50 L20,160 L-100,-20 L0,180 L-100,20 L10,200 L-100,80 L-50,220 L-100,150 Z'/%3E%3Cpath d='M300,400 L300,180 L240,250 L300,100 L220,230 L300,60 L200,210 L300,20 L180,190 L300,-30 L220,170 L300,-60 L260,150 L300,-80 L280,140 L300,-100 L320,140 L300,-80 L340,150 L300,-60 L360,170 L300,-30 L400,190 L300,20 L380,210 L300,60 L390,230 L300,100 L360,250 L300,180 Z'/%3E%3Cpath d='M700,400 L700,200 L640,270 L700,120 L620,250 L700,80 L600,230 L700,40 L580,210 L700,-10 L620,190 L700,-40 L660,170 L700,-60 L680,160 L700,-80 L720,160 L700,-60 L740,170 L700,-40 L760,190 L700,-10 L800,210 L700,40 L780,230 L700,80 L790,250 L700,120 L760,270 L700,200 Z'/%3E%3Cpath d='M1100,400 L1100,160 L1040,230 L1100,80 L1020,210 L1100,40 L1000,190 L1100,0 L980,170 L1100,-50 L1020,150 L1100,-80 L1060,130 L1100,-100 L1080,120 L1100,-120 L1120,120 L1100,-100 L1140,130 L1100,-80 L1160,150 L1100,-50 L1200,170 L1100,0 L1180,190 L1100,40 L1190,210 L1100,80 L1160,230 L1100,160 Z'/%3E%3Cpath d='M1500,400 L1500,220 L1440,290 L1500,140 L1420,270 L1500,100 L1400,250 L1500,60 L1380,230 L1500,10 L1420,210 L1500,-20 L1460,190 L1500,-40 L1480,180 L1500,-60 L1520,180 L1500,-40 L1540,190 L1500,-20 L1560,210 L1500,10 L1600,230 L1500,60 L1580,250 L1500,100 L1590,270 L1500,140 L1560,290 L1500,220 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: repeat-x;
    background-position: bottom;
}

/* Mist/Fog Layer */
.forest-mist {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to top, 
        rgba(139, 154, 109, 0.15) 0%,
        rgba(139, 154, 109, 0.08) 40%,
        transparent 100%);
}

/* Moon/Glow in background */
.moon-glow {
    position: fixed;
    top: 5%;
    right: 20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(196, 184, 150, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    filter: blur(30px);
}

/* ========================================
   FLOATING WOLF (free on screen)
   ======================================== */
.floating-wolf-container {
    position: fixed;
    top: 30%;
    right: -150px;
    z-index: 50;
    pointer-events: none;
    transition: right 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-wolf-container.visible {
    right: 5%;
}

.floating-wolf {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-wolf-icon {
    font-size: 5rem;
    color: var(--accent-green);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(139, 154, 109, 0.4));
    animation: wolfFloat 3s ease-in-out;
}

@keyframes wolfFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    25% { transform: translateY(-8px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
    75% { transform: translateY(-10px) rotate(0deg); }
}

/* Wolf eyes glow */
.floating-wolf-eyes {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

.floating-wolf-eye {
    width: 7px;
    height: 7px;
    background: var(--accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-gold), 0 0 20px var(--accent-gold);
    animation: wolfBlink 3s infinite;
}

@keyframes wolfBlink {
    0%, 48%, 52%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.2); opacity: 0.5; }
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(10, 12, 10, 0.7) 0%, rgba(20, 24, 20, 0.8) 50%, rgba(10, 12, 10, 0.7) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--accent-green);
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: 3px;
}

.hero .subtitle {
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
    letter-spacing: 4px;
}

.hero .tagline {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.hero-description {
    color: var(--text-light);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--accent-gold);
    opacity: 0.7;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

.scroll-indicator span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-green), var(--accent-green-light));
    color: var(--primary-dark);
    border-color: var(--accent-green);
    font-weight: 600;
}

.btn-primary:hover {
    background: transparent;
    color: var(--accent-green);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 154, 109, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.btn-secondary:hover {
    background: var(--accent-gold);
    color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(196, 184, 150, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--text-light);
    border-color: var(--glass-border);
}

.btn-outline:hover {
    background: var(--glass-bg);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* ========================================
   SECTION STYLES
   ======================================== */
section {
    padding: 6rem 5%;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.section-header h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--accent-green);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
    border-radius: 2px;
}

.section-header p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 1.5rem auto 0;
    font-size: 1.05rem;
}

/* ========================================
   LEISTUNGEN / CARDS
   ======================================== */
.bg-secondary {
    background: var(--secondary-dark);
}

.bg-tertiary {
    background: var(--tertiary-dark);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    transition: all var(--transition-normal);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover {
    border-color: var(--accent-green);
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(139, 154, 109, 0.1);
}

.card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--primary-dark);
    box-shadow: 0 5px 20px rgba(139, 154, 109, 0.3);
}

.card h3 {
    color: var(--accent-green);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.card p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.card ul {
    list-style: none;
    color: var(--text-muted);
}

.card ul li {
    padding: 0.4rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.card ul li::before {
    content: '\f6d3';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-size: 0.8rem;
}

/* ========================================
   FEATURES / BERATUNG
   ======================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: var(--glass-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
}

.feature-item:hover {
    border-color: var(--accent-green);
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(139, 154, 109, 0.1);
}

.feature-item i {
    color: var(--accent-gold);
    font-size: 1.3rem;
    width: 30px;
}

.feature-item span {
    color: var(--text-light);
    font-weight: 500;
}

/* ========================================
   SHOP
   ======================================== */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.shop-item {
    background: var(--primary-dark);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    transition: all var(--transition-normal);
    position: relative;
}

.shop-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    transition: border-color var(--transition-normal);
    pointer-events: none;
}

.shop-item:hover::after {
    border-color: var(--accent-green);
}

.shop-item:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(139, 154, 109, 0.15);
}

.shop-item-img {
    height: 200px;
    background: linear-gradient(135deg, var(--tertiary-dark) 0%, var(--secondary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--accent-green);
    position: relative;
    overflow: hidden;
}

.shop-item-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 12, 10, 0.5) 100%);
}

.shop-item-info {
    padding: 1.5rem;
}

.shop-item h3 {
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.shop-item p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.price {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--accent-green);
    font-weight: 600;
}

/* ========================================
   KONTAKT
   ======================================== */
.kontakt-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.kontakt-info h3 {
    color: var(--accent-gold);
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}

.kontakt-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
    color: var(--text-muted);
}

.kontakt-item i {
    color: var(--accent-green);
    width: 24px;
    margin-top: 0.3rem;
}

.kontakt-item a {
    color: var(--text-muted);
    transition: color var(--transition-normal);
}

.kontakt-item a:hover {
    color: var(--accent-green);
}

.kontakt-form {
    background: var(--glass-bg);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.kontakt-form h3 {
    color: var(--accent-green);
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem;
    background: rgba(10, 12, 10, 0.6);
    border: 1px solid var(--glass-border);
    color: var(--text-light);
    font-family: 'Lato', sans-serif;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal);
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(139, 154, 109, 0.1);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ========================================
   TERMIN BOX
   ======================================== */
.termin-box {
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.termin-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
}

.termin-box-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: var(--primary-dark);
    box-shadow: 0 10px 30px rgba(139, 154, 109, 0.3);
}

.termin-box h3 {
    color: var(--accent-green);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.termin-box p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

/* ========================================
   ABOUT / TEAM
   ======================================== */
.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    position: relative;
    z-index: 2;
}

.about-image {
    position: relative;
}

.about-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

.about-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid var(--accent-green);
    border-radius: var(--border-radius);
    z-index: -1;
    animation: borderPulse 3s infinite ease-in-out;
}

@keyframes borderPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.about-content h2 {
    color: var(--accent-green);
    margin-bottom: 1.5rem;
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.about-content .highlight {
    color: var(--accent-gold);
    font-size: 1.2rem;
    font-style: italic;
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent-green);
}

/* ========================================
   LEISTUNGEN DETAIL PAGE
   ======================================== */
.leistung-detail {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.leistung-detail-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    padding: 2.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
}

.leistung-detail-item:hover {
    border-color: var(--accent-green);
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.leistung-detail-item .icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-dark);
    flex-shrink: 0;
    box-shadow: 0 5px 20px rgba(139, 154, 109, 0.3);
}

.leistung-detail-item h3 {
    color: var(--accent-green);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.leistung-detail-item p {
    color: var(--text-muted);
}

.leistung-detail-item ul {
    list-style: none;
    color: var(--text-muted);
    margin-top: 1rem;
}

.leistung-detail-item ul li {
    padding: 0.3rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.leistung-detail-item ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--accent-green);
}

/* ========================================
   PREIS TABLE
   ======================================== */
.preis-table {
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    border-collapse: collapse;
    position: relative;
    z-index: 2;
}

.preis-table th,
.preis-table td {
    padding: 1.2rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

.preis-table th {
    color: var(--accent-gold);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    background: var(--glass-bg);
}

.preis-table td {
    color: var(--text-muted);
}

.preis-table tr:hover td {
    background: var(--glass-bg);
    color: var(--text-light);
}

.preis-table .preis {
    color: var(--accent-green);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.1rem;
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    background: var(--primary-dark);
    padding: 4rem 5% 2rem;
    text-align: center;
    border-top: 1px solid var(--glass-border);
    position: relative;
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.footer-logo {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--accent-green);
    margin-bottom: 0.5rem;
}

.footer-tagline {
    color: var(--accent-gold);
    font-style: italic;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.social-links a {
    width: 50px;
    height: 50px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.3rem;
    transition: all var(--transition-normal);
}

.social-links a:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: var(--primary-dark);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(139, 154, 109, 0.3);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: color var(--transition-normal);
}

.footer-links a:hover {
    color: var(--accent-green);
}

.copyright {
    color: var(--text-dark);
    font-size: 0.85rem;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
}

/* Microcode Branding */
.microcode-branding {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
    color: var(--text-dark);
    font-size: 0.8rem;
}

.microcode-branding a {
    color: var(--accent-gold);
    transition: color var(--transition-normal);
}

.microcode-branding a:hover {
    color: var(--accent-green);
}

/* ========================================
   PAGE HEADER (for subpages)
   ======================================== */
.page-header {
    min-height: 50vh;
    background: linear-gradient(135deg, rgba(10, 12, 10, 0.92) 0%, rgba(20, 24, 20, 0.95) 100%),
                url('618802212_122100516489229912_252603322001036217_n.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    overflow: hidden;
}

.page-header-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--accent-green);
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.page-header-content p {
    color: var(--accent-gold);
    font-size: 1.1rem;
}

/* ========================================
   BREADCRUMBS
   ======================================== */
.breadcrumbs {
    background: var(--secondary-dark);
    padding: 1rem 5%;
    border-bottom: 1px solid var(--glass-border);
}

.breadcrumbs-inner {
    max-width: 1200px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.breadcrumbs a {
    color: var(--accent-gold);
}

.breadcrumbs a:hover {
    color: var(--accent-green);
}

.breadcrumbs span {
    margin: 0 0.5rem;
}

/* ========================================
   IMPRESSUM / DATENSCHUTZ
   ======================================== */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.legal-content h2 {
    color: var(--accent-green);
    margin: 2.5rem 0 1rem;
    font-size: 1.4rem;
}

.legal-content h3 {
    color: var(--accent-gold);
    margin: 1.5rem 0 0.5rem;
    font-size: 1.1rem;
}

.legal-content p {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.legal-content ul {
    color: var(--text-muted);
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-content li {
    margin-bottom: 0.3rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .kontakt-container,
    .about-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-image {
        order: -1;
    }

    .about-image::before {
        display: none;
    }

    .leistung-detail-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .leistung-detail-item .icon {
        margin: 0 auto;
    }

    .glow-orb {
        display: none;
    }
}

@media (max-width: 768px) {
    section {
        padding: 4rem 5%;
    }

    .hero {
        background-attachment: scroll;
        min-height: 90vh;
    }

    .termin-box {
        padding: 2.5rem 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-links {
        flex-direction: column;
        gap: 0.8rem;
    }

    .floating-paw {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .btn {
        padding: 0.9rem 1.8rem;
        font-size: 0.8rem;
    }

    .card {
        padding: 1.8rem;
    }

    .kontakt-form {
        padding: 1.8rem;
    }

    .shop-grid {
        grid-template-columns: 1fr;
    }
}



/* Paw Trail on Scroll */
.paw-trail {
    position: absolute;
    left: 5%;
    top: 100vh;
    width: 50px;
    height: 2000px;
    pointer-events: none;
    z-index: 0;
}

.paw-print {
    position: absolute;
    color: var(--accent-green);
    font-size: 1.2rem;
    opacity: 0;
    transform: scale(0) rotate(-20deg);
    transition: all 0.5s ease;
}

.paw-print.visible {
    opacity: 0.2;
    transform: scale(1) rotate(0deg);
}

/* Dog Silhouette Parallax - very subtle */
.dog-silhouette {
    position: fixed;
    right: -50px;
    top: 40%;
    font-size: 12rem;
    color: var(--accent-green);
    opacity: 0.02;
    z-index: 0;
    pointer-events: none;
    transition: transform 0.1s ease-out;
}

/* Floating Bones */
.floating-bone {
    position: fixed;
    color: var(--accent-gold);
    font-size: 1.5rem;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
    animation: floatBone 12s infinite ease-in-out;
}

.floating-bone:nth-child(1) { left: 8%; top: 40%; animation-delay: 0s; }
.floating-bone:nth-child(2) { left: 85%; top: 60%; animation-delay: 4s; }
.floating-bone:nth-child(3) { left: 15%; top: 80%; animation-delay: 8s; }

@keyframes floatBone {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
    50% { transform: translateY(-20px) rotate(20deg); opacity: 0.15; }
}

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
    z-index: 10000;
    width: 0%;
    transition: width 0.1s;
}

/* Typewriter Effect */
.typewriter {
    overflow: hidden;
    border-right: 3px solid var(--accent-green);
    white-space: nowrap;
    animation: typing 3s steps(30) 1s forwards, blink 0.75s step-end infinite;
    width: 0;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

/* Interactive Hover Cards */
.card.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.hover-lift:hover {
    transform: translateY(-15px) rotateX(5deg);
}

/* ========================================
   ANIMATIONS
   ======================================== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Animation for grids */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
}

.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Tilt Effect for Cards */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

/* ========================================
   UTILITIES
   ======================================== */
.text-center {
    text-align: center;
}

.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* Selection Color */
::selection {
    background: var(--accent-green);
    color: var(--primary-dark);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-green);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-green-light);
}