/* ========================================
   赵夏利 — 实战派AI赋能教练 个人官网 v4.0
   设计：优雅紫罗兰 × AI神经底纹 × 极简几何
   ======================================== */

:root {
  /* === 紫色优雅主色 === */
  --primary: #3A2858;         /* 深沉紫罗兰 — 标题文字 */
  --primary-dark: #261C3D;    /* 暗紫 — 深色区块 */
  --primary-light: #514074;   /* 中紫 — 过渡色 */
  --accent: #7B5EE7;          /* 电光紫 — 主强调按钮 */
  --accent-dark: #6848D5;     /* 深紫 — 渐变 */
  --accent-light: #A38FEF;    /* 浅紫 — 弱化强调 */
  --accent-bg: #F2EEFB;       /* 薰衣草淡紫 — 标签/accent底色 */
  /* === 金色点缀（保持） === */
  --gold: #C4963E;
  --gold-light: #D4B06A;
  --gold-bg: #FDF8F0;
  /* === 辅助色 === */
  --teal: #0EA5E9;
  --teal-bg: #F0F9FF;
  --green: #10B981;
  --green-bg: #ECFDF5;
  --purple: #9B6DF7;
  --purple-bg: #F5F3FF;
  /* === 背景 === */
  --bg: #FAF9FC;              /* 暖白底铺紫 */
  --bg-card: #FFFFFF;
  --bg-dark: #3A2858;
  --text: #1E293B;
  --text-sub: #475569;
  --text-light: #94A3B8;
  --text-white: #FFFFFF;
  --border: #E8E4F2;          /* 紫灰边框 */
  --border-hover: #D0CAE2;
  --shadow-sm: 0 1px 3px rgba(58,40,88,.04);
  --shadow: 0 4px 20px rgba(58,40,88,.04);
  --shadow-lg: 0 12px 40px rgba(58,40,88,.06);
  --shadow-accent: 0 8px 30px rgba(123,94,231,.15);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: all .25s ease;
  --max-w: 1200px;
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.75;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  position:relative;overflow-x:hidden;
}

/* === AI科技感底纹 === */
/* Layer 1: 精密网格线 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(123,94,231,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,94,231,.05) 1px,transparent 1px);
  background-size:56px 56px;
}
/* Layer 2: AI神经网络散点 + 连接线 */
body{
  background:
    /* 散点图案 — 模拟神经元节点 */
    radial-gradient(circle at 15% 25%, rgba(123,94,231,.06) 1.5px, transparent 1.5px),
    radial-gradient(circle at 72% 18%, rgba(123,94,231,.04) 1.2px, transparent 1.2px),
    radial-gradient(circle at 45% 62%, rgba(123,94,231,.05) 1.8px, transparent 1.8px),
    radial-gradient(circle at 88% 55%, rgba(123,94,231,.04) 1.3px, transparent 1.3px),
    radial-gradient(circle at 22% 78%, rgba(123,94,231,.05) 1.6px, transparent 1.6px),
    radial-gradient(circle at 65% 85%, rgba(123,94,231,.04) 1.4px, transparent 1.4px),
    radial-gradient(circle at 35% 42%, rgba(123,94,231,.03) 2px, transparent 2px),
    radial-gradient(circle at 55% 35%, rgba(123,94,231,.04) 1.7px, transparent 1.7px),
    linear-gradient(135deg, transparent 49.8%, rgba(123,94,231,.015) 50%, transparent 50.2%) 0 0/120px 120px,
    var(--bg);
}
/* Layer 3: 大型AI英文水印 — 比之前更可见 */
body::after{
  content:'AI · ARTIFICIAL INTELLIGENCE · NEURAL NETWORK · DEEP LEARNING · MACHINE LEARNING · AI AGENT · TRANSFORMER · LLM';
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);
  font-size:6.5rem;font-weight:900;letter-spacing:.08em;white-space:nowrap;
  color:rgba(123,94,231,.04);z-index:0;pointer-events:none;
  font-family:system-ui,sans-serif;text-transform:uppercase;
}

a{text-decoration:none;color:inherit;position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* === Layout === */
.container{max-width:var(--max-w);margin:0 auto;padding:0 28px;position:relative;z-index:1}
.section{padding:100px 0;position:relative;z-index:1}
.section-head{text-align:center;margin-bottom:64px}
.section-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:var(--accent);background:var(--accent-bg);
  padding:5px 14px;border-radius:20px;margin-bottom:20px;
  text-transform:uppercase;
}
.section-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}
.section-title{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;color:var(--primary)}
.section-subtitle{font-size:1.05rem;color:var(--text-sub);max-width:540px;margin:0 auto}

/* === Navbar === */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,.85);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;transition:var(--transition);
}
.navbar.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.nav-container{max-width:var(--max-w);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--primary);display:flex;align-items:center;gap:8px}
.nav-logo .accent{color:var(--accent)}
.nav-link-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:800}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--text-sub);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-cta{background:var(--accent);color:#fff!important;padding:10px 22px;border-radius:24px;font-weight:600!important;font-size:.85rem!important;box-shadow:0 4px 16px rgba(123,94,231,.2);transition:var(--transition)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(123,94,231,.3);color:#fff!important}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{width:22px;height:2px;background:var(--primary);border-radius:2px;transition:.3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* === Hero === */
.hero{
  min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;
  padding-top:68px;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url('../images/photos/hero-portrait.jpg') center top / cover no-repeat;
  opacity:.15;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(250,249,252,.4) 0%,rgba(250,249,252,.7) 50%,var(--bg) 100%);
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(rgba(123,94,231,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,94,231,.06) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 80%);
}
.hero-ai-text{
  position:absolute;font-size:.7rem;font-weight:700;letter-spacing:.2em;
  color:rgba(123,94,231,.18);white-space:nowrap;pointer-events:none;
  z-index:1;font-family:system-ui,sans-serif;text-transform:uppercase;
  animation:floatText 12s ease-in-out infinite;
}
.hero-ai-text.t1{top:16%;left:7%;animation-delay:0s}
.hero-ai-text.t2{top:26%;right:8%;animation-delay:-3s}
.hero-ai-text.t3{bottom:22%;left:10%;animation-delay:-6s}
.hero-ai-text.t4{bottom:32%;right:7%;animation-delay:-9s}
@keyframes floatText{0%,100%{transform:translateY(0);opacity:.18}50%{transform:translateY(-12px);opacity:.06}}

/* Floating orbs */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;filter:blur(60px);opacity:.35}
.hero-orb.o1{width:320px;height:320px;background:radial-gradient(circle,rgba(123,94,231,.4),transparent 70%);top:8%;left:-5%;animation:orbDrift 12s ease-in-out infinite}
.hero-orb.o2{width:240px;height:240px;background:radial-gradient(circle,rgba(196,150,62,.25),transparent 70%);bottom:15%;right:-3%;animation:orbDrift 14s ease-in-out infinite reverse}
.hero-orb.o3{width:180px;height:180px;background:radial-gradient(circle,rgba(123,94,231,.2),transparent 70%);top:55%;left:40%;animation:orbDrift 16s ease-in-out infinite;animation-delay:-5s}
@keyframes orbDrift{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-20px)}50%{transform:translate(-15px,25px)}75%{transform:translate(-25px,-15px)}}

/* Floating geo shapes */
.hero-geo{position:absolute;pointer-events:none;z-index:1}
.hero-geo svg{display:block}
.geo-ring{
  position:absolute;width:140px;height:140px;top:12%;right:22%;
  border:2px solid rgba(123,94,231,.12);border-radius:50%;
  animation:geoSpin 20s linear infinite;
}
.geo-ring::before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(123,94,231,.25);top:-6px;left:50%;transform:translateX(-50%)}
@keyframes geoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.geo-diamond{
  position:absolute;width:50px;height:50px;bottom:28%;left:8%;
  border:1.5px solid rgba(196,150,62,.15);transform:rotate(45deg);
  animation:geoFloat 8s ease-in-out infinite;
}
.geo-diamond::after{content:'';position:absolute;inset:6px;background:rgba(196,150,62,.08);border-radius:2px}
@keyframes geoFloat{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-15px)}}
.geo-grid-dots{
  position:absolute;width:80px;height:80px;top:50%;right:10%;
  background-image:radial-gradient(circle,rgba(123,94,231,.15) 1.5px,transparent 1.5px);
  background-size:16px 16px;border-radius:8px;
  animation:geoFloat 10s ease-in-out infinite;animation-delay:-4s;
}

.hero-content{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.2fr .8fr;gap:80px;align-items:center;
  max-width:var(--max-w);margin:0 auto;padding:80px 28px;
}
.hero-text{animation:fadeUp .8s ease}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-bg);color:var(--accent);
  padding:8px 18px;border-radius:24px;font-size:.76rem;font-weight:600;margin-bottom:32px;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

.hero h1{margin-bottom:28px;line-height:1.05}
.hero-name{
  display:block;font-size:clamp(3.4rem,7vw,5.6rem);font-weight:900;
  letter-spacing:-.04em;color:var(--primary-dark);margin-bottom:8px;
}
.hero-title{
  display:block;font-size:clamp(1.4rem,2.8vw,2rem);font-weight:600;
  letter-spacing:.02em;
  background:linear-gradient(135deg,var(--accent),#6C5CE7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:1.25rem;color:var(--text-sub);margin-bottom:24px;font-weight:500}
.hero-sub .sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--accent-light);margin:0 10px;vertical-align:middle}
.hero-desc{font-size:1rem;color:var(--text-light);margin-bottom:40px;line-height:1.9}
.hero-desc strong{color:var(--primary);font-weight:600}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;border-radius:28px;font-size:.92rem;font-weight:600;
  cursor:pointer;border:none;transition:var(--transition);white-space:nowrap;
}
.btn svg.icon-sm{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 6px 24px rgba(123,94,231,.25)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(123,94,231,.35)}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-lg{padding:16px 40px;font-size:1rem;border-radius:32px}
.btn-white{background:#fff;color:var(--primary);box-shadow:0 6px 24px rgba(0,0,0,.06)}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.1)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#A87D2E);color:#fff;box-shadow:0 6px 24px rgba(196,150,62,.25)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(196,150,62,.35)}

/* Hero visual */
.hero-visual{display:flex;justify-content:center;position:relative;animation:fadeUp 1s ease .2s}
.hero-photo-frame{
  position:relative;width:380px;height:500px;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 70px rgba(58,40,88,.15),0 0 0 1px rgba(0,0,0,.03);
  background:linear-gradient(180deg,#e8e1f5 0%,#f0ebf8 30%,#f5f2fa 60%,#FAF9FC 100%);
}
.hero-photo-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;opacity:.92;
}
.hero-float-badge{
  position:absolute;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:14px;padding:16px 20px;z-index:3;
  box-shadow:var(--shadow);border:1px solid var(--border);
  animation:floatBadge 5s ease-in-out infinite;
}
.hfb-1{top:40px;left:-25px;animation-delay:0s}
.hfb-2{bottom:60px;right:-20px;animation-delay:-2.5s}
.hero-float-badge .hfb-num{font-size:1.6rem;font-weight:800;line-height:1;color:var(--accent)}
.hero-float-badge .hfb-label{font-size:.7rem;color:var(--text-sub);margin-top:4px}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* === Trust Stats === */
.trust-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:linear-gradient(135deg,#1F1535 0%,var(--primary) 50%,var(--primary-light) 100%);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
}
.trust-stats::before{
  content:'AI · NEURAL · DEEP LEARNING';
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:3rem;font-weight:900;color:rgba(255,255,255,.02);white-space:nowrap;pointer-events:none;
  letter-spacing:.1em;
}
.trust-stats>div{padding:40px 24px;text-align:center;position:relative;z-index:1;border-right:1px solid rgba(255,255,255,.06)}
.trust-stats>div:last-child{border-right:none}
.stat-number{font-size:3.2rem;font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.02em}
.stat-number .plus{font-size:1.8rem;opacity:.6;vertical-align:super}
.stat-label{font-size:.85rem;color:rgba(255,255,255,.6);margin-top:8px;font-weight:500}

/* === Cards (minimal geometric) === */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:32px 28px;transition:var(--transition);position:relative;overflow:hidden;
}
.card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-light),transparent);
  opacity:0;transition:opacity .3s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.card:hover::after{opacity:1}
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:10px;color:var(--primary)}
.card p{font-size:.875rem;color:var(--text-sub);line-height:1.7}

/* === Icon: feature photo thumbnail === */
.icon-box{
  width:calc(100% + 56px);height:130px;margin:-32px -28px 20px -28px;
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--accent-bg),#f5f2fa);
}
.icon-box img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.icon-box::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(58,40,88,.08) 100%);
  pointer-events:none;
}
.card:hover .icon-box img{transform:scale(1.06)}
.icon-box.gold{background:linear-gradient(135deg,#fdf8ee,#f5f2fa)}
.icon-box svg{width:22px;height:22px}
.icon-box img.platform-logo{width:100%;height:100%;object-fit:cover;border-radius:9px}
.icon-box.platform-logo-box{width:100%;height:auto;border:none;background:transparent;padding:0;margin-bottom:16px}
.icon-box.platform-logo-box img.platform-logo{width:100%;height:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}

/* === Tags === */
.tag{display:inline-block;padding:4px 12px;border-radius:10px;font-size:.7rem;font-weight:600;letter-spacing:.03em}
.tag-blue{background:var(--accent-bg);color:var(--accent)}
.tag-gray{background:#F1F5F9;color:var(--text-sub)}
.tag-gold{background:var(--gold-bg);color:var(--gold)}
.tag-teal{background:var(--teal-bg);color:var(--teal)}
.tag-green{background:var(--green-bg);color:var(--green)}

/* === Stats Bar (minimal) === */
.stats-icon-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-icon-item{padding:24px 12px}
.stat-icon-dot{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;border:1.5px solid var(--border);
  background:#fff;color:var(--accent);transition:var(--transition);
}
.stat-icon-dot svg{width:20px;height:20px}
.stat-icon-item:hover .stat-icon-dot{border-color:var(--accent-light);box-shadow:0 0 0 4px rgba(123,94,231,.05)}
.stat-icon-item .si-num{font-size:2.6rem;font-weight:900;color:var(--primary);line-height:1.1;letter-spacing:-.02em}
.stat-icon-item .si-label{font-size:.82rem;color:var(--text-sub);margin-top:6px}

/* === Grid Systems === */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* === Certificate Grid === */
.cert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.cert-item{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;position:relative;
}
.cert-item::after{
  content:'+';font-family:system-ui,sans-serif;font-weight:300;
  position:absolute;top:10px;right:12px;font-size:1rem;color:#fff;
  background:rgba(0,0,0,.4);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;
}
.cert-item:hover::after{opacity:1}
.cert-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--border);transition:transform .4s ease}
.cert-item:hover{box-shadow:var(--shadow-lg);border-color:var(--accent-light)}
.cert-item:hover img{transform:scale(1.04)}
.cert-caption{padding:14px;font-size:.85rem;font-weight:500;color:var(--primary);text-align:center;line-height:1.5}

/* === Course Tabs === */
.course-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:48px;flex-wrap:wrap}
.course-tab{
  padding:13px 30px;border-radius:28px;font-size:.9rem;font-weight:600;
  background:var(--bg-card);color:var(--text-sub);
  border:1.5px solid var(--border);cursor:pointer;transition:var(--transition);
}
.course-tab:hover{border-color:var(--border-hover);color:var(--primary)}
.course-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-color:transparent;box-shadow:var(--shadow-accent)}
.course-panel{display:none}
.course-panel.active{display:block}
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Course Card */
.course-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;
}
.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.course-card-header{padding:24px 26px 16px;position:relative;overflow:hidden}
.course-card-header::after{content:'';position:absolute;top:-25px;right:-25px;width:80px;height:80px;border-radius:50%;opacity:.05}
.course-card-header.accent{background:linear-gradient(135deg,var(--accent-bg),#F8FAFF)}
.course-card-header.accent::after{background:var(--accent)}
.course-card-header.gold{background:linear-gradient(135deg,var(--gold-bg),#FFFCF5)}
.course-card-header.gold::after{background:var(--gold)}
.course-card-header.teal{background:linear-gradient(135deg,var(--teal-bg),#F5FAFF)}
.course-card-header.teal::after{background:var(--teal)}
.course-card-header.purple{background:linear-gradient(135deg,var(--purple-bg),#FAF8FF)}
.course-card-header.purple::after{background:var(--purple)}
.course-card-header.green{background:linear-gradient(135deg,var(--green-bg),#F5FFFA)}
.course-card-header.green::after{background:var(--green)}
.course-card-num{font-size:.68rem;font-weight:800;letter-spacing:.08em;margin-bottom:6px;opacity:.45;text-transform:uppercase}
.course-card-header h3{font-size:1.05rem;font-weight:700;color:var(--primary);line-height:1.4;margin-bottom:10px;position:relative}
.course-meta{display:flex;gap:18px;flex-wrap:wrap}
.course-meta span{font-size:.76rem;color:var(--text-sub);display:flex;align-items:center;gap:5px}
.course-meta svg.icon-xs{width:14px;height:14px;flex-shrink:0}
.course-card-body{padding:16px 26px 22px;flex:1}
.course-highlights li{font-size:.85rem;color:var(--text-sub);padding:7px 0 7px 20px;position:relative;line-height:1.65;border-bottom:1px dashed var(--border)}
.course-highlights li:last-child{border-bottom:none}
.course-highlights li::before{content:'';position:absolute;left:2px;top:13px;width:5px;height:5px;border-radius:50%}

/* === Client Grid === */
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.client-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;transition:var(--transition);position:relative;overflow:hidden}
.client-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:.15}
.client-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.client-card:hover::before{opacity:.35}
.client-card h4{font-size:.88rem;font-weight:700;margin-bottom:20px;color:var(--primary);display:flex;align-items:center;gap:10px}
.client-card h4 .cat-icon{width:36px;height:36px;border-radius:8px;object-fit:cover;box-shadow:0 2px 8px rgba(58,40,88,.06);background:#fff}
.client-card ul{display:flex;flex-wrap:wrap;gap:6px}
.client-card li{font-size:.76rem;color:var(--text-sub);background:var(--bg);padding:6px 14px;border-radius:8px;border:1px solid var(--border);transition:var(--transition)}
.client-card:hover li{background:#fff}
.client-card li:hover{color:var(--accent);border-color:var(--accent-light);background:var(--accent-bg)}

/* === Photo Grid === */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.photo-item{border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;border:1px solid var(--border);transition:var(--transition);background:var(--bg)}
.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.photo-item:hover{box-shadow:var(--shadow-lg);border-color:var(--accent-light)}
.photo-item:hover img{transform:scale(1.06)}
.photo-caption{position:absolute;bottom:0;left:0;right:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:.76rem;font-weight:500;opacity:0;transition:opacity .3s}
.photo-item:hover .photo-caption{opacity:1}

/* Homepage Photo Gallery */
.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photo-gallery-item{border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;border:2px solid var(--border);transition:var(--transition);background:var(--bg)}
.photo-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.photo-gallery-item:hover{box-shadow:var(--shadow-lg);border-color:var(--accent);transform:translateY(-4px)}
.photo-gallery-item:hover img{transform:scale(1.08)}
.photo-gallery-overlay{position:absolute;bottom:0;left:0;right:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(31,21,53,.85));color:#fff;font-size:.88rem;font-weight:600;opacity:0;transform:translateY(8px);transition:all .35s ease}
.photo-gallery-item:hover .photo-gallery-overlay{opacity:1;transform:translateY(0)}

/* === Testimonials === */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.testimonial-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:36px 32px;position:relative;overflow:hidden;transition:var(--transition)}
.testimonial-card::before{content:'\201C';position:absolute;top:-10px;right:24px;font-size:6rem;color:var(--accent-bg);font-family:Georgia,serif;line-height:1;pointer-events:none}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.testimonial-card.z-highlight{border:2px solid var(--accent-light);background:linear-gradient(135deg,#fff 0%,var(--accent-bg) 100%)}
.testimonial-quote-icon{color:var(--accent-light);margin-bottom:12px;opacity:.5}
.testimonial-quote-icon svg{width:24px;height:24px}
.testimonial-stars{display:flex;gap:3px;margin-bottom:18px}
.testimonial-stars svg{width:20px;height:20px;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.testimonial-text{font-size:.92rem;color:var(--text-sub);line-height:1.9;margin-bottom:24px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--border)}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-dark));flex-shrink:0;letter-spacing:.03em}
.testimonial-name{font-size:.88rem;font-weight:700;color:var(--primary)}
.testimonial-company{font-size:.74rem;color:var(--text-sub)}

/* === Media Cards === */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.media-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;display:flex;align-items:flex-start;gap:16px;transition:var(--transition);position:relative;overflow:hidden}
.media-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .3s;opacity:.5}
.media-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.media-card:hover::before{transform:scaleY(1)}
.media-icon{
  width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:#fff;border:1px solid var(--border);overflow:hidden;
}
.media-icon img{width:100%;height:100%;object-fit:cover}
.media-card h4{font-size:.9rem;font-weight:700;margin-bottom:4px;color:var(--primary);line-height:1.4}
.media-cover{width:100%;aspect-ratio:16/9;margin:12px 0;overflow:hidden;border-radius:10px;background:var(--bg-light)}
.media-cover-image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.media-card:hover .media-cover-image{transform:scale(1.025)}
.media-meta{font-size:.72rem;color:var(--text-light);margin-bottom:6px}
.media-meta svg.icon-xs{width:14px;height:14px;vertical-align:-2px;flex-shrink:0}
.media-link{font-size:.76rem;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.media-link:hover{text-decoration:underline}

/* === Contact Page === */
.contact-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-info-card{background:linear-gradient(180deg,#1F1535,var(--primary));border-radius:var(--radius-lg);padding:40px 36px;color:#fff;position:relative;overflow:hidden}
.contact-info-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(123,94,231,.14)}
.contact-info-card>*{position:relative;z-index:1}
.contact-info-item{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.contact-info-item:last-child{border-bottom:none}
.contact-info-icon{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-icon svg{width:18px;height:18px;color:var(--accent-light)}
.contact-info-text{font-size:.9rem;line-height:1.5}
.contact-info-text strong{display:block;font-size:.92rem;margin-bottom:2px;color:rgba(255,255,255,.9)}
.contact-info-text a{color:var(--accent-light);font-weight:700}
.contact-qr{text-align:center;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:20px}
.contact-qr img{width:150px;height:150px;border-radius:var(--radius);border:2px solid rgba(255,255,255,.12);margin:0 auto 12px;background:#fff;padding:4px}
.contact-form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 36px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.contact-form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold))}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--primary);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;font-family:var(--font);color:var(--text);background:var(--bg);transition:var(--transition)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,94,231,.08);background:#fff}
.form-group textarea{resize:vertical;min-height:130px}
.form-submit{width:100%}
.form-success{display:none;text-align:center;padding:60px 24px}
.form-success-icon{color:var(--green);margin-bottom:20px}
.form-success-icon svg{width:48px;height:48px}
.form-success h3{font-size:1.3rem;color:var(--primary);margin-bottom:8px}
.form-success p{color:var(--text-sub);font-size:.9rem}

/* === About Page === */
.about-hero,.page-hero{
  background:url('../images/generated/ai-bg.jpg') center/cover no-repeat,linear-gradient(135deg,#1F1535 0%,var(--primary) 60%,var(--primary-light) 100%);
  background-blend-mode:overlay;
  padding:150px 0 70px;text-align:center;position:relative;overflow:hidden;
}
.about-hero::before,.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    /* 神经网络节点散点 */
    radial-gradient(circle at 18% 30%, rgba(163,143,239,.08) 2px, transparent 2px),
    radial-gradient(circle at 78% 45%, rgba(163,143,239,.06) 1.5px, transparent 1.5px),
    radial-gradient(circle at 35% 72%, rgba(163,143,239,.07) 2.5px, transparent 2.5px),
    radial-gradient(circle at 65% 22%, rgba(163,143,239,.05) 1.8px, transparent 1.8px),
    radial-gradient(circle at 52% 58%, rgba(163,143,239,.06) 2px, transparent 2px);
  background-size:48px 48px,48px 48px,280px 180px,320px 200px,240px 160px,300px 220px,260px 180px;
}
.page-hero::after{
  content:'AI · ARTIFICIAL INTELLIGENCE · NEURAL NETWORK · DEEP LEARNING · MACHINE LEARNING · AI AGENT';
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:.64rem;font-weight:700;letter-spacing:.28em;
  color:rgba(255,255,255,.09);white-space:nowrap;pointer-events:none;
}
.about-hero h1,.page-hero h1{font-size:2.6rem;font-weight:900;color:#fff;position:relative;margin-bottom:12px;letter-spacing:-.02em}
.about-hero p,.page-hero p{font-size:1.1rem;color:rgba(255,255,255,.6);position:relative}
.about-intro-row{display:flex;gap:70px;align-items:center;flex-wrap:wrap}
.about-portrait-frame{width:340px;height:440px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 25px 70px rgba(58,40,88,.15);flex-shrink:0;position:relative;background:linear-gradient(180deg,#e8e1f5 0%,#f0ebf8 30%,#f5f2fa 60%,#FAF9FC 100%)}
.about-portrait-frame::after{content:'';position:absolute;inset:0;border:2px solid rgba(123,94,231,.1);border-radius:var(--radius-xl);pointer-events:none}
.about-portrait-frame img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:.92}
.about-text-col{flex:1;min-width:300px}
.about-highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.about-highlight{text-align:center;padding:28px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.about-highlight:hover{box-shadow:var(--shadow);border-color:var(--border-hover)}
.about-highlight .ah-num{font-size:2.4rem;font-weight:900;color:var(--accent);line-height:1.1;letter-spacing:-.02em}
.about-highlight .ah-label{font-size:.82rem;color:var(--text-sub);margin-top:6px}

/* === Section Dividers === */
.section-divider{position:relative;height:60px;overflow:hidden;z-index:1}
.section-divider::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--accent-light),transparent);
}
.section-divider::after{
  content:'';position:absolute;top:calc(50% - 3px);left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.section-divider.wave{height:80px}
.section-divider.wave svg{position:absolute;top:0;left:0;width:100%;height:100%}

/* === Client Logo Wall === */
.client-logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.client-logo-item{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 20px;text-align:center;transition:var(--transition);
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:12px;
  cursor:default;
}
.client-logo-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.client-logo-item:hover::before{transform:scaleX(1)}
.client-logo-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.client-logo-badge{
  width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:900;color:#fff;flex-shrink:0;
  position:relative;letter-spacing:-.02em;
}
.client-logo-badge.energy{background:linear-gradient(135deg,#E74C3C,#C0392B)}
.client-logo-badge.gov{background:linear-gradient(135deg,#2C3E50,#34495E)}
.client-logo-badge.edu{background:linear-gradient(135deg,#2980B9,#1A5276)}
.client-logo-badge.transport{background:linear-gradient(135deg,#8E44AD,#6C3483)}
.client-logo-badge.tech{background:linear-gradient(135deg,#0EA5E9,#0369A1)}
.client-logo-badge.finance{background:linear-gradient(135deg,#C4963E,#A87D2E)}
.client-logo-badge.property{background:linear-gradient(135deg,#16A085,#0E6655)}
.client-logo-badge.consumer{background:linear-gradient(135deg,#E67E22,#D35400)}
.client-logo-badge.other{background:linear-gradient(135deg,#7F8C8D,#566573)}
.client-logo-more{
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;color:var(--text-light);
  padding:0 8px;letter-spacing:.1em;
}
.client-logo-name{font-size:.9rem;font-weight:700;color:var(--primary);line-height:1.3}
.client-logo-sub{font-size:.7rem;color:var(--text-light);margin-top:-4px}

/* Industry Section Header */
.industry-section{margin-bottom:40px}
.industry-section:last-child{margin-bottom:0}
.industry-label{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.industry-label svg{flex-shrink:0}
.industry-label h3{font-size:1rem;font-weight:700;color:var(--primary);letter-spacing:-.01em}
.industry-label .ind-count{font-size:.75rem;color:var(--text-light);font-weight:500}

/* === Course Cover Image === */
.course-cover{width:100%;height:200px;overflow:hidden;position:relative;background:var(--bg)}
.course-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.course-card:hover .course-cover img{transform:scale(1.06)}
.course-cover-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;font-weight:900;color:var(--accent-light);opacity:.3;
  background:linear-gradient(135deg,var(--accent-bg) 0%,#F8F6FE 100%);
}

/* === Photo Spotlight (full-width break) === */
.photo-spotlight{
  grid-column:1/-1;border-radius:var(--radius-lg);overflow:hidden;
  position:relative;aspect-ratio:21/9;border:2px solid var(--border);
  transition:var(--transition);
}
.photo-spotlight img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.photo-spotlight:hover{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.photo-spotlight:hover img{transform:scale(1.03)}
.photo-spotlight-label{
  position:absolute;bottom:20px;left:20px;
  background:rgba(31,21,53,.85);color:#fff;padding:8px 18px;
  border-radius:24px;font-size:.82rem;font-weight:600;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.photo-spotlight::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:80px;
  background:linear-gradient(transparent,rgba(0,0,0,.3));pointer-events:none;
}

/* === Stat Count Animation === */
.trust-stats.counting .stat-number{animation:countPulse .6s ease}
@keyframes countPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.stats-icon-row.counting .si-num{animation:countPulse .6s ease}

/* === CTA Banner === */
.cta-banner{
  background:linear-gradient(135deg,#1F1535 0%,#2A1D42 50%,var(--primary-light) 100%);
  text-align:center;padding:100px 0;position:relative;overflow:hidden;color:#fff;
}
.cta-banner::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(ellipse 50% 40% at 30% 50%,rgba(123,94,231,.12),transparent 60%),
    radial-gradient(ellipse 30% 30% at 70% 30%,rgba(196,150,62,.06),transparent 50%),
    /* AI节点散点 */
    radial-gradient(circle at 15% 70%, rgba(163,143,239,.06) 2px, transparent 2px),
    radial-gradient(circle at 82% 35%, rgba(163,143,239,.05) 1.5px, transparent 1.5px);
}
.cta-banner>*{position:relative;z-index:2}
.cta-banner h2{font-size:2.2rem;font-weight:800;margin-bottom:18px;letter-spacing:-.02em}
.cta-banner p{font-size:1.1rem;color:rgba(255,255,255,.55);margin-bottom:36px;max-width:520px;margin-left:auto;margin-right:auto}

/* === Footer === */
.footer{background:var(--primary-dark);color:rgba(255,255,255,.45);padding:60px 0 30px;position:relative;z-index:1}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.footer-container{max-width:var(--max-w);margin:0 auto;padding:0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-brand h3{font-size:1.1rem;color:#fff;margin-bottom:12px;font-weight:700}
.footer-brand p{font-size:.82rem;line-height:1.8;color:rgba(255,255,255,.4)}
.footer-links h4{font-size:.82rem;color:#fff;margin-bottom:16px;font-weight:600;letter-spacing:.04em}
.footer-links ul{display:flex;flex-direction:column;gap:10px}
.footer-links li{font-size:.82rem;color:rgba(255,255,255,.4);transition:color .2s}
.footer-links a:hover{color:var(--accent-light)}
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);font-size:.78rem;color:rgba(255,255,255,.25)}

/* === Floating Contact & Music === */
.floating-contact{position:fixed;bottom:30px;right:30px;z-index:500}
.floating-tooltip{position:absolute;bottom:70px;right:0;background:var(--primary);color:#fff;padding:8px 16px;border-radius:8px;font-size:.75rem;white-space:nowrap;opacity:0;transform:translateY(10px);transition:var(--transition);pointer-events:none}
.floating-contact:hover .floating-tooltip{opacity:1;transform:translateY(0)}
.floating-btn{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#6C5CE7);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:1.3rem;cursor:pointer;box-shadow:0 6px 24px rgba(123,94,231,.3);transition:var(--transition)}
.floating-btn:hover{transform:scale(1.08);box-shadow:0 10px 32px rgba(123,94,231,.4)}
.floating-btn svg{width:22px;height:22px}

.music-toggle{
  position:fixed;bottom:30px;left:30px;z-index:500;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--accent);cursor:pointer;
  box-shadow:var(--shadow-sm);transition:var(--transition);
}
.music-toggle:hover{transform:scale(1.08);box-shadow:var(--shadow)}
.music-toggle.playing{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,94,231,.1)}
.music-toggle .music-ripple{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);opacity:0}
.music-toggle.playing .music-ripple{animation:ripple 2s ease-out infinite}
@keyframes ripple{0%{opacity:.4;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.music-toggle .eq-bars{display:none;gap:2px;align-items:flex-end;height:14px}
.music-toggle.playing .eq-bars{display:flex}
.music-toggle.playing .music-icon-default{display:none}
.eq-bars span{width:3px;background:var(--accent);border-radius:1px;animation:eq .8s ease-in-out infinite}
.eq-bars span:nth-child(1){height:6px;animation-delay:0s}
.eq-bars span:nth-child(2){height:10px;animation-delay:.15s}
.eq-bars span:nth-child(3){height:8px;animation-delay:.3s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* === Modal === */
.modal-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.5);align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-content{background:var(--bg-card);border-radius:var(--radius-lg);padding:36px;text-align:center;max-width:380px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.modal-content h3{font-size:1.2rem;font-weight:700;color:var(--primary);margin-bottom:6px}
.modal-subtitle{font-size:.85rem;color:var(--text-sub);margin-bottom:20px}
.modal-qrcode{width:180px;height:180px;margin:0 auto 16px}
.modal-phone{font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:16px}
.modal-close{background:var(--bg);border:1px solid var(--border);padding:10px 32px;border-radius:24px;font-size:.85rem;cursor:pointer;color:var(--text-sub);transition:var(--transition)}
.modal-close:hover{background:var(--border);color:var(--primary)}

/* === FAQs === */
.faq-list{max-width:780px;margin:0 auto}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:var(--transition)}
.faq-item:hover{border-color:var(--border-hover)}
.faq-question{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;color:var(--primary);font-size:.95rem;user-select:none}
.faq-question::after{content:'+';font-size:1.3rem;color:var(--accent);font-weight:300;transition:transform .3s}
.faq-item.open .faq-question::after{content:'\2013';transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-answer{max-height:300px}
.faq-answer p{padding:0 24px 20px;font-size:.88rem;color:var(--text-sub);line-height:1.8}

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

/* === Backgrounds === */
.bg-white{background:#fff}
.bg-light{background:var(--bg)}
.bg-accent-light{background:var(--accent-bg)}
.bg-gradient-light{background:linear-gradient(180deg,#F4F0FC 0%,#FAF9FC 40%,#fff 100%)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;gap:48px;text-align:center;padding:40px 24px}
  .hero-visual{order:-1}
  .hero-photo-frame{width:300px;height:400px;margin:0 auto}
  .hero-name{font-size:clamp(2.8rem,8vw,4rem)}
  .hero-title{font-size:clamp(1.25rem,4vw,1.7rem)}
  .hero-actions{justify-content:center}
  .hero-float-badge{display:none}
  .trust-stats,.stats-icon-row{grid-template-columns:repeat(2,1fr)}
  .trust-stats>div:nth-child(2){border-right:none}
  .section{padding:80px 0}
  .section-title{font-size:1.85rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .contact-page-grid{grid-template-columns:1fr;gap:36px}
  .about-intro-row{flex-direction:column;gap:40px;text-align:center}
  .about-portrait-frame{margin:0 auto;width:260px;height:340px}
  .about-highlight-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .course-grid{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .cert-grid{grid-template-columns:repeat(3,1fr)}
  .photo-gallery{grid-template-columns:repeat(2,1fr)}
  .client-grid,.client-logo-wall,.testimonial-grid,.media-grid{grid-template-columns:repeat(2,1fr)}
  .photo-spotlight{aspect-ratio:16/9}
  .hero-orb.o1{width:200px;height:200px}
  .hero-orb.o2{width:160px;height:160px}
  .geo-ring,.geo-diamond,.geo-grid-dots{display:none}
}

@media(max-width:768px){
  .nav-links{
    position:fixed;top:68px;left:0;right:0;flex-direction:column;
    background:rgba(255,255,255,.96);backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    padding:24px;gap:16px;border-bottom:1px solid var(--border);
    transform:translateY(-120%);transition:transform .3s ease;
    box-shadow:0 8px 32px rgba(0,0,0,.04);
  }
  .nav-links.open{transform:translateY(0)}
  .hamburger{display:flex}
  .hero-name{font-size:clamp(2.4rem,8vw,3.4rem)}
  .hero-title{font-size:clamp(1.15rem,4vw,1.5rem)}
  .hero-photo-frame{width:250px;height:340px}
  .hero-ai-text{display:none}
  .trust-stats,.stats-icon-row{grid-template-columns:1fr 1fr;gap:0}
  .trust-stats>div{padding:28px 16px}
  .stat-number{font-size:2.4rem}
  .stat-label{font-size:.78rem}
  .cert-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .section{padding:70px 0}
  .section-title{font-size:1.65rem}
  .cta-banner h2{font-size:1.6rem}
  .about-hero h1,.page-hero h1{font-size:2rem}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .course-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .photo-gallery{grid-template-columns:repeat(2,1fr);gap:10px}
  .client-grid,.client-logo-wall,.testimonial-grid,.media-grid{grid-template-columns:1fr}
  .about-highlight-grid{grid-template-columns:repeat(2,1fr)}
  .photo-spotlight{aspect-ratio:4/3}
}

@media(max-width:480px){
  .hero-name{font-size:2.2rem}
  .hero-title{font-size:1.05rem}
  .hero-photo-frame{width:200px;height:280px}
  .icon-box{height:110px}
  .hero-sub{font-size:1rem}
  .hero-badge{font-size:.7rem;padding:6px 14px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .trust-stats{grid-template-columns:1fr}
  .stats-icon-row{grid-template-columns:1fr 1fr;gap:12px}
  .trust-stats>div{border-right:none;border-bottom:1px solid rgba(255,255,255,.06);padding:22px 16px}
  .trust-stats>div:last-child{border-bottom:none}
  .course-tabs{gap:6px}
  .course-tab{padding:10px 18px;font-size:.78rem}
  .cert-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cert-caption{padding:8px;font-size:.7rem}
  .photo-grid{grid-template-columns:1fr 1fr;gap:8px}
  .photo-gallery{grid-template-columns:1fr 1fr;gap:8px}
  .about-highlight-grid{grid-template-columns:1fr}
  .section-title{font-size:1.45rem}
  .section{padding:60px 0}
  .cta-banner{padding:60px 0}
  .cta-banner h2{font-size:1.4rem}
  .about-portrait-frame{width:200px;height:280px}
  .about-hero h1,.page-hero h1{font-size:1.6rem}
  .floating-contact{bottom:20px;right:16px}
  .music-toggle{bottom:20px;left:16px;width:42px;height:42px}
  .modal-content{padding:24px}
  .modal-qrcode{width:140px;height:140px}
  .contact-info-card,.contact-form-card{padding:24px}
}

@media(max-width:380px){
  .hero h1{font-size:1.5rem}
  .photo-grid{grid-template-columns:1fr}
  .photo-gallery{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr}
}