@charset "UTF-8";
/* 范鸿博AI落地总教练 · 官网样式 (V5) */
:root{
  --bg:#0c0f14; --bg2:#0f131a; --panel:#121822; --panel2:#18202c;
  --text:#e9edf4; --muted:#9aa6b8; --dim:#6f7c8f;
  --gold:#c9a44c; --gold2:#e6c877; --gold-soft:rgba(201,164,76,.12);
  --line:rgba(255,255,255,.08); --line2:rgba(201,164,76,.28);
  --radius:14px; --maxw:1160px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.75; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; border:0}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.gold{color:var(--gold2)}
.center{text-align:center}
.section{padding:78px 0; border-bottom:1px solid var(--line)}
.section--alt{background:linear-gradient(180deg,#0e131b,#0c0f14)}
.section--gold{background:linear-gradient(180deg,rgba(201,164,76,.06),transparent)}
.eyebrow{color:var(--gold); letter-spacing:.24em; font-size:13px; text-transform:uppercase; margin-bottom:12px; font-weight:600}
h1,h2,h3,h4{line-height:1.3; font-weight:700}
h2.sec-title{font-size:32px; margin-bottom:14px}
.sec-sub{color:var(--muted); max-width:760px; margin:0 auto 42px; font-size:16px}
.sec-head{text-align:center; margin-bottom:46px}

/* 顶部导航 */
.site-header{position:sticky; top:0; z-index:100; background:rgba(10,13,18,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:.02em}
.brand .mark{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 28%;background:#fff;border:1.5px solid var(--line2);box-shadow:0 0 0 2px rgba(201,164,76,.16);flex:0 0 auto}
.brand .sub{font-size:12px;color:var(--dim);font-weight:400;letter-spacing:.08em}
.main-nav ul{display:flex; gap:6px; list-style:none; align-items:center}
.main-nav a{display:block; padding:8px 12px; font-size:14.5px; color:var(--muted); border-radius:8px; transition:.2s}
.main-nav a:hover,.main-nav a.active{color:var(--gold2); background:var(--gold-soft)}
.nav-cta{background:linear-gradient(135deg,var(--gold),#a9863a); color:#12141a !important; font-weight:700; padding:9px 16px !important; border-radius:9px}
.nav-cta:hover{filter:brightness(1.08); background:linear-gradient(135deg,var(--gold),#a9863a) !important}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:6px 11px; font-size:20px; cursor:pointer}

/* Hero */
.hero{padding:72px 0 60px; background:
  radial-gradient(900px 420px at 78% 8%, rgba(201,164,76,.14), transparent 60%),
  radial-gradient(700px 380px at 12% 90%, rgba(70,110,200,.10), transparent 60%),
  linear-gradient(180deg,#0d1118,#0b0e13);}
.hero-grid{display:grid; grid-template-columns:1.25fr .95fr; gap:52px; align-items:center}
.hero h1{font-size:44px; letter-spacing:-.01em; margin-bottom:8px}
.hero .role{color:var(--gold2); font-weight:600; font-size:18px; margin-bottom:18px}
.hero .lead{color:var(--muted); font-size:17.5px; margin-bottom:20px; max-width:620px}
.hero .kicker{display:inline-block; border:1px solid var(--line2); color:var(--gold2); font-size:13px; padding:5px 13px; border-radius:99px; margin-bottom:22px; letter-spacing:.04em}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.btn{display:inline-block; padding:13px 26px; border-radius:10px; font-weight:700; font-size:15.5px; transition:.2s; cursor:pointer; border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg,var(--gold),#a9863a); color:#12141a}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2); color:var(--gold2)}
.btn-ghost:hover{background:var(--gold-soft)}
.hero-stats{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap}
.hero-stats .st b{display:block; font-size:30px; color:var(--gold2); line-height:1.1}
.hero-stats .st span{font-size:13.5px; color:var(--dim)}
.hero-photo{position:relative}
.hero-photo img{border-radius:18px; box-shadow:var(--shadow); border:1px solid var(--line); object-fit:cover; width:100%; aspect-ratio:1/1}
.hero-photo .tag{position:absolute; left:16px; bottom:16px; background:rgba(12,15,20,.82); border:1px solid var(--line2); border-radius:10px; padding:9px 14px; font-size:13px; color:var(--gold2); backdrop-filter:blur(6px)}

/* 通用卡片 */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,var(--panel),#0f141c); border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:.25s}
.card:hover{border-color:var(--line2); transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.35)}
.card h3{font-size:19px; margin-bottom:10px}
.card p{color:var(--muted); font-size:15px}
.card .ico{width:46px;height:46px;border-radius:11px;background:var(--gold-soft);border:1px solid var(--line2);display:grid;place-items:center;margin-bottom:16px;font-size:22px}
.card ul{list-style:none; margin-top:12px}
.card li{color:var(--muted); font-size:14.5px; padding:5px 0 5px 20px; position:relative}
.card li::before{content:""; position:absolute; left:2px; top:13px; width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* 证书区 */
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.cert{background:linear-gradient(180deg,var(--panel2),#0f141c); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.25s; cursor:zoom-in}
.cert:hover{border-color:var(--line2); transform:translateY(-4px); box-shadow:var(--shadow)}
.cert .thumb{aspect-ratio:4/3; background:#eef1f5; display:grid; place-items:center; overflow:hidden}
.cert .thumb img{width:100%; height:100%; object-fit:contain}
.cert .meta{padding:16px 16px 18px}
.cert .badge{display:inline-block; font-size:11.5px; color:#12141a; background:var(--gold); padding:2px 9px; border-radius:99px; font-weight:700; margin-bottom:9px}
.cert .meta h4{font-size:15px; margin-bottom:6px}
.cert .meta p{font-size:13px; color:var(--dim); line-height:1.6}
.cert .verify{display:inline-block; margin-top:9px; font-size:12.5px; color:var(--gold2); border-bottom:1px dashed var(--line2)}

/* 服务/价格 */
.price-card{position:relative; background:linear-gradient(180deg,var(--panel),#0f141c); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:.25s}
.price-card:hover{border-color:var(--line2); transform:translateY(-3px)}
.price-card.hot{border-color:var(--line2); box-shadow:0 0 0 1px var(--line2), 0 16px 40px rgba(0,0,0,.4)}
.price-card .flag{position:absolute; top:-11px; left:26px; background:linear-gradient(135deg,var(--gold),#a9863a); color:#12141a; font-size:12px; font-weight:800; padding:3px 12px; border-radius:99px}
.price-card .tagline{color:var(--gold2); font-size:13px; margin-bottom:8px; letter-spacing:.04em}
.price-card h3{font-size:21px; margin-bottom:6px}
.price-card .price{font-size:34px; font-weight:800; color:var(--gold2); margin:12px 0 4px}
.price-card .price small{font-size:15px; color:var(--muted); font-weight:400}
.price-card .who{color:var(--dim); font-size:13.5px; margin-bottom:16px}
.price-card ul{list-style:none; border-top:1px solid var(--line); padding-top:16px; margin-top:6px}
.price-card li{font-size:14.5px; color:var(--muted); padding:6px 0 6px 20px; position:relative}
.price-card li::before{content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:700}
.price-card .grp{margin-top:14px; font-size:12.5px; color:var(--dim); border-top:1px dashed var(--line); padding-top:12px}

/* 图片墙 */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gallery figure{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.gallery img{width:100%; height:230px; object-fit:cover; transition:.4s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 14px 12px; font-size:13px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.78))}
.ig{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.ig img{width:100%; height:260px; object-fit:cover; border-radius:12px; border:1px solid var(--line); cursor:zoom-in}
.ig--sm img{height:190px}

/* FAQ */
.faq{max-width:860px; margin:0 auto}
.faq details{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden}
.faq summary{cursor:pointer; padding:18px 22px; font-weight:600; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold); font-size:22px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--gold2)}
.faq .ans{padding:0 22px 20px; color:var(--muted); font-size:15px}

/* 信任条 */
.trust{display:flex; justify-content:center; gap:44px; flex-wrap:wrap; padding:26px 0}
.trust .t{text-align:center}
.trust .t b{display:block; font-size:26px; color:var(--gold2)}
.trust .t span{font-size:13px; color:var(--dim)}

/* CTA */
.cta-box{background:linear-gradient(135deg,#161d29,#0e131b); border:1px solid var(--line2); border-radius:20px; padding:52px 40px; text-align:center}
.cta-box h2{font-size:30px; margin-bottom:12px}
.cta-box p{color:var(--muted); max-width:640px; margin:0 auto 26px}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.contact-info{display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.contact-info .ci{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 26px; text-align:center; min-width:200px}
.contact-info .ci b{display:block; color:var(--gold2); font-size:18px; margin-top:6px; letter-spacing:.02em}
.contact-info .ci span{font-size:13px; color:var(--dim)}

/* 页脚 */
.site-footer{background:#080a0e; border-top:1px solid var(--line); padding:52px 0 34px; font-size:14px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:36px}
.foot-grid h4{font-size:15px; margin-bottom:14px; color:var(--gold2)}
.foot-grid p,.foot-grid li{color:var(--dim); font-size:13.5px; line-height:1.9}
.foot-grid ul{list-style:none}
.foot-grid a:hover{color:var(--gold2)}
.foot-bottom{border-top:1px solid var(--line); padding-top:22px; text-align:center; color:var(--dim); font-size:13px}
.foot-bottom .beian{color:var(--muted)}
.foot-bottom .beian a{color:var(--muted)}
.foot-bottom .beian a:hover{color:var(--gold2)}

/* 灯箱 */
.lightbox{position:fixed; inset:0; background:rgba(5,7,10,.94); display:none; place-items:center; z-index:999; padding:26px; cursor:zoom-out}
.lightbox.on{display:grid}
.lightbox img{max-width:94vw; max-height:90vh; border-radius:10px; box-shadow:var(--shadow)}

/* 内容页 */
.page-hero{padding:66px 0 44px; background:linear-gradient(180deg,#0e131b,#0c0f14); border-bottom:1px solid var(--line); text-align:center}
.page-hero h1{font-size:36px; margin-bottom:12px}
.page-hero p{color:var(--muted); max-width:720px; margin:0 auto}
.prose{max-width:820px; margin:0 auto}
.prose h2{font-size:25px; margin:42px 0 14px; color:var(--gold2)}
.prose h3{font-size:19px; margin:28px 0 10px}
.prose p{color:var(--muted); margin-bottom:16px}
.prose ul{color:var(--muted); margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.hl{background:var(--gold-soft); border-left:3px solid var(--gold); padding:16px 20px; border-radius:0 10px 10px 0; color:var(--text); margin:22px 0}
.crumbs{font-size:13px; color:var(--dim); margin-bottom:16px}
.crumbs a:hover{color:var(--gold2)}
.tagrow{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.tagrow span{border:1px solid var(--line2); color:var(--gold2); font-size:13px; padding:5px 14px; border-radius:99px}

/* 文章列表 */
.art-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.art-item{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; transition:.2s; display:block}
.art-item:hover{border-color:var(--line2); transform:translateY(-3px)}
.art-item .no{color:var(--gold); font-size:12.5px; letter-spacing:.1em}
.art-item h3{font-size:16.5px; margin:8px 0 8px; line-height:1.5}
.art-item p{color:var(--dim); font-size:13.5px}

/* 响应式 */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:34px}
  .hero-photo{max-width:420px; margin:0 auto}
  .hero h1{font-size:34px}
  .g4,.cert-grid{grid-template-columns:repeat(2,1fr)}
  .g3,.art-list{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-toggle{display:block}
  .main-nav{position:absolute; top:66px; left:0; right:0; background:rgba(10,13,18,.98); border-bottom:1px solid var(--line); display:none}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column; gap:0; padding:10px 16px 18px}
  .main-nav a{padding:12px 8px; border-radius:8px}
  .section{padding:56px 0}
  h2.sec-title{font-size:25px}
  .hero h1{font-size:29px}
  .hero-stats{gap:22px}
  .hero-stats .st b{font-size:24px}
  .g2,.g3,.g4,.cert-grid,.gallery,.ig,.art-list{grid-template-columns:1fr}
  .gallery img{height:210px}
  .ig img{height:230px}
  .cta-box{padding:36px 22px}
  .foot-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:27px}
}