/* ========================================
   嘚儿哒——PlanB UI/UX设计系统
   版本: v3.1
   基于瓦松绿+银灰+鎏金配色方案的无障碍设计规范
   ======================================== */
:root{--primary-color:#918072;--primary-dark:#6B6359;--primary-light:#A89B8F;--secondary-color:#D4AF37;--secondary-dark:#B8962E;--secondary-light:#E6C35A;--background-color:#6e8b74;--text-color:#2C2C2C;--text-light:#5A5A5A;--border-color:#D0D0D0;--success-color:#4CAF50;--warning-color:#FF9800;--error-color:#F44336;--info-color:#2196F3;--font-family-base:'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;--font-size-base:18px;--line-height-base:1.8;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:30px;--spacing-xl:50px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-full:50%;--shadow-sm:0 2px 5px rgba(0,0,0,0.08);--shadow-md:0 4px 15px rgba(0,0,0,0.1);--shadow-lg:0 8px 25px rgba(0,0,0,0.15);--shadow-xl:0 15px 35px rgba(0,0,0,0.2);--transition-fast:0.2s ease;--transition-base:0.3s cubic-bezier(0.4,0,0.2,1);--transition-slow:0.5s ease}
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--background-color);display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 0.5s ease,visibility 0.5s ease}
.loading-overlay.hidden{opacity:0;visibility:hidden}
.loading-spinner{width:60px;height:60px;border:4px solid rgba(232,168,124,0.2);border-top:4px solid var(--primary-color);border-radius:var(--radius-full);animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--text-color);background-color:var(--background-color);background-image:url('../images/bg-orchid.jpg');background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(110,139,116,0.85);z-index:-1}
h1{font-size:36px;line-height:1.4;font-weight:700;margin-bottom:var(--spacing-md);color:var(--text-color)}
h2{font-size:30px;line-height:1.4;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-color)}
h3{font-size:24px;line-height:1.4;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-color)}
h4{font-size:20px;line-height:1.4;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-color)}
.readable-text{max-width:70ch;margin:0 auto;line-height:var(--line-height-base)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.skip-link{position:absolute;top:-40px;left:0;background:var(--primary-color);color:#fff;padding:var(--spacing-sm);z-index:100;text-decoration:none;font-weight:600;transition:top var(--transition-base)}
.skip-link:focus{top:0}
:focus{outline:3px solid var(--primary-color);outline-offset:2px}
button:focus,a:focus,input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(46,70,63,0.3)}
@media (max-width:768px){body{font-size:16px}h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}h4{font-size:18px}}
.keyboard-focus{outline:3px solid var(--primary-color);outline-offset:2px;position:relative;z-index:10}
img.fade-in{animation:fadeInImage 0.5s ease-in}
@keyframes fadeInImage{from{opacity:0}to{opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
@media (prefers-contrast:high){:root{--text-color:#000;--border-color:#000}.btn-primary{background-color:#000;color:#fff}.btn-secondary{border-color:#000;color:#000}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}.loading-spinner{animation:none}}
@media (prefers-color-scheme:dark){:root{--background-color:#1a1a1a;--text-color:#fff;--text-light:#ccc;--border-color:#333}body{background-color:var(--background-color);color:var(--text-color)}.site-header{background-color:#2a2a2a}.feature-card,.goal-card,.event-card,.buddy-card{background-color:#2a2a2a;border-color:#333}.btn-secondary{background-color:#2a2a2a;color:var(--primary-color)}}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.row{display:flex;flex-wrap:wrap;margin:0 -15px}
.row > *{padding:0 15px}
.half{flex:0 0 50%;max-width:50%}
.third{flex:0 0 33.3333%;max-width:33.3333%}
.quarter{flex:0 0 25%;max-width:25%}
.two-third{flex:0 0 66.6667%;max-width:66.6667%}
.three-quarter{flex:0 0 75%;max-width:75%}
.full{flex:0 0 100%;max-width:100%}
.btn{display:inline-block;padding:14px 30px;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:600;text-align:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;min-height:48px;min-width:120px}
.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background-color:rgba(255,255,255,0.3);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}
.btn:hover::before{width:300px;height:300px}
.btn span{position:relative;z-index:1}
.btn-primary{background-color:var(--primary-color);color:#FFF}
.btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgba(46,70,63,0.4)}
.btn-secondary{background-color:#fff;color:var(--secondary-color);border:2px solid var(--secondary-color)}
.btn-secondary:hover{background-color:var(--secondary-color);color:#FFF;transform:translateY(-2px);box-shadow:0 4px 12px rgba(212,175,55,0.4)}
.btn-success{background-color:var(--success-color);color:#fff}
.btn-success:hover{background-color:#45a049;transform:translateY(-2px);box-shadow:0 4px 12px rgba(76,175,80,0.3)}
.btn-warning{background-color:var(--warning-color);color:#fff}
.btn-warning:hover{background-color:#f57c00;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,152,0,0.3)}
.btn-error{background-color:var(--error-color);color:#fff}
.btn-error:hover{background-color:#d32f2f;transform:translateY(-2px);box-shadow:0 4px 12px rgba(244,67,54,0.3)}
.btn:disabled,.btn.disabled{opacity:0.6;cursor:not-allowed;pointer-events:none}
.btn-sm{padding:10px 20px;font-size:14px;min-height:40px}
.btn-lg{padding:18px 40px;font-size:16px;min-height:56px}
.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(232,168,124,0.3)}
.btn:active{transform:scale(0.97);transition:transform 0.1s ease}
.site-header{background-color:#fff;box-shadow:var(--shadow-sm);position:fixed;width:100%;top:0;z-index:1000;transition:all var(--transition-base)}
.site-header.scrolled{box-shadow:var(--shadow-md);background-color:rgba(255,255,255,0.98)}
.header-content{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;transition:padding var(--transition-base)}
.site-header.scrolled .header-content{padding:15px 0}
.logo{display:flex;flex-direction:column;align-items:flex-start;transition:transform var(--transition-base)}
.logo:hover{transform:scale(1.05)}
.logo h1{font-size:28px;font-weight:700;color:var(--primary-color);margin:0;letter-spacing:-0.5px}
.logo p{font-size:14px;color:var(--text-light);margin:0;font-weight:500;letter-spacing:0.5px}
.desktop-nav{display:block}
.nav-list{display:flex;list-style:none;gap:40px;margin:0;padding:0}
.nav-item a{text-decoration:none;color:var(--text-color);font-weight:500;font-size:15px;position:relative;transition:color var(--transition-base);padding:5px 0}
.nav-item a::after{content:'';position:absolute;width:0;height:2px;bottom:0;left:0;background-color:var(--secondary-color);transition:width var(--transition-base)}
.nav-item a:hover{color:var(--secondary-color)}
.nav-item a:hover::after{width:100%}
.nav-item.active a{color:var(--secondary-color)}
.nav-item.active a::after{width:100%}
.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:15px;z-index:1001;transition:all 0.3s ease}
.mobile-menu-btn:hover{transform:scale(1.1)}
.menu-icon{display:block;width:28px;height:3px;background-color:#3a3a3a;margin:6px 0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:1px;position:relative}
.mobile-nav{display:flex;flex-direction:column;background-color:#fff;border-top:1px solid #f0f0f0;padding:20px 0;box-shadow:0 10px 30px rgba(0,0,0,0.15);position:absolute;width:100%;left:0;top:100%;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;max-height:0;overflow:hidden}
.mobile-nav.show{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;max-height:500px}
.mobile-nav-list{list-style:none}
.mobile-nav-item a{display:block;padding:15px 0;text-decoration:none;color:#333;font-weight:500;transition:all 0.3s ease;position:relative;overflow:hidden}
.mobile-nav-item a::before{content:'';position:absolute;left:0;top:0;height:100%;width:4px;background-color:var(--secondary-color);transform:scaleY(0);transition:transform 0.3s ease}
.mobile-nav-item a:hover{color:var(--secondary-color);padding-left:10px}
.mobile-nav-item a:hover::before{transform:scaleY(1)}
#main-content{margin-top:80px}
.banner-section{background:linear-gradient(135deg,#fff8f2 0%,var(--background-color) 100%);color:var(--text-color);padding:140px 0 100px;text-align:center;position:relative;overflow:hidden;animation:fadeIn 1s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.banner-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.1;z-index:0;animation:parallax 20s ease-in-out infinite}
.banner-section.lazy-loaded::before{background-image:url('../images/bg-orchid.jpg')}
@keyframes parallax{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.05) translateY(-10px)}}
.banner-content{max-width:850px;margin:0 auto;position:relative;z-index:1;animation:slideUp 1s ease-out 0.3s both}
@keyframes slideUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
.banner-title{font-size:56px;font-weight:700;margin-bottom:var(--spacing-md);line-height:1.1;letter-spacing:-1px;color:var(--text-color);animation:scaleIn 0.8s ease-out 0.6s both}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
.banner-subtitle{font-size:24px;margin-bottom:var(--spacing-xl);opacity:0.95;font-weight:400;line-height:1.6;color:var(--text-light);animation:fadeIn 0.8s ease-out 0.9s both}
.banner-actions{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;animation:fadeIn 1s ease-out 1.2s both}
.banner-actions .btn{min-width:180px;font-size:16px;padding:16px 35px}
.features-section{padding:var(--spacing-xl) 0;background-color:#fff;position:relative}
.section-title{text-align:center;font-size:42px;font-weight:700;color:var(--text-color);margin-bottom:var(--spacing-sm);letter-spacing:-0.5px;position:relative;display:inline-block;left:50%;transform:translateX(-50%)}
.section-title::after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(90deg,var(--primary-color) 0%,var(--secondary-color) 100%);border-radius:2px}
.section-subtitle{text-align:center;font-size:18px;color:var(--text-light);margin-bottom:80px;max-width:700px;margin-left:auto;margin-right:auto}
.features-grid{margin:0 -15px;display:flex;flex-wrap:wrap}
.feature-card{background-color:#fff;padding:var(--spacing-xl) 35px;border-radius:var(--radius-md);text-align:center;transition:all var(--transition-base);box-shadow:var(--shadow-md);height:100%;border:1px solid var(--border-color);position:relative;overflow:hidden;opacity:0;transform:translateY(30px)}
.feature-card:nth-child(1){animation:fadeInUp 0.6s ease-out 0.1s both}
.feature-card:nth-child(2){animation:fadeInUp 0.6s ease-out 0.2s both}
.feature-card:nth-child(3){animation:fadeInUp 0.6s ease-out 0.3s both}
.feature-card:nth-child(4){animation:fadeInUp 0.6s ease-out 0.4s both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.feature-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary-color) 0%,var(--secondary-color) 100%);transform:scaleX(0);transition:transform var(--transition-base)}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}
.feature-card:hover::before{transform:scaleX(1)}
.feature-icon{font-size:56px;margin-bottom:var(--spacing-md);display:block;transition:transform var(--transition-base),color var(--transition-base)}
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(5deg);color:var(--secondary-color)}
.feature-title{font-size:26px;font-weight:700;color:var(--text-color);margin-bottom:var(--spacing-md);line-height:1.3;transition:color var(--transition-base)}
.feature-card:hover .feature-title{color:var(--secondary-color)}
.feature-description{color:var(--text-light);font-size:16px;line-height:1.7;transition:color var(--transition-base)}
.feature-card:hover .feature-description{color:var(--text-color)}
.animate-on-scroll{opacity:0;transform:translateY(50px);transition:opacity 0.8s ease,transform 0.8s ease}
.animate-on-scroll.animate{opacity:1;transform:translateY(0)}
.stage-selector-section{padding:100px 0;background:linear-gradient(135deg,#fff8f2 0%,#fff 100%);position:relative;overflow:hidden}
.stage-selector-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.05;z-index:0;animation:subtleParallax 30s ease-in-out infinite}
.stage-selector-section.lazy-loaded::before{background-image:url('../images/bg-orchid.jpg')}
@keyframes subtleParallax{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-5px)}}
.stage-selector-section::after{content:'';position:absolute;top:50%;left:50%;width:800px;height:800px;background:radial-gradient(circle,rgba(212,175,55,0.05) 0%,rgba(212,175,55,0) 70%);transform:translate(-50%,-50%);z-index:0;border-radius:50%}
.stage-selector-grid{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:70px;position:relative;z-index:1}
.stage-card{background-color:#fff;padding:50px 40px;border-radius:20px;text-align:center;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);box-shadow:0 8px 25px rgba(0,0,0,0.08);border:2px solid transparent;cursor:pointer;min-width:280px;max-width:320px;flex:1;position:relative;overflow:hidden;outline:none;user-select:none}
.stage-card:focus{outline:none;box-shadow:0 0 0 3px rgba(212,175,55,0.5),0 20px 45px rgba(212,175,55,0.25)}
.stage-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(212,175,55,0.1) 0%,rgba(212,175,55,0) 70%);opacity:0;transition:opacity 0.5s ease}
.stage-card:hover::before{opacity:1}
.stage-card:hover{transform:translateY(-15px) scale(1.03);box-shadow:0 20px 45px rgba(212,175,55,0.25);border-color:var(--secondary-color);animation:subtlePulse 2s ease-in-out infinite}
@keyframes subtlePulse{0%,100%{box-shadow:0 20px 45px rgba(212,175,55,0.25)}50%{box-shadow:0 20px 55px rgba(212,175,55,0.35)}}
.stage-card.selected{background:linear-gradient(135deg,#FFFBF0 0%,#FFF8E6 100%);border-color:var(--secondary-color);box-shadow:0 15px 40px rgba(212,175,55,0.3),0 0 20px rgba(212,175,55,0.15);transform:translateY(-10px) scale(1.02);position:relative}
.stage-card.selected .stage-icon::after{content:'✓';position:absolute;top:-10px;right:-10px;width:40px;height:40px;background:linear-gradient(135deg,var(--secondary-color) 0%,var(--secondary-light) 100%);color:#FFF;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold;box-shadow:0 4px 12px rgba(212,175,55,0.3);animation:checkmarkPop 0.3s ease-out;z-index:3}
@keyframes checkmarkPop{0%{transform:scale(0) rotate(0deg)}50%{transform:scale(1.2) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}
.stage-card.selected::after{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--secondary-color) 0%,var(--secondary-light) 100%);animation:slideIn 0.5s ease-out}
.ripple{position:absolute;border-radius:50%;background-color:rgba(212,175,55,0.3);transform:scale(0);animation:ripple-animation 0.6s ease-out;pointer-events:none;z-index:2}
@keyframes ripple-animation{to{transform:scale(4);opacity:0}}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.stage-icon{font-size:72px;margin-bottom:30px;display:block;transition:all 0.6s cubic-bezier(0.4,0,0.2,1);position:relative;z-index:1;opacity:0;transform:translateY(-20px) scale(0.8)}
.stage-card.animate .stage-icon{opacity:1;transform:translateY(0) scale(1);transition-delay:0.1s}
.stage-card:hover .stage-icon{transform:scale(1.2) rotate(10deg);filter:drop-shadow(0 10px 15px rgba(255,140,0,0.3))}
.stage-card.selected .stage-icon{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 8px 12px rgba(255,140,0,0.25))}
.stage-title{font-size:26px;font-weight:700;color:#3a3a3a;margin-bottom:20px;line-height:1.3;transition:color 0.3s ease,transform 0.6s cubic-bezier(0.4,0,0.2,1);position:relative;z-index:1;opacity:0;transform:translateY(-15px)}
.stage-card.animate .stage-title{opacity:1;transform:translateY(0);transition-delay:0.2s}
.stage-card:hover .stage-title,.stage-card.selected .stage-title{color:#ff8c00}
.stage-description{color:#666;font-size:16px;margin-bottom:25px;line-height:1.6;transition:color 0.3s ease,transform 0.6s cubic-bezier(0.4,0,0.2,1);position:relative;z-index:1;opacity:0;transform:translateY(-10px)}
.stage-card.animate .stage-description{opacity:1;transform:translateY(0);transition-delay:0.3s}
.stage-card:hover .stage-description{color:#333}
.stage-tag{display:inline-block;padding:8px 22px;background:linear-gradient(135deg,var(--secondary-color) 0%,var(--secondary-light) 100%);color:#FFF;font-size:14px;font-weight:600;border-radius:25px;transition:all 0.3s ease,transform 0.6s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 12px rgba(212,175,55,0.3);position:relative;z-index:1;opacity:0;transform:translateY(10px) scale(0.9)}
.stage-card.animate .stage-tag{opacity:1;transform:translateY(0) scale(1);transition-delay:0.4s}
.stage-card:hover .stage-tag{transform:translateY(-2px);box-shadow:0 6px 18px rgba(212,175,55,0.4)}
@media (max-width:768px){.stage-selector-grid{flex-direction:column;align-items:center;gap:30px;margin-top:50px}.stage-card{width:100%;max-width:350px;padding:40px 30px;border-radius:15px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center}.stage-icon{font-size:60px;margin-bottom:25px}.stage-title{font-size:22px;margin-bottom:15px}.stage-description{font-size:15px;margin-bottom:20px;text-align:center}.stage-tag{padding:6px 18px;font-size:13px}.stage-card:active{transform:scale(0.98);transition:transform 0.1s ease}.stage-card.selected .stage-icon::after{width:35px;height:35px;font-size:20px;top:-5px;right:-5px}@keyframes ripple-animation{to{transform:scale(3);opacity:0}}}
.goals-section{padding:100px 0;background-color:#fff;position:relative}
.goals-filter{display:flex;justify-content:center;gap:15px;margin:40px 0;flex-wrap:wrap}
.filter-btn{background-color:#f5f5f5;border:none;padding:12px 25px;border-radius:25px;font-size:15px;font-weight:600;color:#666;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 5px rgba(0,0,0,0.08)}
.filter-btn:hover{background-color:#ff8c00;color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px rgba(255,140,0,0.2)}
.filter-btn.active{background-color:#ff8c00;color:#fff;box-shadow:0 4px 12px rgba(255,140,0,0.2)}
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;margin-top:40px}
.goal-card{background-color:#fff;padding:35px 30px;border-radius:12px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 15px rgba(0,0,0,0.08);border:2px solid transparent;position:relative;overflow:hidden}
.goal-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background-color:var(--secondary-color);transform:scaleX(0);transition:transform 0.3s ease}
.goal-card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,0.15)}
.goal-card:hover::before{transform:scaleX(1)}
.goal-icon{font-size:48px;margin-bottom:20px;display:block;transition:transform 0.3s ease}
.goal-card:hover .goal-icon{transform:scale(1.1) rotate(5deg)}
.goal-title{font-size:22px;font-weight:700;color:#3a3a3a;margin-bottom:15px;line-height:1.4}
.goal-description{color:#666;font-size:16px;margin-bottom:25px;line-height:1.7}
.goal-tag{display:inline-block;padding:6px 16px;background-color:#ff8c00;color:#fff;font-size:13px;font-weight:600;border-radius:20px;margin-bottom:15px}
.goal-duration{color:#999;font-size:14px;font-style:italic}
@media (max-width:768px){.goals-grid{grid-template-columns:1fr}.goals-filter{flex-direction:column;align-items:center}.filter-btn{width:100%;max-width:200px}}
.events-section{padding:100px 0;background-color:#f8f9fa;position:relative}
.events-filter{display:flex;justify-content:center;gap:15px;margin:40px 0;flex-wrap:wrap}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;margin-top:40px}
.event-card{background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.1);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);border:2px solid transparent}
.event-card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,0.15);border-color:var(--secondary-color)}
.event-image{height:220px;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);position:relative;overflow:hidden;transition:transform 0.3s ease}
.event-card:hover .event-image{transform:scale(1.05)}
.event-image::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.2;transition:opacity 0.3s ease}
.event-card.lazy-loaded .event-image::before{background-image:url('../images/bg-orchid.jpg')}
.event-card:hover .event-image::before{opacity:0.3}
.event-content{padding:30px}
.event-stage-tag{display:inline-block;padding:6px 16px;background-color:#ff8c00;color:#fff;font-size:13px;font-weight:600;border-radius:20px;margin-bottom:15px}
.event-title{font-size:24px;font-weight:700;color:#3a3a3a;margin-bottom:15px;line-height:1.4}
.event-description{color:#666;font-size:16px;margin-bottom:20px;line-height:1.7}
.event-info{display:flex;flex-direction:column;gap:10px;margin-bottom:15px;padding:15px;background-color:#f5f5f5;border-radius:8px}
.event-time,.event-location{color:#3a3a3a;font-size:14px;font-weight:500}
.event-suggestion{color:#999;font-size:13px;font-style:italic;margin-bottom:25px;padding-left:15px;border-left:3px solid var(--secondary-color)}
.event-join-btn{width:100%;font-size:15px;padding:14px}
@media (max-width:768px){.events-grid{grid-template-columns:1fr}.events-filter{flex-direction:column;align-items:center}}
.buddies-section{padding:100px 0;background-color:#fff;position:relative}
.buddies-settings{display:flex;justify-content:center;align-items:center;gap:25px;margin:40px 0;flex-wrap:wrap}
.setting-group{display:flex;flex-direction:column;gap:8px;min-width:150px}
.setting-label{font-weight:600;color:#3a3a3a;font-size:14px}
.setting-select{padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;color:#3a3a3a;background-color:#fff;cursor:pointer;transition:all 0.3s ease}
.setting-select:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 4px rgba(212,175,55,0.1)}
.match-refresh-btn{padding:14px 28px;font-size:16px}
.buddies-results{display:flex;flex-direction:column;gap:25px;margin-top:50px}
.buddy-card{background-color:#fff;padding:30px;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.08);border:2px solid transparent;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;gap:25px}
.buddy-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.15);border-color:#ff8c00}
.buddy-avatar{font-size:64px;flex-shrink:0;border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center;background-color:#fff8f2;transition:transform 0.3s ease}
.buddy-card:hover .buddy-avatar{transform:scale(1.1) rotate(5deg)}
.buddy-info{flex:1;min-width:0}
.buddy-name{font-size:22px;font-weight:700;color:#3a3a3a;margin-bottom:8px}
.buddy-stage{display:inline-block;padding:4px 12px;background-color:#ff8c00;color:#fff;font-size:12px;font-weight:600;border-radius:15px;margin-bottom:12px}
.buddy-description{color:#666;font-size:16px;margin-bottom:12px;line-height:1.6}
.buddy-match-reason{color:#999;font-size:14px;font-style:italic}
.buddy-actions{flex-shrink:0}
.buddy-connect-btn{padding:12px 25px;font-size:15px}
.loading-spinner-small{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:#fff;animation:spin 1s linear infinite;margin-right:8px;vertical-align:middle}
@media (max-width:768px){.buddies-settings{flex-direction:column;align-items:stretch}.setting-group{width:100%;max-width:300px;margin:0 auto}.buddy-card{flex-direction:column;text-align:center;padding:25px}.buddy-info{width:100%}}
.profile-section{padding:100px 0;background-color:#FFFBF0;position:relative}
.profile-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.03;z-index:0}
.profile-section.lazy-loaded::before{background-image:url('../images/bg-orchid.jpg')}
.stage-selection-guide{text-align:center;margin-bottom:80px;position:relative;z-index:1}
.guide-title{font-size:24px;font-weight:700;color:#3a3a3a;margin-bottom:15px;line-height:1.3}
.guide-description{color:#666;font-size:16px;margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto}
.stage-selection-options{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;margin-bottom:60px}
.stage-select-btn{background-color:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:25px 35px;cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;align-items:center;gap:12px;min-width:200px;box-shadow:0 4px 15px rgba(0,0,0,0.08);position:relative;overflow:hidden}
.stage-select-btn:hover{transform:translateY(-8px) scale(1.02);border-color:#ff8c00;box-shadow:0 15px 35px rgba(255,140,0,0.2)}
.stage-select-btn.active{background-color:#fff8ef;border-color:#ff8c00;box-shadow:0 10px 30px rgba(255,140,0,0.2)}
.stage-select-btn::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background-color:#ff8c00;transform:scaleX(0);transition:transform 0.3s ease}
.stage-select-btn:hover::before,.stage-select-btn.active::before{transform:scaleX(1)}
.stage-select-btn .stage-icon{font-size:48px;transition:transform 0.3s ease}
.stage-select-btn:hover .stage-icon{transform:scale(1.1) rotate(5deg)}
.stage-select-btn .stage-name{font-size:20px;font-weight:700;color:#3a3a3a}
.stage-select-btn .stage-age{font-size:14px;color:#666;font-weight:500}
.planning-templates{margin-bottom:80px;position:relative;z-index:1}
.planning-templates .template{display:none;background-color:#fff;border-radius:16px;padding:45px;box-shadow:0 8px 25px rgba(0,0,0,0.1);border:2px solid transparent;transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}
.planning-templates .template.active{display:block;border-color:var(--secondary-color)}
.template-title{font-size:28px;font-weight:700;color:#3a3a3a;margin-bottom:15px;line-height:1.3;text-align:center}
.template-description{color:#666;font-size:16px;margin-bottom:40px;text-align:center}
.template-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.planning-category{background-color:#FFFBF0;border-radius:12px;padding:30px;border:1px solid #FFE8B8;transition:all 0.3s ease}
.planning-category:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(255,140,0,0.1)}
.planning-category .category-title{font-size:20px;font-weight:700;color:#ff8c00;margin-bottom:20px;line-height:1.3}
.planning-items{list-style:none;padding:0;margin:0}
.planning-items li{color:#3a3a3a;font-size:16px;margin-bottom:15px;padding-left:25px;position:relative;line-height:1.6}
.planning-items li::before{content:'✓';position:absolute;left:0;top:0;color:var(--secondary-color);font-weight:700;font-size:18px}
.content-recommendations{position:relative;z-index:1}
.recommendations-title{font-size:24px;font-weight:700;color:#3a3a3a;margin-bottom:35px;text-align:center}
.recommendation-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.recommendation-card{display:none;background-color:#fff;border-radius:12px;padding:30px;box-shadow:0 6px 20px rgba(0,0,0,0.1);border:1px solid #f0f0f0;transition:all 0.3s ease;position:relative;overflow:hidden}
.recommendation-card.active{display:block;animation:fadeInUp 0.5s ease-out}
.recommendation-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.15);border-color:var(--secondary-color)}
.recommendation-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--secondary-color);transform:scaleY(0);transition:transform 0.3s ease}
.recommendation-card:hover::before{transform:scaleY(1)}
.recommendation-card .card-title{font-size:20px;font-weight:700;color:#3a3a3a;margin-bottom:12px;line-height:1.4}
.recommendation-card .card-description{color:#666;font-size:15px;line-height:1.7}
@media (max-width:768px){.profile-section{padding:60px 0}.stage-selection-options{flex-direction:column;align-items:center}.stage-select-btn{width:100%;max-width:300px}.template-content{grid-template-columns:1fr}.planning-templates .template{padding:25px}.template-title{font-size:24px}.recommendation-cards{grid-template-columns:1fr}}
.cases-section{padding:100px 0;background-color:#f8f9fa;position:relative}
.cases-grid{margin:0 -15px}
.case-card{background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.1);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);height:100%;display:flex;flex-direction:column;position:relative;opacity:0;transform:translateY(30px)}
.case-card:nth-child(1){animation:fadeInUp 0.6s ease-out 0.1s both}
.case-card:nth-child(2){animation:fadeInUp 0.6s ease-out 0.2s both}
.case-card:nth-child(3){animation:fadeInUp 0.6s ease-out 0.3s both}
.case-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,0.15)}
.case-image{height:220px;background-color:#eee;background-image:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);position:relative;overflow:hidden;transition:transform 0.3s ease}
.case-card:hover .case-image{transform:scale(1.05)}
.case-image::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.2;transition:opacity 0.3s ease}
.case-card:hover .case-image::before{opacity:0.3}
.case-card.lazy-loaded .case-image::before{background-image:url('../images/bg-orchid.jpg')}
.case-content{padding:30px;flex:1;display:flex;flex-direction:column}
.case-title{font-size:22px;font-weight:700;color:#3a3a3a;margin-bottom:18px;line-height:1.4;transition:color 0.3s ease}
.case-card:hover .case-title{color:#ff8c00}
.case-description{color:#666;font-size:16px;line-height:1.7;margin-top:auto;transition:color 0.3s ease}
.case-card:hover .case-description{color:#333}
.contact-section{padding:60px 0;background:linear-gradient(135deg,#6e8b74 0%,#8FA894 100%)}
.contact-content{align-items:start;gap:20px}
.contact-info{background-color:rgba(255,255,255,0.95);padding:30px;border-radius:12px;height:100%;box-shadow:0 6px 20px rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.3);transition:all 0.3s ease}
.contact-info:hover{box-shadow:0 15px 35px rgba(212,175,55,0.2);transform:translateY(-5px);border-color:rgba(212,175,55,0.5)}
.contact-info__title{font-size:24px;font-weight:700;color:#918072;margin-bottom:25px;line-height:1.3}
.contact-list{list-style:none}
.contact-list li{margin-bottom:18px;font-size:15px;display:flex;align-items:center;gap:12px;transition:transform 0.3s ease}
.contact-list li:hover{transform:translateX(5px)}
.contact-list li::before{content:'';width:6px;height:6px;border-radius:50%;background-color:#ff8c00;flex-shrink:0;transition:transform 0.3s ease}
.contact-list li:hover::before{transform:scale(1.5)}
.contact-list a{color:var(--secondary-color);text-decoration:none;transition:color 0.3s ease,transform 0.3s ease;position:relative}
.contact-list a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--secondary-color);transition:width 0.3s ease}
.contact-list a:hover{color:var(--secondary-dark);transform:translateX(3px)}
.contact-list a:hover::after{width:100%}
.form-group{margin-bottom:var(--spacing-md)}
.form-label{display:block;margin-bottom:var(--spacing-xs);font-weight:600;color:var(--text-color);font-size:14px;transition:color var(--transition-base)}
.form-control{width:100%;padding:14px;border:2px solid var(--border-color);border-radius:var(--radius-sm);font-size:15px;transition:all var(--transition-base);background-color:#fafafa;position:relative;min-height:48px}
.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(232,168,124,0.1);background-color:#fff;transform:translateY(-2px)}
.form-control:focus + .form-label{color:var(--primary-color)}
.form-control:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:0.6}
.form-control.error{border-color:var(--error-color)}
.form-control.error:focus{box-shadow:0 0 0 4px rgba(244,67,54,0.1)}
textarea.form-control{resize:vertical;min-height:120px}
.form-message{margin-top:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);text-align:center;font-weight:600;transition:all var(--transition-base);animation:fadeIn 0.5s ease}
.form-message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}
.form-message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.form-message.warning{background-color:#fff3cd;color:#856404;border:1px solid #ffeaa7}
.form-message.info{background-color:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}
.form-help{display:block;margin-top:var(--spacing-xs);font-size:13px;color:var(--text-light);line-height:1.5}
.form-label.required::after{content:' *';color:var(--error-color)}
.form-check{display:flex;align-items:center;margin-bottom:var(--spacing-sm);cursor:pointer}
.form-check-input{width:20px;height:20px;margin-right:var(--spacing-sm);cursor:pointer;accent-color:var(--primary-color)}
.form-check-label{font-size:15px;color:var(--text-color);cursor:pointer;user-select:none}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232C2C2C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}
.form-file{position:relative;display:inline-block;width:100%}
.form-file-input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}
.form-file-label{display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);border:2px dashed var(--border-color);border-radius:var(--radius-md);background-color:#fafafa;color:var(--text-light);transition:all var(--transition-base);cursor:pointer;text-align:center}
.form-file-label:hover{border-color:var(--primary-color);background-color:#fff8f2;color:var(--primary-color)}
.form-file-input:focus + .form-file-label{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(232,168,124,0.1)}
.site-footer{background-color:#333;color:#fff;padding:60px 0 30px;position:relative;overflow:hidden}
.site-footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#ff8c00 0%,#ffad33 100%)}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px}
.footer-left p,.footer-center p{margin-bottom:10px;opacity:0.9;transition:opacity 0.3s ease}
.footer-left p:hover,.footer-center p:hover{opacity:1}
.footer-center p strong{opacity:1}
.social-icons{display:flex;gap:20px}
.social-icon{display:inline-block;width:40px;height:40px;background-color:rgba(255,255,255,0.1);border-radius:50%;text-align:center;line-height:40px;font-size:20px;transition:all 0.3s ease;position:relative;overflow:hidden}
.social-icon::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background-color:rgba(255,255,255,0.2);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}
.social-icon:hover::before{width:100px;height:100px}
.social-icon:hover{background-color:var(--secondary-color);transform:translateY(-3px);box-shadow:0 5px 15px rgba(212,175,55,0.3)}
@media (max-width:1024px){.banner-title{font-size:40px}.banner-subtitle{font-size:20px}.section-title{font-size:32px}.two-third{flex:0 0 100%;max-width:100%}.third{flex:0 0 50%;max-width:50%}}
@media (max-width:768px){.desktop-nav{display:none}.mobile-menu-btn{display:block}.banner-title{font-size:32px}.banner-subtitle{font-size:18px}.section-title{font-size:28px}.banner-section{padding:100px 0 60px}.features-section,.cases-section,.contact-section{padding:60px 0}.feature-card,.contact-info,.contact-form{padding:30px 20px}.half,.third,.quarter,.three-quarter{flex:0 0 100%;max-width:100%}.banner-actions{flex-direction:column;align-items:center}.banner-actions .btn{width:100%;max-width:240px}}
@media (max-width:480px){.banner-title{font-size:28px}.banner-subtitle{font-size:16px}.btn{padding:14px 24px;font-size:16px;min-height:48px;min-width:120px}.btn:active{transform:scale(0.97);transition:transform 0.1s ease}.setting-select{min-height:48px;padding:12px 16px}.stage-select-btn{min-height:56px;padding:16px 24px}.container{padding:0 15px}.form-control{min-height:48px;padding:12px 16px;font-size:16px}textarea.form-control{min-height:120px}.event-card{transition:transform 0.2s ease}.event-card:active{transform:scale(0.98)}.buddy-card{transition:transform 0.2s ease}.buddy-card:active{transform:scale(0.98)}.goal-card{transition:transform 0.2s ease}.goal-card:active{transform:scale(0.98)}.banner-actions .btn{max-width:100%}}