/* Common Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.navbar { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; }
.nav-links { display: flex; gap: 30px; }
.btn { padding: 10px 25px; border-radius: 50px; font-weight: 600; cursor: pointer; display: inline-block; }
.section { padding: 80px 0; }
.footer { padding: 60px 0; text-align: center; font-size: 12px; color: #888; border-top: 1px solid rgba(0,0,0,0.05); }

/* Template 1: Cozy Productivity (Peach/Coral) */
.theme-cozy { background-color: #FFF8F5; color: #4A403A; }
.theme-cozy .navbar { background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); border-bottom: 1px solid #FFE4D6; position: sticky; top: 0; z-index: 100; }
.theme-cozy .btn-primary { background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%); color: white; box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4); }
.theme-cozy .hero { text-align: center; padding: 100px 0; background: radial-gradient(circle at center, #FFF0E6 0%, #FFF8F5 70%); }
.theme-cozy .card { background: white; border-radius: 20px; padding: 30px; border: 1px solid #FFE4D6; transition: 0.3s; }
.theme-cozy .card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255, 154, 158, 0.15); }
.theme-cozy h1 { color: #2D2420; }
.theme-cozy .accent-text { color: #FF6B6B; }

/* Template 2: Creative Studio (Orange/Yellow) */
.theme-creative { background-color: #FEFCF5; color: #333; }
.theme-creative .navbar { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.02); position: sticky; top: 0; z-index: 100; }
.theme-creative .btn-primary { background: #FF9F43; color: white; border-radius: 8px; box-shadow: 0 4px 0 #E67E22; transition: 0.1s; }
.theme-creative .btn-primary:active { transform: translateY(4px); box-shadow: none; }
.theme-creative .hero { display: flex; align-items: center; padding: 80px 0; }
.theme-creative .card { background: white; border-radius: 12px; padding: 25px; border-left: 4px solid #FFD93D; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.theme-creative .card:hover { border-left-width: 8px; }
.theme-creative h1 { font-family: 'Georgia', serif; color: #2C3E50; }
.theme-creative .accent-text { color: #FF9F43; }

/* Template 3: Professional Warmth (Beige/Gold) */
.theme-pro { background-color: #FDFBF7; color: #1A1A1A; }
.theme-pro .navbar { background: #FDFBF7; border-bottom: 1px solid #E5E0D8; position: sticky; top: 0; z-index: 100; }
.theme-pro .btn-primary { background: #C5A47E; color: white; border-radius: 4px; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.theme-pro .hero { text-align: left; padding: 120px 0; background: linear-gradient(to right, #FDFBF7 50%, #F2ECE4 50%); }
.theme-pro .card { background: white; border: 1px solid #E5E0D8; padding: 40px; transition: 0.3s; }
.theme-pro .card:hover { border-color: #C5A47E; }
.theme-pro h1 { font-weight: 300; letter-spacing: -1px; }
.theme-pro .accent-text { color: #C5A47E; }

/* Template 4: Vibrant Education (Pink/Purple) */
.theme-edu { background-color: #FFF5F7; color: #4A235A; }
.theme-edu .navbar { background: rgba(255,255,255,0.9); border-radius: 0 0 30px 30px; box-shadow: 0 5px 20px rgba(236, 72, 153, 0.1); position: sticky; top: 0; z-index: 100; }
.theme-edu .btn-primary { background: linear-gradient(90deg, #EC4899, #8B5CF6); color: white; border-radius: 20px 0 20px 0; }
.theme-edu .hero { text-align: center; padding: 80px 0; background-image: radial-gradient(#E9D5FF 1px, transparent 1px); background-size: 20px 20px; }
.theme-edu .card { background: white; border-radius: 20px; padding: 30px; box-shadow: 8px 8px 0 rgba(236, 72, 153, 0.1); border: 2px solid #FCE7F3; }
.theme-edu .card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 rgba(236, 72, 153, 0.2); }
.theme-edu h1 { font-weight: 800; color: #8B5CF6; }
.theme-edu .accent-text { color: #EC4899; }