html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;margin:0;padding:0;color:#1f2937;line-height:1.6;background:#fff}
*{box-sizing:border-box}

/* ========== Animations ========== */
@keyframes orFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.or-float{animation:orFloat 5s ease-in-out infinite}
.card-or{transition:all 0.35s cubic-bezier(.4,0,.2,1)}
.card-or:hover{transform:translateY(-8px);box-shadow:0 20px 50px -12px rgba(249,115,22,0.3);border-color:#f97316}
.faq-answer{animation:orSlide 0.3s ease-out}
@keyframes orSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes orPulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.35)}50%{box-shadow:0 0 0 16px rgba(249,115,22,0)}}
.pulse-or{animation:orPulse 2.5s ease-out infinite}

/* ========== Container ========== */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:12px;color:#1f2937}
.section-subtitle{font-size:1.05rem;text-align:center;color:#6b7280;margin-bottom:48px;max-width:640px;margin-left:auto;margin-right:auto}

/* ========== Navbar ========== */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);transition:box-shadow 0.3s}
#navbar.shadow-md{box-shadow:0 4px 20px rgba(0,0,0,0.08)}
#navbar .container{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-brand{font-size:1.25rem;font-weight:700;color:#f97316;text-decoration:none;display:flex;align-items:center;gap:8px}
.nav-brand i{font-size:1.4rem}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;color:#4b5563;font-weight:500;font-size:0.95rem;transition:color 0.2s;padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:#f97316;border-bottom-color:#f97316}
.nav-cta{background:#f97316;color:#fff!important;padding:8px 20px!important;border-radius:24px;border-bottom:none!important;transition:background 0.2s}
.nav-cta:hover{background:#ea580c!important}
#menuBtn{display:none;background:none;border:none;font-size:1.5rem;color:#4b5563;cursor:pointer;padding:4px}

/* ========== Mobile Menu ========== */
#mobileMenu{display:none;position:fixed;top:68px;left:0;right:0;background:#fff;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,0.1);padding:20px 0}
#mobileMenu a{display:block;padding:14px 24px;text-decoration:none;color:#4b5563;font-weight:500;font-size:0.95rem;border-left:3px solid transparent;transition:all 0.2s}
#mobileMenu a:hover,#mobileMenu a.active{color:#f97316;background:#fff7ed;border-left-color:#f97316}

/* ========== Hero ========== */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#f97316 0%,#ea580c 40%,#f97316 70%,#f59e0b 100%)}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero-content{position:relative;z-index:1;color:#fff;max-width:680px;padding:0 24px}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.18);color:#fff;padding:8px 20px;border-radius:24px;font-size:0.9rem;font-weight:500;margin-bottom:24px;border:1px solid rgba(255,255,255,0.25)}
.hero-badge i{margin-right:6px}
.hero h1{font-size:3rem;font-weight:800;margin:0 0 20px;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,0.15)}
.hero p{font-size:1.15rem;opacity:0.92;margin:0 0 36px;line-height:1.7}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 32px;border-radius:28px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all 0.3s;border:none}
.btn-white{background:#fff;color:#f97316}
.btn-white:hover{background:#fed7aa;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.7)}
.btn-outline:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px)}
.btn-orange{background:#f97316;color:#fff}
.btn-orange:hover{background:#ea580c;transform:translateY(-2px);box-shadow:0 8px 24px rgba(249,115,22,0.35)}
.hero-image{width:120px;height:120px;margin:0 auto 28px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,0.5);box-shadow:0 8px 32px rgba(0,0,0,0.15)}
.hero-image img{width:100%;height:100%;object-fit:cover}
.floating-orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;background:rgba(255,255,255,0.08)}
.orb-1{width:180px;height:180px;top:10%;left:8%}
.orb-2{width:120px;height:120px;bottom:15%;right:10%}
.orb-3{width:80px;height:80px;top:40%;right:22%}
.orb-4{width:60px;height:60px;bottom:30%;left:15%}

/* ========== Features Section ========== */
.features-section{background:#fff}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:32px 24px;text-align:center}
.feature-card .feature-icon{width:64px;height:64px;margin:0 auto 20px;background:linear-gradient(135deg,#f97316,#ea580c);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff}
.feature-card h3{font-size:1.15rem;font-weight:700;margin:0 0 10px;color:#1f2937}
.feature-card p{font-size:0.93rem;color:#6b7280;margin:0;line-height:1.65}

/* ========== 3-Step Section ========== */
.join-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.step-card{text-align:center;padding:40px 24px;border-radius:20px;background:#fff;border:1px solid #e5e7eb;position:relative}
.step-number{width:56px;height:56px;margin:0 auto 20px;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800}
.step-card h3{font-size:1.15rem;font-weight:700;margin:0 0 8px;color:#1f2937}
.step-card p{font-size:0.93rem;color:#6b7280;margin:0}
.step-card i{font-size:1.8rem;color:#f97316;margin-bottom:16px;display:block}

/* ========== Stats ========== */
.stats-section{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;padding:64px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stat-item .stat-number{font-size:2.6rem;font-weight:800;margin-bottom:4px}
.stat-item .stat-label{font-size:0.95rem;opacity:0.85}

/* ========== Testimonials ========== */
.testimonials-section{background:#f9fafb}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.testimonial-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:28px}
.testimonial-card .stars{color:#f59e0b;font-size:0.9rem;margin-bottom:12px}
.testimonial-card .text{font-size:0.95rem;color:#4b5563;margin:0 0 20px;line-height:1.7;font-style:italic}
.testimonial-card .author{display:flex;align-items:center;gap:12px}
.testimonial-card .avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#fed7aa}
.testimonial-card .avatar img{width:100%;height:100%}
.testimonial-card .name{font-weight:700;font-size:0.9rem;color:#1f2937}
.testimonial-card .role{font-size:0.8rem;color:#9ca3af}

/* ========== FAQ ========== */
.faq-section{background:#fff}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-toggle{width:100%;background:none;border:none;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:1rem;font-weight:600;color:#1f2937;text-align:left}
.faq-toggle:hover{color:#f97316}
.faq-icon{font-size:0.85rem;transition:transform 0.3s;color:#9ca3af}
.faq-answer{padding:0 24px 20px;font-size:0.93rem;color:#6b7280;line-height:1.7}
.faq-answer.hidden{display:none}

/* ========== CTA ========== */
.cta-section{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;text-align:center;padding:80px 0}
.cta-section h2{font-size:2.2rem;font-weight:800;margin:0 0 16px}
.cta-section p{font-size:1.08rem;opacity:0.9;margin:0 0 32px;max-width:560px;margin-left:auto;margin-right:auto}

/* ========== Footer ========== */
.footer{background:#111827;color:#d1d5db;padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.footer h4{font-size:1.05rem;font-weight:700;color:#fff;margin:0 0 16px}
.footer p,.footer a{font-size:0.9rem;line-height:1.8}
.footer a{color:#9ca3af;text-decoration:none;transition:color 0.2s}
.footer a:hover{color:#f97316}
.footer-bottom{border-top:1px solid #1f2937;margin-top:40px;padding-top:24px;text-align:center;font-size:0.85rem;color:#6b7280}

/* ========== Page Hero (Sub-pages) ========== */
.page-hero{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;padding:120px 0 64px;text-align:center}
.page-hero h1{font-size:2.5rem;font-weight:800;margin:0 0 12px}
.page-hero p{font-size:1.05rem;opacity:0.88;margin:0}

/* ========== Feature Detail Cards (features.php) ========== */
.feature-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.feature-detail-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:36px 28px;display:flex;gap:20px;align-items:flex-start}
.feature-detail-card .fd-icon{width:60px;height:60px;flex-shrink:0;background:linear-gradient(135deg,#f97316,#ea580c);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff}
.feature-detail-card .fd-content h3{font-size:1.1rem;font-weight:700;margin:0 0 8px;color:#1f2937}
.feature-detail-card .fd-content p{font-size:0.93rem;color:#6b7280;margin:0;line-height:1.7}

/* ========== About Page ========== */
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about-story img{width:100%;border-radius:20px}
.about-story h2{font-size:1.8rem;font-weight:800;margin:0 0 16px;color:#1f2937}
.about-story p{font-size:0.98rem;color:#6b7280;line-height:1.8;margin:0 0 12px}
.mission-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mission-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:28px;text-align:center}
.mission-card i{font-size:2rem;color:#f97316;margin-bottom:16px;display:block}
.mission-card h3{font-size:1.1rem;font-weight:700;margin:0 0 8px;color:#1f2937}
.mission-card p{font-size:0.9rem;color:#6b7280;margin:0;line-height:1.7}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:28px 20px;text-align:center}
.team-card .t-avatar{width:80px;height:80px;margin:0 auto 16px;border-radius:50%;overflow:hidden;background:#fed7aa}
.team-card .t-avatar img{width:100%;height:100%}
.team-card h3{font-size:1rem;font-weight:700;margin:0 0 4px;color:#1f2937}
.team-card .t-role{font-size:0.85rem;color:#f97316;font-weight:500}

/* ========== Contact Page ========== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact-form{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:36px}
.contact-form label{display:block;font-size:0.9rem;font-weight:600;color:#374151;margin-bottom:6px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:10px;font-size:0.93rem;color:#1f2937;margin-bottom:18px;outline:none;transition:border-color 0.2s;font-family:inherit}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,0.1)}
.contact-form textarea{resize:vertical;min-height:130px}
.contact-form .btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border:none;border-radius:28px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s}
.contact-form .btn-submit:hover{box-shadow:0 8px 24px rgba(249,115,22,0.35);transform:translateY(-2px)}
.contact-info-sidebar{display:flex;flex-direction:column;gap:20px}
.contact-info-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;display:flex;gap:16px;align-items:flex-start}
.contact-info-card i{font-size:1.3rem;color:#f97316;margin-top:2px;flex-shrink:0}
.contact-info-card h4{font-size:0.95rem;font-weight:700;margin:0 0 4px;color:#1f2937}
.contact-info-card p{font-size:0.88rem;color:#6b7280;margin:0;line-height:1.6}

/* ========== Responsive ========== */
@media(max-width:992px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .join-steps{grid-template-columns:1fr}
  .about-story{grid-template-columns:1fr}
  .mission-cards{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .contact-layout{grid-template-columns:1fr}
  .feature-detail-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  #menuBtn{display:block}
  #mobileMenu{display:block}
  .hero h1{font-size:2rem}
  .hero p{font-size:1rem}
  .features-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .section-title{font-size:1.6rem}
  .team-grid{grid-template-columns:1fr 1fr}
  .feature-detail-card{flex-direction:column;align-items:center;text-align:center}
}

/* ========== Utilities ========== */
.hidden{display:none}