/* 思源黑体：Noto Sans SC 与 Source Han Sans SC 为同一字型（Google/Adobe 命名不同） */
@import url("https://fonts.bunny.net/css?family=noto-sans-sc:300,400,500,700");

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary-blue:#27577C;
  --primary-hover:#204861;
  --dark:#0F1E2E;
  --text-primary:#0F1E2E;
  --text-secondary:#4A6378;
  --text-tertiary:#6B8293;
  --accent-gold:#D4AF37;
  --accent-wood:#C87D42;
  --bg-light:#F2F7FA;
  --bg-white:#FFFFFF;
  --border:#D2D2D7;
  --border-light:#D4DDE6;
  --radius:8px;
  --transition:all .3s cubic-bezier(.4,0,.2,1);
  /* 与旧官网一致：思源黑体 Source Han Sans SC（Web 字体用 Noto Sans SC 同族加载） */
  --font-main:"Source Han Sans SC","Source Han Sans SC-Regular","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --success:#34C759;
  --warning:#FF9500;
  --error:#FF3B30;
  --locked:#C7C7CC;
  --agmo-black:#0F1E2E;
  --navy:#27577C;
  --silver:#8E99A4;
  --silver-light:#D4DDE6;
  --white:#FFFFFF;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-main);color:var(--text-primary);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
.container{max-width:1440px;margin:0 auto;padding:0 24px}
.page-section{display:none;min-height:100vh}
.page-section.active{display:block}
#page-order.page-section{background:var(--bg-light);display:none}
#page-order.page-section.active{display:block}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-bottom-color:var(--silver-light);box-shadow:0 1px 8px rgba(0,0,0,.04)}
.nav-inner{max-width:1440px;margin:0 auto;padding:0 clamp(12px,2vw,24px);width:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:clamp(8px,1.2vw,16px)}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:clamp(15px,1vw + 10px,22px);font-weight:700;color:var(--primary-blue);cursor:pointer;letter-spacing:.05em;flex-shrink:0;white-space:nowrap}
.nav-logo .logo-mark{width:36px;height:36px}
.nav-logo.nav-logo--img{gap:0;font-size:0}
.nav-logo .nav-logo-img{display:block;height:clamp(36px,3.2vw,48px);width:auto;max-width:clamp(120px,15vw,220px);object-fit:contain}
.nav-links{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px);flex-wrap:nowrap;min-width:0;flex:1 1 auto;justify-content:flex-end}
.nav-links a{font-size:clamp(11px,.45vw + 9px,14px);font-weight:400;color:var(--text-primary);position:relative;padding:4px 0;transition:color .2s;white-space:nowrap;flex-shrink:0}
.nav-links a:hover,.nav-links a.active-link{color:var(--primary-blue);font-weight:500}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--primary-blue);transition:width .3s}
.nav-links a:hover::after,.nav-links a.active-link::after{width:100%}
/* Dropdown */
.nav-dropdown{position:relative;display:flex;align-items:center;flex-shrink:0;white-space:nowrap}
.nav-dropdown-trigger{cursor:pointer;display:flex;align-items:center;gap:4px;font-size:clamp(11px,.45vw + 9px,14px);white-space:nowrap;flex-shrink:0}
.nav-dropdown-trigger::after{content:'BE';font-size:clamp(8px,.25vw + 7px,10px);color:var(--text-secondary);margin-left:2px}
.nav-dropdown-trigger:hover{color:var(--primary-blue)}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.12);padding:8px 0;min-width:160px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .4s;z-index:1000;margin-top:8px}
.nav-dropdown-menu::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.nav-dropdown-menu a{display:block;padding:10px 20px;font-size:14px;color:var(--text-primary);white-space:nowrap;transition:background .15s}
.nav-dropdown-menu a:hover{background:var(--bg-light);color:var(--primary-blue)}
.nav-dropdown-menu a::after{display:none!important}
.btn-dealer-login{font-size:clamp(11px,.4vw + 8px,13px);padding:clamp(5px,.4vw + 4px,7px) clamp(8px,1vw + 4px,18px);border-radius:var(--radius);border:1px solid var(--primary-blue);color:var(--primary-blue);transition:all .25s;font-weight:500;white-space:nowrap;flex-shrink:0}
.btn-dealer-login:hover{background:var(--primary-blue);color:#fff}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-hamburger span{width:22px;height:2px;background:var(--primary-blue);transition:all .3s}

/* Hero Carousel */
.hero-carousel{position:relative;height:56vh;min-height:360px;overflow:hidden;margin-top:64px}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .8s}
.hero-slide.active-slide{opacity:1}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(35,24,21,.7) 0%,rgba(35,24,21,.4) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;max-width:700px;padding:0 24px}
.hero-content h1{font-size:38px;font-weight:700;letter-spacing:.02em;margin-bottom:12px;line-height:1.3}
.hero-content p{font-size:17px;font-weight:300;margin-bottom:24px;opacity:.9}
.hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.hero-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s}
.hero-dot.active-dot{background:#fff;transform:scale(1.2)}

/* Trust Bar */
.trust-bar{padding:28px 0;border-bottom:1px solid var(--silver-light)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.trust-item{opacity:0;transform:translateY(24px);animation:trustFadeUp .6s ease forwards}
.trust-item:nth-child(1){animation-delay:.1s}
.trust-item:nth-child(2){animation-delay:.25s}
.trust-item:nth-child(3){animation-delay:.4s}
.trust-item:nth-child(4){animation-delay:.55s}
@keyframes trustFadeUp{to{opacity:1;transform:translateY(0)}}
.trust-item h3{font-size:32px;font-weight:700;color:var(--primary-blue);line-height:1.2;display:inline-block}
.trust-item p{font-size:13px;color:var(--silver);margin-top:4px;font-weight:400}

/* Card Grid */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;transition:all .3s;cursor:pointer}
.card:hover{border-color:var(--primary-blue);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.card-img{height:200px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--silver)}
.card-body{padding:16px 20px}
.card-tag{font-size:12px;color:var(--primary-blue);font-weight:500;margin-bottom:6px}
.card-title{font-size:18px;font-weight:500;margin-bottom:8px}
.card-desc{font-size:14px;color:var(--text-secondary);line-height:1.6}
.card-link{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--primary-blue);margin-top:12px;font-weight:500}
.card-link:hover{gap:8px}

/* Section Title */
.section-title{margin-bottom:16px;text-align:center}
.section-title h2{font-size:32px;font-weight:700;margin-bottom:8px}
.section-title p{font-size:16px;color:var(--text-secondary)}

/* News Layout */
.news-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.news-feature{border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden}
.news-feature-img{height:260px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver)}
.news-feature-body{padding:20px}
.news-list-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--silver-light)}
.news-list-item:last-child{border-bottom:none}
.news-list-item h4{font-size:15px;font-weight:500;margin-bottom:4px}
.news-list-item span{font-size:13px;color:var(--silver);white-space:nowrap;margin-left:16px}

/* CTA Section */
.cta-section{background:linear-gradient(135deg,#27577C 0%,#193952 100%);padding:64px 0}
.cta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;text-align:center;justify-content:center;max-width:800px;margin:0 auto}
.cta-item h3{font-size:22px;color:#fff;font-weight:500;margin-bottom:8px}
.cta-item p{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:20px}
.btn-cta{display:inline-block;padding:12px 32px;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:14px;border-radius:var(--radius);transition:all .25s}
.btn-cta:hover{background:#fff;color:var(--primary-blue)}

/* Footer */
.footer{padding:32px 0 20px;border-top:1px solid var(--silver-light)}
.footer-grid{display:grid;grid-template-columns:1fr 2fr;gap:32px;margin-bottom:28px}
.footer-brand .logo-text{font-size:20px;font-weight:700;color:var(--primary-blue);margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--silver);line-height:1.8}
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.footer-links h4{font-size:14px;font-weight:500;margin-bottom:12px}
.footer-links a{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.footer-links a:hover{color:var(--primary-blue)}
.footer-bottom{padding-top:16px;border-top:1px solid var(--silver-light);display:flex;justify-content:space-between;font-size:12px;color:var(--silver)}

/* Product Center */
.product-hero{padding:80px 0 40px;margin-top:64px;text-align:center}
.product-tabs{display:flex;justify-content:center;gap:32px;margin-bottom:32px}
.product-tab{font-size:16px;padding:8px 0;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.product-tab.active-tab{color:var(--primary-blue);font-weight:500;border-bottom-color:var(--primary-blue)}
.tag-bar{display:flex;justify-content:center;gap:10px;margin-bottom:40px;flex-wrap:wrap}
.tag-btn{padding:8px 20px;border:1px solid var(--silver-light);border-radius:var(--radius);font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all .2s;background:var(--white)}
.tag-btn.active-tag{background:var(--primary-blue);color:#fff;border-color:var(--primary-blue)}
.waterfall{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.waterfall-item{background:var(--white);border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .3s;display:block;color:inherit;text-decoration:none}
.waterfall-item:hover{border-color:var(--primary-blue);box-shadow:0 4px 16px rgba(39,87,124,0.1);transform:translateY(-2px)}
.waterfall-img{aspect-ratio:16/10;height:auto;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:13px;overflow:hidden;position:relative}
.waterfall-img img{width:100%;height:100%;object-fit:contain;display:block}
.waterfall-img.h-sq,.waterfall-img.h-tall{height:auto;aspect-ratio:16/10}
.waterfall-info{padding:12px 14px}
.waterfall-info .name{font-size:14px;font-weight:500;margin-bottom:8px;line-height:1.4}
.waterfall-info .series{font-size:12px;color:var(--silver)}
.waterfall-tags{display:flex;flex-wrap:wrap;gap:6px}
.waterfall-tag{font-size:11px;padding:2px 8px;background:var(--bg-light);color:var(--text-secondary);border-radius:4px}

/* Case Center */
.case-filters{display:flex;gap:16px;margin-bottom:40px;flex-wrap:wrap;align-items:center}
.filter-group{display:flex;gap:8px;align-items:center}
.filter-group label{font-size:13px;color:var(--silver);margin-right:4px}
.filter-group select{padding:6px 12px;border:1px solid var(--silver-light);border-radius:var(--radius);font-size:13px;font-family:var(--font-main);background:var(--white)}
.case-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.case-card{border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .3s;display:block;color:inherit;text-decoration:none}
.case-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.case-card-img{aspect-ratio:16/10;height:auto;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:13px}
.case-card-body{padding:12px 14px 14px}
.case-card-body h4{font-size:14px;font-weight:500;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.case-card-body p{font-size:13px;color:var(--text-secondary)}
.case-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.case-card-tag{font-size:11px;padding:2px 8px;background:var(--bg-light);color:var(--text-secondary);border-radius:4px}
.case-type-tabs{display:flex;gap:24px;margin-bottom:24px}
.case-type-tab{font-size:15px;color:var(--text-secondary);cursor:pointer;padding-bottom:4px;border-bottom:2px solid transparent}
.case-type-tab.active-tab{color:var(--primary-blue);font-weight:500;border-bottom-color:var(--primary-blue)}

/* Academy Visitor */
.academy-visitor{padding:80px 0 48px;margin-top:64px}
.academy-hero{text-align:center;max-width:700px;margin:0 auto 60px}
.academy-hero h1{font-size:36px;font-weight:700;margin-bottom:12px}
.academy-hero p{font-size:16px;color:var(--text-secondary)}
.course-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.course-preview-card{border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;transition:all .3s;position:relative}
.course-preview-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.course-thumb{height:140px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:12px;position:relative}
.course-thumb .lock-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 8px;border-radius:var(--radius)}
.course-preview-body{padding:14px}
.course-preview-body h4{font-size:14px;font-weight:500;margin-bottom:4px}
.course-preview-body p{font-size:12px;color:var(--silver)}
.course-preview-body .course-meta{font-size:11px;color:var(--primary-blue);margin-top:6px}

/* Join Page */
.join-hero{padding:80px 0 48px;margin-top:64px;text-align:center;background:linear-gradient(135deg,#27577C 0%,#193952 100%);color:#fff}
.join-hero h1{font-size:36px;font-weight:700;margin-bottom:12px}
.join-hero p{font-size:16px;opacity:.7;margin-bottom:32px}
.join-content{padding:60px 0}
.advantage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:80px}
.advantage-item{text-align:center;padding:32px 24px;border:1px solid var(--silver-light);border-radius:var(--radius)}
.advantage-item h3{font-size:20px;font-weight:500;margin:16px 0 8px}
.advantage-item p{font-size:14px;color:var(--text-secondary)}
.join-form{max-width:600px;margin:0 auto}
.join-form h2{font-size:24px;font-weight:700;margin-bottom:24px;text-align:center}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--silver-light);border-radius:var(--radius);font-size:14px;font-family:var(--font-main);transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-blue)}
.btn-submit{display:block;width:100%;padding:14px;background:var(--primary-blue);color:#fff;font-size:16px;border-radius:var(--radius);transition:all .25s;font-weight:500}
.btn-submit:hover{background:#204861}

/* News Page */
.news-page{padding:80px 0 48px;margin-top:64px}
.news-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.news-card{background:#fff;border:1px solid #e8ecf0;border-radius:12px;overflow:hidden;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,0.04);display:block;color:inherit;text-decoration:none}
.news-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.news-card-img{aspect-ratio:16/10;height:auto;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);background-size:cover;background-position:center}
.news-card-body{padding:14px}
.news-card-body .date{font-size:12px;color:var(--silver);margin-bottom:6px}
.news-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.news-card-tag{font-size:11px;padding:2px 8px;background:var(--bg-light);color:var(--text-secondary);border-radius:4px}
.news-card-body h3{font-size:14px;font-weight:500;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card-body p{font-size:12px;color:var(--text-secondary);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* About Page Sections */
.about-section-block{margin-bottom:64px}
.about-section-title{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.about-section-title h2{font-size:24px;font-weight:700;white-space:nowrap}
.about-title-line{flex:1;height:1px;background:var(--border-light)}

.about-philosophy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.about-philosophy-card{background:var(--bg-light);border-radius:var(--radius);padding:32px;text-align:center;transition:all .3s}
.about-philosophy-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px)}
.about-philosophy-icon{font-size:36px;margin-bottom:16px}
.about-philosophy-card h3{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--text-primary)}
.about-philosophy-card p{font-size:14px;color:var(--text-secondary);line-height:1.8}

.about-honor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.about-honor-card{border:1px solid var(--border-light);border-radius:var(--radius);padding:24px;text-align:center;transition:all .3s}
.about-honor-card:hover{border-color:var(--primary-blue);box-shadow:0 2px 12px rgba(39,87,124,.08)}
.about-honor-badge{font-size:32px;margin-bottom:12px}
.about-honor-card h4{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}
.about-honor-card p{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* ===== 企业荣誉 - Premium Dark+Gold Style ===== */
.honor-section{background:#fff;padding:60px 0;border-radius:0}
.honor-section .section-title h2{color:#0F1E2E;font-size:28px;font-weight:700;letter-spacing:1px}
.honor-section .section-title p{color:#4A6378;font-size:14px}
.honor-section .about-title-line{background:rgba(39,87,124,.5)}
.honor-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:48px}
.honor-stat-item{text-align:center;padding:32px 16px;border:1px solid rgba(39,87,124,.3);border-radius:12px;background:rgba(39,87,124,.03);transition:all .4s ease}
.honor-stat-item:hover{border-color:rgba(39,87,124,.5);background:rgba(39,87,124,.06);transform:translateY(-4px);box-shadow:0 8px 32px rgba(39,87,124,.25)}
.honor-stat-num{font-size:42px;font-weight:800;color:#27577C;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.honor-stat-label{font-size:13px;color:#4A6378;letter-spacing:.5px}
.honor-tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap}
.honor-tab{padding:8px 20px;border-radius:20px;font-size:13px;font-weight:500;color:#4A6378;border:1px solid rgba(39,87,124,.2);cursor:pointer;transition:all .3s;background:transparent}
.honor-tab:hover{color:#27577C;border-color:rgba(39,87,124,.4)}
.honor-tab.active{color:#fff;background:linear-gradient(135deg,#27577C,#1B1A55);border-color:transparent}
.honor-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.honor-card{background:#fff;border:1px solid rgba(39,87,124,.15);border-radius:12px;padding:28px 20px;text-align:center;transition:all .4s ease;position:relative;overflow:hidden}
.honor-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#27577C,transparent);opacity:0;transition:opacity .4s}
.honor-card:hover{border-color:rgba(39,87,124,.4);background:#f0f4ff;transform:translateY(-4px);box-shadow:0 12px 40px rgba(39,87,124,.12)}
.honor-card:hover::before{opacity:1}
.honor-card-icon{width:48px;height:48px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(39,87,124,.1);font-size:24px}
.honor-card h4{font-size:15px;font-weight:600;color:#0F1E2E;margin-bottom:8px}
.honor-card p{font-size:12px;color:#4A6378;line-height:1.6}
.honor-card .honor-year{display:inline-block;font-size:11px;color:#27577C;background:rgba(39,87,124,.1);padding:2px 10px;border-radius:10px;margin-top:10px}
/* honor scroll animation */
.honor-animate{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.honor-animate.visible{opacity:1;transform:translateY(0)}

/* About Page */
.about-page{padding:80px 0 48px;margin-top:64px}
.about-hero-section{text-align:center;margin-bottom:80px}
.about-hero-section h1{font-size:36px;font-weight:700;margin-bottom:16px}
.about-hero-section p{font-size:16px;color:var(--text-secondary);max-width:700px;margin:0 auto}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:80px}
.about-text h2{font-size:24px;font-weight:700;margin-bottom:16px}
.about-text p{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:12px}
.about-image{height:400px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);border-radius:var(--radius)}
.milestone-list{position:relative;padding-left:24px}
.milestone-item{position:relative;padding:0 0 32px 24px;border-left:2px solid var(--silver-light)}
.milestone-item:last-child{border-left:2px solid transparent}
.milestone-item::before{content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--primary-blue)}
.milestone-item .year{font-size:14px;font-weight:700;color:var(--primary-blue)}
.milestone-item p{font-size:14px;color:var(--text-secondary);margin-top:4px}

/* ===== 发展历程 - 纵向时间轴（设计稿样式） ===== */
.timeline-section{background:#fff;padding:80px 0;position:relative}
.timeline-section .section-title h2{color:#1a1a1a;font-size:36px;font-weight:800;line-height:1.3;letter-spacing:1px}
.timeline-section .section-title p{color:#666;font-size:15px;line-height:1.8;margin-top:16px;max-width:380px}
.timeline-section .about-title-line{background:#D4AF37;height:2px;width:32px;display:inline-block;margin-bottom:16px}
/* 纵向时间轴 */
.timeline-vertical{position:relative;padding:20px 0}
.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#e0e0e0;transform:translateX(-50%)}
.timeline-item{position:relative;display:flex;align-items:flex-start;margin-bottom:60px}
.timeline-item:last-child{margin-bottom:0}
.timeline-item-left{flex-direction:row}
.timeline-item-right{flex-direction:row-reverse}
.timeline-item-content{width:45%;padding:0 40px}
.timeline-item-left .timeline-item-content{text-align:right}
.timeline-item-right .timeline-item-content{text-align:left}
.timeline-item-spacer{width:10%}
.timeline-item-dot{position:absolute;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;border:3px solid #D4AF37;background:#fff;z-index:2;box-sizing:border-box;flex-shrink:0}
.timeline-item-year{font-size:14px;font-weight:700;color:#D4AF37;margin-bottom:8px;letter-spacing:1px}
.timeline-item-title{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:8px}
.timeline-item-desc{font-size:14px;color:#666;line-height:1.7}
@media(max-width:900px){
  .timeline-section{padding:40px 0}
  .timeline-section .section-title h2{font-size:26px}
  .timeline-line{left:20px}
  .timeline-item{flex-direction:row!important}
  .timeline-item-dot{left:20px}
  .timeline-item-content{width:calc(100% - 50px);padding-left:50px;padding-right:0;text-align:left!important}
  .timeline-item-spacer{display:none}
}
  .honor-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .honor-stat-num{font-size:32px}
  .honor-card-grid{grid-template-columns:1fr 1fr}
}

/* Contact Page */
.contact-page{padding:80px 0 48px;margin-top:64px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-info h2{font-size:24px;font-weight:700;margin-bottom:24px}
.contact-info-item{display:flex;gap:16px;margin-bottom:20px}
.contact-info-item .icon{width:40px;height:40px;border-radius:50%;background:var(--bg-light);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.contact-info-item h4{font-size:14px;font-weight:500}
.contact-info-item p{font-size:13px;color:var(--text-secondary)}

/* Dealer Layer */
.dealer-layout{display:flex;min-height:100vh;margin-top:64px}
.dealer-sidebar{width:220px;background:var(--primary-blue);color:#fff;padding:24px 0;position:fixed;top:64px;bottom:0;overflow-y:auto;z-index:100}
.dealer-sidebar .dealer-name{padding:0 20px;margin-bottom:20px;font-size:14px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:16px}
.dealer-sidebar .dealer-name span{font-size:12px;color:rgba(255,255,255,.5);display:block;margin-top:4px}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:rgba(255,255,255,.7);transition:all .2s}
.sidebar-nav a:hover,.sidebar-nav a.active-sidebar{color:#fff;background:rgba(255,255,255,.08)}
.sidebar-nav a.active-sidebar{border-right:3px solid var(--primary-blue)}
.sidebar-section{padding:12px 20px 6px;font-size:11px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.05em}
.dealer-main{margin-left:220px;flex:1;padding:32px;min-height:calc(100vh - 64px);background:var(--bg-light)}
.dealer-page{display:none}
.dealer-page.active{display:block}
.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
.dash-card{background:#fff;padding:24px;border-radius:var(--radius);border:1px solid var(--silver-light)}
.dash-card h4{font-size:13px;color:var(--silver);margin-bottom:8px}
.dash-card .value{font-size:28px;font-weight:700;color:var(--primary-blue)}
.dash-card .sub{font-size:12px;color:var(--success);margin-top:4px}
.dash-card .sub.warning{color:var(--warning)}

/* Academy Dealer */
.academy-dealer{padding:0}
.announcement-bar{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:14px 20px;margin-bottom:24px;display:flex;align-items:center;gap:10px}
.announcement-bar .icon{color:var(--warning)}
.announcement-bar p{font-size:14px;flex:1}
.announcement-bar .date{font-size:12px;color:var(--silver)}
.new-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.new-course-card{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden}
.new-course-card .thumb{height:120px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:12px}
.new-course-card .info{padding:14px}
.new-course-card .info h4{font-size:14px;font-weight:500;margin-bottom:6px}
.new-course-card .info .btn-go{font-size:12px;color:var(--primary-blue);font-weight:500}
.learn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.learn-stat{background:#fff;padding:20px;border-radius:var(--radius);border:1px solid var(--silver-light);text-align:center}
.learn-stat .num{font-size:24px;font-weight:700;color:var(--primary-blue)}
.learn-stat .label{font-size:12px;color:var(--silver);margin-top:4px}
.task-bar{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:20px;margin-bottom:32px}
.task-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--silver-light)}
.task-item:last-child{border-bottom:none}
.task-item .left{display:flex;align-items:center;gap:10px}
.task-item .icon-warn{color:var(--warning)}
.task-item .icon-book{color:var(--primary-blue)}
.task-item .info h4{font-size:14px;font-weight:500}
.task-item .info p{font-size:12px;color:var(--silver)}
.btn-sm{padding:6px 16px;font-size:12px;border-radius:var(--radius);cursor:pointer;transition:all .2s}
.btn-navy{background:var(--primary-blue);color:#fff;border:none}
.btn-navy:hover{background:#204861}
.btn-outline{background:none;border:1px solid var(--silver-light);color:var(--text-secondary)}
.btn-outline:hover{border-color:var(--primary-blue);color:var(--primary-blue)}

/* Phase Path */
.phase-path{display:flex;align-items:flex-start;gap:0;margin-bottom:32px;position:relative}
.phase-item{flex:1;text-align:center;position:relative}
.phase-item .phase-box{background:#fff;border:2px solid var(--silver-light);border-radius:var(--radius);padding:24px 16px;margin:0 8px;transition:all .3s}
.phase-item .phase-box.completed{border-color:var(--success);background:#f6ffed}
.phase-item .phase-box.in-progress{border-color:var(--primary-blue);background:#f0f5ff}
.phase-item .phase-box.locked{border-color:var(--locked);background:#fafafa;opacity:.6}
.phase-item .phase-box h4{font-size:15px;font-weight:700;margin-bottom:4px}
.phase-item .phase-box .status{font-size:12px;margin-top:8px;font-weight:500}
.phase-item .phase-box.completed .status{color:var(--success)}
.phase-item .phase-box.in-progress .status{color:var(--primary-blue)}
.phase-item .phase-box.locked .status{color:var(--locked)}
.phase-item .phase-box .count{font-size:12px;color:var(--silver);margin-top:4px}
.phase-arrow{text-align:center;color:var(--silver);font-size:20px;padding-top:30px;margin:0 -4px}

/* Course Board */
.course-boards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.course-board{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:24px;text-align:center;cursor:pointer;transition:all .3s}
.course-board:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.course-board .board-icon{width:48px;height:48px;border-radius:50%;background:var(--bg-light);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.course-board h4{font-size:15px;font-weight:500;margin-bottom:4px}
.course-board .board-count{font-size:12px;color:var(--silver)}
.course-board .board-status{font-size:12px;margin-top:8px;font-weight:500}
.course-board .board-status.done{color:var(--success)}
.course-board .board-status.ongoing{color:var(--primary-blue)}
.course-board .board-status.locked-status{color:var(--locked)}

/* Course List */
.course-filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.course-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.course-card{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.course-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.course-card.locked-card{opacity:.5;cursor:not-allowed}
.course-card .thumb{height:130px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;position:relative}
.course-card .thumb .status-badge{position:absolute;top:8px;left:8px;font-size:11px;padding:3px 8px;border-radius:var(--radius)}
.course-card .thumb .badge-done{background:#f6ffed;color:var(--success)}
.course-card .thumb .badge-ongoing{background:#f0f5ff;color:var(--primary-blue)}
.course-card .thumb .badge-locked{background:#fafafa;color:var(--locked)}
.course-card .course-info{padding:14px}
.course-card .course-info .cat{font-size:11px;color:var(--primary-blue);font-weight:500}
.course-card .course-info h4{font-size:14px;font-weight:500;margin:4px 0}
.course-card .course-info .phase-tag{font-size:11px;color:var(--silver);margin-bottom:6px}
.course-card .course-info .progress-text{font-size:12px;color:var(--text-secondary)}
.course-card .course-info .lock-text{font-size:12px;color:var(--locked)}

/* Video Player */
.video-container{background:#0B1922;border-radius:var(--radius);overflow:hidden;margin-bottom:24px;position:relative}
.video-placeholder{height:400px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:14px}
.video-controls{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#132433;color:#fff;font-size:13px}
.video-controls .play-btn{width:32px;height:32px;border-radius:50%;background:var(--primary-blue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.progress-bar{flex:1;height:4px;background:rgba(255,255,255,.2);border-radius:2px;cursor:not-allowed}
.progress-fill{width:35%;height:100%;background:var(--primary-blue);border-radius:2px}
.speed-select{background:none;color:#fff;border:none;font-size:12px;font-family:var(--font-main)}
.anti-cheat-bar{background:#fff3e0;border:1px solid #ffe0b2;border-radius:var(--radius);padding:12px 16px;margin-bottom:24px;font-size:13px;color:#e65100;display:flex;align-items:center;gap:8px}

/* Exam */
.exam-container{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:32px}
.exam-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--silver-light)}
.exam-header h3{font-size:18px;font-weight:700}
.exam-timer{font-size:16px;font-weight:700;color:var(--warning)}
.exam-progress{margin-bottom:24px}
.exam-progress-bar{height:6px;background:var(--silver-light);border-radius:3px}
.exam-progress-fill{height:100%;background:var(--primary-blue);border-radius:3px;transition:width .3s}
.exam-progress-text{font-size:12px;color:var(--silver);margin-top:4px}
.question-item{margin-bottom:24px;padding:20px;background:var(--bg-light);border-radius:var(--radius)}
.question-item .q-text{font-size:15px;font-weight:500;margin-bottom:12px}
.question-item .q-options label{display:block;padding:8px 12px;margin-bottom:4px;border:1px solid var(--silver-light);border-radius:var(--radius);cursor:pointer;font-size:14px;transition:all .2s}
.question-item .q-options label:hover{border-color:var(--primary-blue)}
.question-item .q-options input:checked+span{color:var(--primary-blue);font-weight:500}
.exam-actions{display:flex;justify-content:space-between;margin-top:24px}

/* Certificate */
.certificate-box{background:linear-gradient(135deg,#fffbf0,#fff8e1);border:2px solid #daa520;border-radius:8px;padding:40px;text-align:center;margin:24px 0}
.certificate-box h3{font-size:20px;color:#8b6914;margin-bottom:8px}
.certificate-box .cert-name{font-size:24px;font-weight:700;color:var(--primary-blue);margin:16px 0}
.certificate-box p{font-size:14px;color:var(--text-secondary)}

/* Order System - Desktop Layout */
.order-layout{display:flex;min-height:100vh}
.order-sidebar{width:220px;background:linear-gradient(180deg,#27577C 0%,#193952 100%);color:#fff;padding:20px 0;position:fixed;top:0;bottom:0;left:0;z-index:100}
.order-sidebar .order-logo{padding:0 20px;margin-bottom:24px;font-size:18px;font-weight:700;letter-spacing:.05em}
.order-sidebar .order-nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:rgba(255,255,255,.7);transition:all .2s}
.order-sidebar .order-nav a:hover,.order-sidebar .order-nav a.active-sidebar{color:#fff;background:rgba(255,255,255,.15);border-left:3px solid rgba(255,255,255,.8)}
.order-sidebar .back-link{margin-top:auto;padding:16px 20px;border-top:1px solid rgba(255,255,255,.1)}
.order-sidebar .back-link a{font-size:12px;color:rgba(255,255,255,.5)}
.order-sidebar .sidebar-group .has-submenu{justify-content:space-between}
.order-sidebar .sidebar-group .has-submenu .arrow{font-size:10px;transition:transform .2s}
.order-sidebar .sidebar-group .submenu a{padding-left:36px;font-size:12px}
.order-sidebar .sidebar-group .submenu a.active-sidebar{border-left:3px solid rgba(255,255,255,.8);border-right:none}
.order-main{margin-left:200px;flex:1;padding:24px 32px;min-height:100vh;background:var(--bg-light)}
.order-page{display:none}
.order-page.active{display:block}
.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.dash-card{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:20px}
.dash-card h4{font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.dash-card .value{font-size:24px;font-weight:700;color:var(--primary-blue)}
.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.product-card{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.product-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.product-card .p-img{height:180px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:13px}
.product-card .p-info{padding:16px}
.product-card .p-name{font-size:15px;font-weight:500;margin-bottom:4px}
.product-card .p-desc{font-size:13px;color:var(--text-secondary);margin:4px 0 6px;line-height:1.4}
.product-card .p-price{display:none}
.product-card .p-tag{font-size:12px;color:var(--success);margin-bottom:12px}
.btn-add-cart{width:100%;padding:10px;background:var(--primary-blue);color:#fff;font-size:13px;border-radius:var(--radius);transition:all .2s;font-weight:500}
.btn-add-cart:hover{background:var(--primary-hover)}
.cart-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden}
.cart-table th{padding:12px 16px;text-align:left;background:var(--bg-light);font-size:13px;font-weight:500}
.cart-table td{padding:12px 16px;border-top:1px solid var(--silver-light);font-size:14px}
.cart-table .item-info{display:flex;align-items:center;gap:12px}
.cart-table .item-thumb{width:60px;height:60px;background:var(--bg-light);border-radius:var(--radius);flex-shrink:0}
.cart-summary{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:24px;margin-top:24px;max-width:400px;margin-left:auto}
.cart-summary .row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.cart-summary .total{font-size:18px;font-weight:700;border-top:2px solid var(--primary-blue);padding-top:12px;margin-top:8px}

/* Academy in Order System */
.academy-overview{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:24px;margin-bottom:24px}
.academy-overview .progress-bar{height:8px;background:var(--bg-light);border-radius:4px;margin-top:12px;overflow:hidden}
.academy-overview .progress-fill{height:100%;background:var(--primary-blue);border-radius:4px;transition:width .3s}
.academy-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.academy-card{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.academy-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.academy-card .card-img{height:140px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:13px}
.academy-card .card-info{padding:16px}
.academy-card .card-title{font-size:14px;font-weight:500;margin-bottom:6px}
.academy-card .card-meta{font-size:12px;color:var(--silver)}
.academy-card .card-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;margin-top:8px}
.academy-card .status-completed{background:#f6ffed;color:var(--success)}
.academy-card .status-notstarted{background:#f5f5f5;color:var(--silver)}
.academy-card .status-locked{background:#f5f5f5;color:var(--text-secondary);opacity:.5}
.certificate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.certificate-card{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:20px;text-align:center}
.certificate-card .cert-icon{font-size:32px;margin-bottom:8px}
.certificate-card .cert-title{font-size:15px;font-weight:600;margin-bottom:4px}
.certificate-card .cert-date{font-size:12px;color:var(--silver);margin-bottom:12px}

/* Material Center in Order System */
.material-tabs{display:flex;gap:24px;margin-bottom:24px;border-bottom:1px solid var(--silver-light)}
.material-tab{padding:12px 0;font-size:15px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.material-tab.active{color:var(--primary-blue);border-bottom-color:var(--primary-blue)}
.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.material-card{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.material-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.material-card .thumb{height:160px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--silver);font-size:13px}
.material-card .info{padding:16px}
.material-card .title{font-size:14px;font-weight:500;margin-bottom:4px}
.material-card .meta{font-size:12px;color:var(--silver);margin-bottom:12px}
.material-card .actions{display:flex;gap:8px}
.tracking-dashboard{background:#fff;border:1px solid var(--silver-light);border-radius:var(--radius);padding:24px;margin-bottom:24px}
.tracking-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.tracking-stat{text-align:center}
.tracking-stat .value{font-size:24px;font-weight:700;color:var(--primary-blue)}
.tracking-stat .label{font-size:12px;color:var(--silver);margin-top:4px}
.library-tabs{display:flex;gap:16px;margin-bottom:20px}
.library-tab{padding:8px 20px;border:1px solid var(--silver-light);border-radius:var(--radius);font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all .2s;background:var(--white)}
.library-tab.active{background:var(--primary-blue);color:#fff;border-color:var(--primary-blue)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:4px;max-width:440px;width:90%;max-height:90vh;overflow-y:auto}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--silver-light);display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:18px;font-weight:700}
.modal-close{font-size:24px;color:var(--silver);cursor:pointer;transition:color .2s}
.modal-close:hover{color:var(--primary-blue)}
.modal-body{padding:24px}
.login-tabs{display:flex;margin-bottom:24px;border-bottom:1px solid var(--silver-light)}
.login-tab{flex:1;text-align:center;padding:10px;font-size:14px;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.login-tab.active-tab{color:var(--primary-blue);font-weight:500;border-bottom-color:var(--primary-blue)}
.login-form .form-group{margin-bottom:16px}
.login-form .form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
.login-form .form-group input{width:100%;padding:10px 12px;border:1px solid var(--silver-light);border-radius:var(--radius);font-size:14px;font-family:var(--font-main)}
.login-form .form-group input:focus{outline:none;border-color:var(--primary-blue)}
.btn-login{width:100%;padding:12px;background:var(--primary-blue);color:#fff;font-size:15px;border-radius:var(--radius);font-weight:500;transition:all .2s;margin-top:8px}
.btn-login:hover{background:#204861}

/* Spec Modal */
.spec-modal{max-width:390px}
.spec-section{margin-bottom:20px}
.spec-section h4{font-size:14px;font-weight:500;margin-bottom:10px}
.spec-options{display:flex;gap:8px;flex-wrap:wrap}
.spec-opt{padding:8px 16px;border:1px solid var(--silver-light);border-radius:var(--radius);font-size:13px;cursor:pointer;transition:all .2s}
.spec-opt.selected{border-color:var(--primary-blue);background:var(--primary-blue);color:#fff}
.color-swatches{display:flex;gap:8px;flex-wrap:wrap}
.color-swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--silver-light);cursor:pointer;transition:all .2s}
.color-swatch.selected{border-color:var(--primary-blue);transform:scale(1.15)}
.qty-control{display:flex;align-items:center;gap:12px}
.qty-control button{width:32px;height:32px;border:1px solid var(--silver-light);border-radius:var(--radius);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.qty-control .qty-val{font-size:16px;font-weight:500;min-width:40px;text-align:center}
.spec-total{font-size:20px;font-weight:700;color:var(--warning);margin:16px 0}
.spec-actions{display:flex;gap:12px}
.spec-actions button{flex:1;padding:12px;font-size:14px;border-radius:var(--radius);font-weight:500;transition:all .2s}
.btn-primary{background:var(--primary-blue);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{border:1px solid var(--primary-blue);color:var(--primary-blue);background:#fff}
.btn-secondary:hover{background:var(--primary-blue);color:#fff}

/* Back to Top */
.back-to-top{position:fixed;bottom:32px;right:32px;width:44px;height:44px;background:var(--white);border:1px solid var(--silver-light);border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:999;transition:all .3s;font-size:18px;color:var(--primary-blue)}
.back-to-top:hover{background:var(--primary-blue);color:#fff}
.back-to-top.show{display:flex}

/* Toast */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--primary-blue);color:#fff;padding:12px 28px;border-radius:var(--radius);font-size:14px;z-index:3000;opacity:0;transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Confirm Dialog */
.confirm-bar{background:#fff;border:1px solid var(--warning);border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;gap:12px}
.confirm-bar .warn-icon{color:var(--warning);font-size:18px}

/* Responsive */
@media(max-width:1200px){
  .waterfall,.case-grid,.news-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1024px){
  .waterfall,.case-grid,.news-grid{grid-template-columns:repeat(3,1fr)}
  .news-grid{grid-template-columns:repeat(3,1fr)}
  .course-preview-grid{grid-template-columns:repeat(2,1fr)}
  .course-boards{grid-template-columns:repeat(2,1fr)}
  .course-list{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .dashboard-cards{grid-template-columns:repeat(2,1fr)}
  .order-sidebar{width:160px}
  .order-main{margin-left:160px}
}
@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;gap:0;align-items:stretch}
.nav-dropdown{flex-direction:column;align-items:stretch}
.nav-dropdown-trigger::after{content:'BE'}
.nav-dropdown-menu{position:static;transform:none;box-shadow:none;border-radius:0;padding:0 0 0 16px;opacity:1;visibility:visible;pointer-events:auto;margin-top:0;max-height:0;overflow:hidden;transition:max-height .3s}
.nav-dropdown-menu::before{display:none}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown-menu.open{max-height:200px}
.nav-dropdown-menu a{padding:10px 20px}
.btn-dealer-login{width:100%;margin:8px 0}
  .nav-hamburger{display:flex}
  .hero-content h1{font-size:28px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid,.news-layout,.about-grid,.contact-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr;gap:32px}
  .waterfall,.case-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .advantage-grid{grid-template-columns:1fr}
  .course-preview-grid{grid-template-columns:1fr}
  .dashboard-cards{grid-template-columns:repeat(2,1fr)}
  .learn-stats{grid-template-columns:repeat(2,1fr)}
  .new-courses{grid-template-columns:1fr}
  .phase-path{flex-direction:column}
  .phase-arrow{transform:rotate(90deg);padding:8px 0}
  .course-boards{grid-template-columns:1fr}
  .course-list{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)}

  .detail-main-layout{flex-direction:column}
  .detail-right{width:100%}
  .detail-image-wrapper{flex-direction:column}
  .detail-thumbnails{flex-direction:row}
  .detail-main-image{min-height:280px}
  .detail-actions{flex-wrap:wrap}
  .detail-btn-cart,.detail-btn-buy{min-width:140px}
  .dealer-sidebar{width:180px}
  .dealer-main{margin-left:180px}
  .order-sidebar{display:none}
  .order-main{margin-left:0}
}

/* Product Detail Page */
.detail-breadcrumb{padding:12px 0;font-size:13px;color:var(--text-secondary);margin-bottom:20px}
.detail-breadcrumb .breadcrumb-link{color:var(--text-secondary);cursor:pointer;transition:color .2s}
.detail-breadcrumb .breadcrumb-link:hover{color:var(--primary-blue)}
.detail-breadcrumb .breadcrumb-sep{margin:0 8px;color:var(--text-tertiary)}
.detail-breadcrumb .breadcrumb-current{color:var(--text-primary);font-weight:500}
.detail-back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--primary-blue);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;margin-bottom:12px}
.detail-back-btn:hover{background:#204861;transform:translateX(-2px)}
.detail-back-btn svg{width:16px;height:16px;fill:currentColor}
.detail-main-layout{display:flex;gap:32px;margin-bottom:32px}
.detail-left{flex:1;min-width:0}
.detail-right{width:380px;flex-shrink:0}
.detail-image-wrapper{display:flex;gap:12px;background:#fff;border-radius:12px;padding:24px;border:1px solid var(--silver-light)}
.detail-thumbnails{display:flex;flex-direction:column;gap:8px}
.detail-thumb{width:64px;height:72px;background:#fff;border:2px solid var(--border);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s}
.detail-thumb.active{border-color:var(--primary-blue)}
.detail-thumb:hover{border-color:var(--primary-blue)}
.detail-main-image{flex:1;display:flex;align-items:center;justify-content:center;min-height:400px;background:#f0f2f5;border-radius:8px}
.detail-image-tabs{display:flex;gap:0;margin-top:12px}
.detail-img-tab{padding:8px 20px;font-size:13px;font-weight:500;cursor:pointer;border-radius:6px 6px 0 0;background:var(--bg-light);color:var(--text-secondary);transition:all .2s}
.detail-img-tab.active{background:var(--dark);color:#fff}
.detail-img-tab:hover:not(.active){background:var(--border-light)}

.detail-info-header{background:#fff;border-radius:12px;padding:20px 24px;border:1px solid var(--silver-light);margin-bottom:16px}
.detail-spec-code{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.detail-product-title{font-size:15px;color:var(--text-secondary);font-weight:400}
.detail-info-body{background:#fff;border-radius:12px;padding:20px 24px;border:1px solid var(--silver-light);margin-bottom:16px}
.detail-info-row{margin-bottom:12px}
.detail-info-label{font-size:13px;color:var(--text-secondary);font-weight:500}
.detail-info-value{font-size:13px;color:var(--text-primary)}
.detail-template-options{display:flex;gap:8px;margin-bottom:16px}
.detail-tpl-opt{padding:6px 16px;font-size:13px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s;color:var(--text-primary)}
.detail-tpl-opt:hover{border-color:var(--primary-blue)}
.detail-tpl-opt.selected{border-color:var(--primary-blue);background:rgba(39,87,124,.06);color:var(--primary-blue)}
.detail-cascade-section{margin-bottom:16px}
.detail-cascade-row{margin-bottom:6px}
.detail-cascade-hint{font-size:13px;color:var(--text-tertiary);margin-bottom:10px;padding-left:4px}
.detail-cascade-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.detail-cascade-opt{padding:6px 16px;font-size:13px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s;color:var(--text-primary)}
.detail-cascade-opt:hover{border-color:var(--primary-blue)}
.detail-cascade-opt.selected{border-color:var(--primary-blue);background:rgba(39,87,124,.06);color:var(--primary-blue)}
.detail-qty-control{display:flex;align-items:center;gap:0}
.detail-qty-btn{width:36px;height:36px;border:1px solid var(--border);background:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text-primary)}
.detail-qty-btn:first-child{border-radius:6px 0 0 6px}
.detail-qty-btn:last-of-type{border-radius:0 6px 6px 0}
.detail-qty-btn:hover{background:var(--bg-light)}
.detail-qty-val{width:48px;height:36px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}
.detail-qty-unit{margin-left:8px;font-size:13px;color:var(--text-secondary)}
.detail-actions{background:#fff;border-radius:12px;padding:16px 24px;border:1px solid var(--silver-light);display:flex;align-items:center;gap:12px}
.detail-notice-check{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--primary-blue);cursor:pointer;white-space:nowrap}
.detail-notice-check input{accent-color:var(--primary-blue)}
.detail-btn-cart{flex:1;padding:12px 24px;background:var(--dark);color:#fff;font-size:14px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s}
.detail-btn-cart:hover{background:#333}
.detail-btn-buy{flex:1;padding:12px 24px;background:#fff;color:var(--dark);font-size:14px;font-weight:600;border:1px solid var(--dark);border-radius:8px;cursor:pointer;transition:all .2s}
.detail-btn-buy:hover{background:var(--bg-light)}

.detail-bottom-tabs{display:flex;gap:0;margin-bottom:0;border-bottom:1px solid var(--border-light)}
.detail-bottom-tab{padding:14px 24px;font-size:14px;font-weight:500;cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;transition:all .2s}
.detail-bottom-tab.active{color:var(--text-primary);border-bottom-color:var(--primary-blue);font-weight:600}
.detail-bottom-tab:hover:not(.active){color:var(--text-primary)}
.detail-bottom-content{background:#fff;border:1px solid var(--silver-light);border-top:none;border-radius:0 0 12px 12px;padding:24px;min-height:200px}
.detail-bottom-panel{display:none}
.detail-bottom-panel.active{display:block}
.detail-section-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-light)}
.detail-params-tbl{width:100%;border-collapse:collapse}
.detail-params-tbl th{text-align:left;padding:12px 16px;background:var(--bg-light);font-size:13px;font-weight:500;color:var(--text-secondary);border:1px solid var(--border-light);width:140px}
.detail-params-tbl td{padding:12px 16px;font-size:14px;color:var(--text-primary);border:1px solid var(--border-light)}

/* ===== V17 New Styles ===== */
.agmo-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.agmo-table th{padding:10px 12px;text-align:left;background:#f7fafc;font-weight:600;color:#2d3748;border-bottom:2px solid #e2e8f0;font-size:13px}
.agmo-table td{padding:10px 12px;font-size:13px;color:#4a5568;border-bottom:1px solid #edf2f7}
.agmo-table tr:hover td{background:rgba(39,87,124,.03)}

.ai-summary{background:linear-gradient(135deg,rgba(39,87,124,.02),rgba(39,87,124,.04));border-left:3px solid var(--primary-blue);padding:20px 24px;border-radius:0 12px 12px 0;margin:24px 0;font-size:15px;color:#4a5568;line-height:1.8}

.tech-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.tech-card{background:#fff;border:1px solid #e8ecf0;border-radius:12px;padding:24px 20px;text-align:center;transition:all .3s;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.tech-card:hover{border-color:var(--primary-blue);box-shadow:0 8px 24px rgba(39,87,124,.12);transform:translateY(-2px)}
.tech-card .tech-icon{font-size:40px;margin-bottom:16px}
.tech-card h3{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}
.tech-card p{font-size:14px;color:var(--text-secondary);line-height:1.6}
.tech-card .tech-link{display:inline-block;margin-top:12px;font-size:14px;color:var(--primary-blue);font-weight:500}

.rank-bar{background:var(--bg-light);padding:28px 0;margin:0}
.rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
.rank-item h3{font-size:28px;font-weight:700;color:var(--primary-blue);margin-bottom:4px}
.rank-item p{font-size:13px;color:var(--text-secondary)}

.faq-section{padding:32px 0}
.faq-item{border:1px solid var(--silver-light);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.faq-item summary{padding:14px 18px;font-size:15px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.faq-item summary:hover{background:var(--bg-light)}
.faq-item summary::after{content:'+';font-size:18px;color:var(--text-secondary);transition:transform .2s}
.faq-item[open] summary::after{content:'-'}
.faq-item .faq-answer{padding:0 18px 14px;font-size:14px;color:var(--text-secondary);line-height:1.7}

.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0}
.process-step{text-align:center;padding:16px 8px}
.process-step .step-num{width:32px;height:32px;border-radius:50%;background:var(--primary-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin:0 auto 8px}
.process-step .step-name{font-size:13px;font-weight:600;color:#2d3748;margin-bottom:4px}
.process-step .step-desc{font-size:11px;color:#718096}

.patent-visual{display:flex;gap:24px;justify-content:center;text-align:center;padding:16px 0;margin:16px 0}
.patent-stat{text-align:center;padding:16px 12px;flex:1}
.patent-stat .big-num{font-size:32px;font-weight:700;color:var(--primary-blue);line-height:1.2}
.patent-stat .num-label{font-size:13px;color:#718096;margin-top:6px;letter-spacing:.5px}

.install-system-card{background:#fff;border:1px solid #e8ecf0;border-radius:12px;padding:28px 24px;margin-bottom:20px;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.install-system-card:hover{border-color:var(--primary-blue);box-shadow:0 8px 24px rgba(39,87,124,.12);transform:translateY(-2px)}
.install-system-card h3{font-size:16px;font-weight:600;margin-bottom:12px;color:#1a365d}
.install-system-card .system-meta{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid #edf2f7}
.install-system-card .system-meta div{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px}
.install-system-card .system-meta div strong{font-size:12px;color:#718096}
.install-system-card .system-meta div span{font-size:13px;color:var(--primary-blue);font-weight:500}

.cert-card{background:#fff;border:1px solid #e8ecf0;border-radius:12px;padding:28px 24px;text-align:center;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.cert-card:hover{border-color:var(--primary-blue);box-shadow:0 8px 24px rgba(39,87,124,.12);transform:translateY(-2px)}
.cert-card .cert-icon{font-size:32px;margin-bottom:12px}
.cert-card h3{font-size:16px;font-weight:600;margin-bottom:16px;color:#1a365d}
.cert-card .cert-detail{font-size:14px;color:var(--text-secondary);line-height:1.8}
.cert-card .cert-detail strong{color:var(--text-primary)}

.after-sales-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:32px 0}
.after-sales-step{text-align:center;padding:24px 12px;border:1px solid var(--silver-light);border-radius:var(--radius)}
.after-sales-step .step-icon{font-size:32px;margin-bottom:8px}
.after-sales-step h4{font-size:14px;font-weight:600;margin-bottom:4px}
.after-sales-step p{font-size:12px;color:var(--text-secondary)}

@media(max-width:768px){
  .tech-card-grid,.patent-visual,.rank-grid{grid-template-columns:1fr}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .after-sales-flow{grid-template-columns:1fr}
  .install-system-card .system-meta div{flex-direction:column;align-items:flex-start;gap:2px}
}

/* ===== Grid Card Layout (Premium Design) ===== */
.waterfall-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 0;
}

@media (max-width: 1024px) {
  .waterfall-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .waterfall-container {
    grid-template-columns: 1fr;
  }
}

.waterfall-item {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  padding: 28px 24px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.waterfall-item:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 8px 24px rgba(39,87,124,0.12);
  transform: translateY(-2px);
}

.waterfall-item .waterfall-icon {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.waterfall-item .waterfall-icon.waterfall-icon--img {
  font-size: 0;
  width: 48px;
  height: 48px;
  line-height: 0;
}

.waterfall-item .waterfall-icon.waterfall-icon--img img {
  width: 100%;
  height: 100%;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

.waterfall-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a365d;
  margin-bottom: 12px;
  line-height: 1.4;
}

.waterfall-item h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.waterfall-item p {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 8px;
}

.waterfall-item .big-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 8px 0;
  line-height: 1.2;
}

.waterfall-item .num-label {
  font-size: 13px;
  color: #718096;
  letter-spacing: 1px;
}

.waterfall-full-width {
  grid-column: 1 / -1;
}

/* Tables inside cards */
.waterfall-item .agmo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
}

.waterfall-item .agmo-table th {
  background: #f7fafc;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #2d3748;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
}

.waterfall-item .agmo-table td {
  padding: 10px 12px;
  font-size: 13px;
  color: #4a5568;
  border-bottom: 1px solid #edf2f7;
}

/* System meta info */
.system-meta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf2f7;
}

.system-meta div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.system-meta div strong {
  font-size: 12px;
  color: #718096;
}

.system-meta div span {
  font-size: 13px;
  color: var(--primary-blue);
  font-weight: 500;
}

/* Patent visual */
.patent-visual {
  display: flex;
  gap: 24px;
  justify-content: center;
  text-align: center;
  padding: 16px 0;
}

.patent-stat .big-num {
  font-size: 32px;
}

/* Process steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 16px 0;
}

.process-step {
  text-align: center;
  padding: 16px 8px;
}

.process-step .step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

.process-step .step-name {
  font-size: 13px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
}

.process-step .step-desc {
  font-size: 11px;
  color: #718096;
}

/* Cert card in grid */
.cert-card {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

.cert-card .cert-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.cert-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a365d;
  margin-bottom: 16px;
}

.cert-detail {
  text-align: left;
}

.cert-detail p {
  font-size: 13px;
  color: #4a5568;
  margin-bottom: 8px;
  line-height: 1.6;
}

.cert-detail strong {
  color: #2d3748;
}

/* Timeline nav in cards */
.waterfall-item .timeline-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.waterfall-item .timeline-nav button {
  padding: 6px 14px;
  border: 1px solid var(--silver-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.waterfall-item .timeline-nav button.active {
  background: var(--primary-blue);
  color: #fff;
  border-color: var(--primary-blue);
}


/* ===== V17 Visual Enhancement - Premium Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(39,87,124,0.1); }
  50% { box-shadow: 0 0 40px rgba(39,87,124,0.2); }
}

/* Page transition effect */
.page-section.active {
  animation: fadeIn 0.5s ease forwards;
}

/* Hero Enhancement */
.hero-carousel {
  position: relative;
}
.hero-carousel::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,144,217,0.15) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
  animation: floatUp 8s ease-in-out infinite;
}
.hero-carousel::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39,87,124,0.12) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
  animation: floatUp 10s ease-in-out infinite reverse;
}
.hero-content h1 {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}
.hero-content p {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}
.hero-content .btn-cta {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}
.hero-slide.active-slide .hero-content h1,
.hero-slide.active-slide .hero-content p,
.hero-slide.active-slide .hero-content .btn-cta {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}
.hero-slide.active-slide .hero-content h1 { animation-delay: 0.2s; }
.hero-slide.active-slide .hero-content p { animation-delay: 0.4s; }
.hero-slide.active-slide .hero-content .btn-cta { animation-delay: 0.6s; }

/* Hero CTA Button Gradient */
.hero-content .btn-cta {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #4A90D9 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(39,87,124,0.35);
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 30px;
  transition: all 0.3s ease;
}
.hero-content .btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(39,87,124,0.45);
}

/* Hero Dots Enhancement */
.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  transition: all 0.4s ease;
}
.hero-dot.active-dot {
  background: #fff;
  width: 32px;
  box-shadow: 0 0 12px rgba(255,255,255,0.5);
}

/* Brand Positioning Cards (Block 2.5) */
.brand-advantage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.brand-advantage-card {
  background: #fff;
  border: 1px solid rgba(39,87,124,0.1);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.brand-advantage-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), #4A90D9);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}
.brand-advantage-card:hover::before {
  transform: scaleX(1);
}
.brand-advantage-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(39,87,124,0.12);
  border-color: rgba(39,87,124,0.25);
}
.brand-advantage-card .card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, rgba(39,87,124,0.08), rgba(74,144,217,0.08));
  transition: all 0.3s ease;
}
.brand-advantage-card:hover .card-icon {
  background: linear-gradient(135deg, rgba(39,87,124,0.15), rgba(74,144,217,0.15));
  animation: breathe 2s ease infinite;
}
.brand-advantage-card .card-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.brand-advantage-card .card-label {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.brand-advantage-card .card-sublabel {
  font-size: 11px;
  color: var(--silver);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .brand-advantage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .brand-advantage-card {
    padding: 20px 14px;
  }
  .brand-advantage-card .card-num {
    font-size: 22px;
  }
}

/* Tech Cards Enhanced */
.tech-card {
  position: relative;
  overflow: hidden;
}
.tech-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), #4A90D9);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.tech-card:hover::after {
  transform: scaleX(1);
}
.tech-card:nth-child(1) {
  background: linear-gradient(180deg, rgba(39,87,124,0.02) 0%, #fff 40%);
}
.tech-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(74,144,217,0.03) 0%, #fff 40%);
}
.tech-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(52,199,89,0.02) 0%, #fff 40%);
}
.tech-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(39,87,124,0.15);
}
.tech-card .tech-icon {
  animation: breathe 3s ease infinite;
}

/* Recommendation Cards Enhanced */
.card {
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(39,87,124,0.12);
}
.card:hover::before {
  border-color: var(--primary-blue);
}
.card-img {
  position: relative;
  overflow: hidden;
}
.card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(39,87,124,0.08), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover .card-img::after {
  opacity: 1;
}
.card-tag {
  background: linear-gradient(135deg, rgba(39,87,124,0.08), rgba(74,144,217,0.08));
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
}

/* News Cards Enhanced */
.news-feature {
  transition: all 0.4s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.news-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(39,87,124,0.12);
}
.news-feature-img {
  position: relative;
  overflow: hidden;
}
.news-feature-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(39,87,124,0.1), transparent);
}
.news-list-item {
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 16px 12px !important;
  margin: 0 -12px;
}
.news-list-item:hover {
  background: rgba(39,87,124,0.03);
}
.news-list-item span {
  background: linear-gradient(135deg, rgba(39,87,124,0.08), rgba(74,144,217,0.08));
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}
.news-card {
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(39,87,124,0.12);
  border-color: rgba(39,87,124,0.3);
}
.news-card .news-card-body .date {
  background: linear-gradient(135deg, rgba(39,87,124,0.08), rgba(74,144,217,0.08));
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
}

/* CTA Section Enhanced */
.cta-section {
  background: linear-gradient(135deg, #27577C 0%, #3A6787 50%, #27577C 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.btn-cta {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 30px;
  padding: 12px 32px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-cta:hover {
  background: #fff;
  color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* Rank Bar Enhanced */
.rank-bar {
  position: relative;
  overflow: hidden;
}
.rank-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(39,87,124,0.03) 0%, transparent 70%);
  pointer-events: none;
}
.rank-item h3 {
  background: linear-gradient(135deg, var(--primary-blue), #4A90D9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* FAQ Enhanced */
.faq-item {
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.faq-item:hover {
  box-shadow: 0 4px 16px rgba(39,87,124,0.08);
  border-color: rgba(39,87,124,0.2);
}

/* Global Button Upgrade */
.btn-primary, .btn-submit {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #3a7bb5 100%);
  box-shadow: 0 4px 12px rgba(39,87,124,0.25);
  transition: all 0.3s ease;
  border-radius: 8px;
}
.btn-primary:hover, .btn-submit:hover {
  background: #204861;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39,87,124,0.35);
}
.btn-navy {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #3a7bb5 100%);
  box-shadow: 0 2px 8px rgba(39,87,124,0.2);
  transition: all 0.3s ease;
}
.btn-navy:hover {
  background: #204861;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(39,87,124,0.3);
}

/* Decorative Floating Elements */
.decoration-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.decoration-orb-1 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(39,87,124,0.06) 0%, transparent 70%);
  top: 20%;
  right: -50px;
  animation: floatUp 12s ease-in-out infinite;
}
.decoration-orb-2 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(74,144,217,0.05) 0%, transparent 70%);
  bottom: 10%;
  left: -30px;
  animation: floatUp 15s ease-in-out infinite reverse;
}

/* Join Hero Enhanced */
.join-hero {
  background: linear-gradient(135deg, #27577C 0%, #3A6787 50%, #27577C 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
  position: relative;
  overflow: hidden;
}
.join-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
.join-hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}

/* Trust Bar Enhanced */
.trust-bar {
  position: relative;
  overflow: hidden;
}
.trust-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(39,87,124,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* Waterfall items enhanced */
.waterfall-item {
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.waterfall-item:hover {
  box-shadow: 0 16px 40px rgba(39,87,124,0.1);
}

/* Advantage grid enhanced (Join page) */
.advantage-item {
  transition: all 0.4s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.advantage-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(39,87,124,0.1);
  border-color: rgba(39,87,124,0.2);
}

/* Scroll-triggered animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section titles enhancement */
.section-title h2 {
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), #4A90D9);
  border-radius: 2px;
}

/* Footer enhanced */
.footer {
  background: linear-gradient(180deg, #fff 0%, #F2F7FA 100%);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
}

/* Back to top enhanced */
.back-to-top {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(39,87,124,0.15);
}

/* Nav enhancement */
.nav {
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.nav.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Case cards enhanced */
.case-card {
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(39,87,124,0.12);
  border-color: rgba(39,87,124,0.2);
}

/* Contact page enhanced */
.contact-info-item .icon {
  background: linear-gradient(135deg, rgba(39,87,124,0.06), rgba(74,144,217,0.06));
  transition: all 0.3s ease;
}
.contact-info-item:hover .icon {
  background: linear-gradient(135deg, rgba(39,87,124,0.12), rgba(74,144,217,0.12));
  transform: scale(1.05);
}

/* Course preview cards enhanced */
.course-preview-card {
  transition: all 0.4s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.course-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(39,87,124,0.1);
}

/* About philosophy cards enhanced */
.about-philosophy-card {
  transition: all 0.4s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.about-philosophy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(39,87,124,0.1);
}

/* Smooth gradient borders on focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(39,87,124,0.08);
}

/* Tag buttons enhanced */
.tag-btn {
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tag-btn.active-tag {
  background: linear-gradient(135deg, var(--primary-blue), #3a7bb5);
  box-shadow: 0 4px 12px rgba(39,87,124,0.25);
}

/* Process step enhanced */
.process-step .step-num {
  box-shadow: 0 4px 12px rgba(39,87,124,0.25);
}



/* ===== 查找体验中心 ===== */
#page-stores .province-btn {
  padding: 6px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}
#page-stores .province-btn:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}
#page-stores .province-btn.active-province {
  background: var(--primary-blue);
  color: #fff;
  border-color: var(--primary-blue);
}
#page-stores .store-item {
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s;
}
#page-stores .store-item:hover {
  background: #f7fafc;
}
#page-stores .store-item:last-child {
  border-bottom: none;
}
#page-stores .store-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
#page-stores .store-address {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
#page-stores .store-province-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #ebf4ff;
  color: var(--primary-blue);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  float: right;
}
#page-stores .map-marker {
  cursor: pointer;
  transition: r 0.2s;
}
#page-stores .map-marker:hover {
  r: 7;
}
#page-stores .map-province {
  fill: #f0f4f8;
  stroke: #cbd5e0;
  stroke-width: 1;
  transition: fill 0.2s;
  cursor: pointer;
}
#page-stores .map-province:hover {
  fill: #e2e8f0;
}
#page-stores .map-province.has-stores {
  fill: #e8f0fe;
}
@media (max-width: 768px) {
  #page-stores > div > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}