/* =========================================================

   卓为科技 静态展示站 共享样式

   移动端优先 · 商务红灰 · 语义化 · Core Web Vitals 友好

   ========================================================= */

:root{

  /* —— 统一设计令牌（品牌红 + 纯白主体 + 中性灰文字） —— */

  --brand-red:#d6000f;

  --brand-red-dark:#b0000c;

  --navy:#790811;

  --navy-2:#53080d;

  --navy-soft:#b0000c;

  --ink:#16202e;

  --ink-2:#33414f;

  --muted:#66727f;

  --line:#e4e8ec;

  --bg:#ffffff;

  --bg-soft:#fff8f8;

  --bg-dark:#790811;

  --bg-dark-2:#53080d;

  --radius:14px;

  --radius-sm:10px;

  --shadow:0 6px 22px rgba(80,12,18,.08);

  --shadow-lg:0 14px 40px rgba(80,12,18,.14);

  --maxw:1180px;

  --header-h:68px;

  --font:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Hiragino Sans GB",sans-serif;

  /* —— 兼容首页内联样式变量别名（全站统一视觉语言，避免两套命名漂移） —— */

  --red:var(--brand-red);

  --red-dark:var(--brand-red-dark);

  --blue:var(--navy-soft);

  --black:var(--ink);

  --gray:var(--muted);

  --gray-2:#8a8a8a;

  --light:var(--bg-soft);

  --line-2:#dcdcdc;

  --r:var(--radius-sm);

  --r-lg:var(--radius);

  --sh:var(--shadow);

  --sh-2:var(--shadow-lg);

  --f:var(--font);

}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);

  line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}

img{max-width:100%;height:auto;display:block}

a{color:var(--brand-red);text-decoration:none}

a:hover{text-decoration:underline}

h1,h2,h3,h4{line-height:1.3;color:var(--ink);margin:0 0 .5em;font-weight:700}

h1{font-size:clamp(1.7rem,4.4vw,2.7rem)}

h2{font-size:clamp(1.4rem,3.4vw,2rem)}

h3{font-size:clamp(1.1rem,2.4vw,1.35rem)}

p{margin:0 0 1em}

ul,ol{margin:0 0 1em;padding-left:1.25em}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}

.section{padding:54px 0}

.section--soft{background:var(--bg-soft)}

.section--dark{background:var(--bg-dark);color:#e8eef5}

.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}

.section--dark p{color:#c5d2df}

.eyebrow{display:inline-block;color:var(--brand-red);font-weight:700;letter-spacing:.08em;

  font-size:.82rem;text-transform:uppercase;margin-bottom:.4em}

.lead{font-size:1.08rem;color:var(--ink-2)}

.text-center{text-align:center}

.muted{color:var(--muted)}



/* ---------- Buttons ---------- */

.btn{display:inline-flex;align-items:center;gap:.45em;padding:.7em 1.4em;border-radius:999px;

  font-weight:600;border:1.5px solid transparent;cursor:pointer;transition:.18s;font-size:.96rem;

  text-decoration:none}

.btn:hover{text-decoration:none;transform:translateY(-1px)}

.btn--primary{background:var(--brand-red);color:#fff}

.btn--primary:hover{background:var(--brand-red-dark)}

.btn--ghost{border-color:var(--brand-red);color:var(--brand-red);background:transparent}

.btn--ghost:hover{background:var(--brand-red);color:#fff}

.btn--light{background:#fff;color:var(--bg-dark)}

.btn--light:hover{background:#e8eef5}

.btn--block{width:100%;justify-content:center}



/* ---------- Header / Nav ---------- */

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);

  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}

.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}

.brand{display:flex;align-items:center;gap:.55em;color:var(--ink);font-weight:800;font-size:1.12rem}

.brand:hover{text-decoration:none}

.brand-logo{width:34px;height:34px;border-radius:8px}

.brand-name{letter-spacing:.02em}

.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer;padding:.2em .4em}

.main-nav .nav-list{display:flex;gap:.2em;list-style:none;margin:0;padding:0}

.main-nav a{display:block;padding:.55em .85em;border-radius:8px;color:var(--ink-2);font-weight:600;font-size:.95rem}

.main-nav a:hover{background:var(--bg-soft);text-decoration:none;color:var(--brand-red)}

.main-nav a.active{color:var(--brand-red);background:rgba(214,0,15,.08)}



/* ---------- Breadcrumb ---------- */

.breadcrumb{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:.86rem;padding:.55em 0}

.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:0;align-items:center;color:var(--muted)}

.breadcrumb li::after{content:"/";margin-left:.4em;color:#c2cad2}

.breadcrumb li:last-child::after{content:""}

.breadcrumb a{color:var(--muted)}

.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}



/* ---------- Hero / KV ---------- */

.hero{position:relative;color:#fff;background:var(--bg-dark);overflow:hidden}

.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}

.hero__overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(12,28,49,.92),rgba(12,28,49,.55) 60%,rgba(12,28,49,.35))}

.hero__inner{position:relative;padding:84px 0 92px;max-width:760px}

.hero h1{color:#fff;margin-bottom:.4em}

.hero .lead{color:#d7e0ea;font-size:1.15rem}

.hero__cta{display:flex;flex-wrap:wrap;gap:.8em;margin-top:1.6em}

.hero__stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:2.2em}

.hero__stat b{display:block;font-size:1.9rem;color:#fff;line-height:1.1}

.hero__stat span{color:#aebccb;font-size:.88rem}



/* ---------- Section heading ---------- */

.sec-head{text-align:center;max-width:720px;margin:0 auto 2.2em}

.sec-head .eyebrow{margin-bottom:.5em}



/* ---------- Cards grid ---------- */

.grid{display:grid;gap:22px}

.grid--3{grid-template-columns:repeat(3,1fr)}

.grid--2{grid-template-columns:repeat(2,1fr)}

.grid--4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;

  box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column}

.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}

.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft)}

.card__media img{width:100%;height:100%;object-fit:cover}

.card__body{padding:20px;display:flex;flex-direction:column;gap:.5em;flex:1}

.card__tag{display:inline-block;align-self:flex-start;font-size:.74rem;font-weight:700;color:var(--brand-red);

  background:rgba(214,0,15,.1);padding:.25em .7em;border-radius:999px;margin-bottom:.3em}

.card__title{font-size:1.12rem;margin:0}

.card__title a{color:var(--ink)}

.card__excerpt{color:var(--ink-2);font-size:.95rem;flex:1}

.card__more{margin-top:.4em;font-weight:600;font-size:.9rem}



/* service entry (homepage) */

.svc-entry{position:relative;min-height:230px;border-radius:var(--radius);overflow:hidden;color:#fff;

  display:flex;align-items:flex-end;box-shadow:var(--shadow)}

.svc-entry img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:.3s}

.svc-entry:hover img{transform:scale(1.04)}

.svc-entry__body{position:relative;padding:22px}

.svc-entry h3{color:#fff;margin:0 0 .2em}

.svc-entry p{color:#e1e9f1;margin:0;font-size:.92rem}

.svc-entry__no{position:absolute;top:14px;left:18px;font-size:2.2rem;font-weight:800;color:rgba(255,255,255,.22)}



/* advantage list */

.adv{display:flex;gap:1em;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}

.adv__ic{flex:0 0 42px;width:42px;height:42px;border-radius:10px;background:rgba(214,0,15,.1);color:var(--brand-red);

  display:grid;place-items:center;font-weight:800}

.adv h3{margin:0 0 .2em;font-size:1.05rem}

.adv p{margin:0;color:var(--ink-2);font-size:.94rem}



/* stats band */

.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}

.statband .b{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 12px}

.statband b{display:block;font-size:2rem;color:var(--brand-red);line-height:1.1}

.statband span{color:var(--muted);font-size:.9rem}



/* process steps */

.steps{counter-reset:step;display:grid;gap:16px}

.step{display:flex;gap:1em;align-items:flex-start}

.step__no{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--brand-red);color:#fff;

  display:grid;place-items:center;font-weight:800;counter-increment:step}

.step__no::before{content:counter(step,decimal-leading-zero)}

.step h3{margin:0 0 .15em;font-size:1.02rem}

.step p{margin:0;color:var(--ink-2);font-size:.93rem}



/* ---------- Detail page layout ---------- */

.detail-hero{background:var(--bg-dark);color:#fff;padding:60px 0}

.detail-hero h1{color:#fff}

.detail-hero .lead{color:#cdd9e5}

.detail-banner{width:100%;max-width:var(--maxw,1180px);margin:28px auto 0;padding:0 20px}

.detail-banner img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 14px 40px rgba(80,12,18,.16);object-fit:cover;aspect-ratio:1200/520}

@media(max-width:768px){.detail-banner{margin-top:20px;padding:0 16px}.detail-banner img{aspect-ratio:16/10;border-radius:12px}}

.page-main{padding:46px 0}

.prose{max-width:820px}

.prose h2{margin-top:1.6em;border-left:4px solid var(--brand-red);padding-left:.5em}

.prose h3{margin-top:1.2em}

.prose ul li{margin-bottom:.4em}

.callout{background:rgba(214,0,15,.06);border:1px solid rgba(214,0,15,.18);border-radius:var(--radius-sm);

  padding:16px 18px;margin:1.2em 0}

.callout b{color:var(--brand-red)}

.aside{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:22px}

.aside h3{margin-top:0}

.two-col{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start}

@media(max-width:880px){.two-col{grid-template-columns:1fr}}



/* FAQ accordion */

.faq-cat{margin-bottom:2em}

.faq-cat__title{font-size:1.2rem;border-bottom:2px solid var(--brand-red);display:inline-block;padding-bottom:.2em;margin-bottom:1em}

.acc{ border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:.7em;background:#fff;overflow:hidden}

.acc>summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;display:flex;justify-content:space-between;gap:1em;align-items:center}

.acc>summary::-webkit-details-marker{display:none}

.acc>summary::after{content:"+";color:var(--brand-red);font-size:1.3rem;font-weight:700;transition:.2s}

.acc[open]>summary::after{content:"\2013"}

.acc__body{padding:0 18px 16px;color:var(--ink-2);border-top:1px solid var(--line);margin-top:0}

.acc__body p{margin:.8em 0}



/* tags */

.tags{display:flex;flex-wrap:wrap;gap:.5em}

.tag{font-size:.8rem;padding:.3em .8em;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-2)}

.tag--red{background:rgba(214,0,15,.1);border-color:rgba(214,0,15,.2);color:var(--brand-red)}



/* forms */

.field{margin-bottom:1em}

.field label{display:block;font-weight:600;margin-bottom:.35em;font-size:.92rem}

.field input,.field textarea,.field select{width:100%;padding:.7em .8em;border:1px solid var(--line);

  border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--ink)}

.field input:focus,.field textarea:focus{border-color:var(--brand-red);outline:2px solid rgba(214,0,15,.18)}

.form-note{font-size:.86rem;color:var(--muted)}

.form-ok{display:none;background:rgba(34,139,69,.1);border:1px solid rgba(34,139,69,.3);color:#1c7a3e;

  padding:12px 16px;border-radius:var(--radius-sm);margin-top:1em}

.form-ok.show{display:block}



/* contact info block */

.contact-info li{list-style:none;margin-bottom:.8em;display:flex;gap:.6em;align-items:flex-start}

.contact-info .ic{flex:0 0 26px;color:var(--brand-red);font-weight:800}

.map-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);background:var(--bg-soft);

  display:grid;place-items:center;color:var(--muted);text-align:center}



/* timeline */

.timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--brand-red)}

.timeline li{position:relative;padding:0 0 1.4em 18px}

.timeline li::before{content:"";position:absolute;left:-29px;top:4px;width:14px;height:14px;border-radius:50%;

  background:var(--brand-red);border:3px solid #fff;box-shadow:0 0 0 2px var(--brand-red)}

.timeline b{color:var(--brand-red)}



/* honors */

.honors{display:flex;flex-wrap:wrap;gap:14px}

.honor{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;background:#fff;min-width:160px}

.honor b{display:block;color:var(--ink)}

.honor span{font-size:.84rem;color:var(--muted)}



/* ---------- Footer ---------- */

.site-footer{background:var(--bg-dark-2);color:#c5d2df;padding:48px 0 0;margin-top:0}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}

.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.9em}

.site-footer a{color:#c5d2df}

.site-footer a:hover{color:#fff}

.footer-col ul{list-style:none;margin:0;padding:0}

.footer-col li{margin-bottom:.55em;font-size:.92rem}

.footer-brand{display:flex;align-items:center;gap:.5em;color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:.8em}

.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding:16px 0;font-size:.84rem;color:#90a0b2}

.footer-bottom .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

.footer-nap{font-size:.86rem;color:#90a0b2;margin-top:.6em}



/* ---------- 新闻中心 · 统一升级（参考粤财控股新闻中心布局） ---------- */

.news-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;

  padding:6px 0 16px;border-bottom:1px solid var(--line);margin-bottom:26px}

.news-filter{display:flex;flex-wrap:wrap;gap:8px}

.news-filter .pill{display:inline-flex;align-items:center;gap:.4em;padding:.5em 1.1em;border-radius:999px;

  border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:.92rem;font-weight:600;

  cursor:pointer;transition:.18s;font-family:inherit;line-height:1}

.news-filter .pill:hover{border-color:var(--brand-red);color:var(--brand-red)}

.news-filter .pill.active{background:var(--brand-red);border-color:var(--brand-red);color:#fff}

.news-filter .pill .cnt{font-size:.74rem;opacity:.65}



.news-item{animation:newsFade .3s ease both}

@keyframes newsFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}



/* 头条精选 */

.news-featured{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#fff;

  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:32px}

.news-featured__media{position:relative;min-height:320px;overflow:hidden;

  background:linear-gradient(135deg,var(--bg-dark),var(--navy-soft))}

.news-featured__media img{width:100%;height:100%;object-fit:cover;transition:.3s}

.news-featured:hover .news-featured__media img{transform:scale(1.04)}

.news-featured__body{padding:36px 36px;display:flex;flex-direction:column;justify-content:center;gap:.55em}

.news-featured__title{font-size:clamp(1.3rem,2.6vw,1.95rem);margin:.05em 0;line-height:1.35}

.news-featured__title a{color:var(--ink)}

.news-featured__excerpt{color:var(--ink-2);font-size:1rem;margin:0}

.news-featured__more{margin-top:.7em;font-weight:700;color:var(--brand-red);align-self:flex-start}

.news-featured__more:hover{text-decoration:underline}



/* 信息元（分类 · 日期 · 来源） */

.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;color:var(--muted);font-size:.85rem}

.news-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.55;flex:0 0 auto}

.news-meta .cat{color:var(--brand-red);font-weight:700}

.card__date{margin-top:auto;color:var(--muted);font-size:.82rem}



/* 详情页元信息 */

.detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;color:#cdd9e5;font-size:.92rem;margin-top:.7em}

.detail-meta .dot{width:3px;height:3px;border-radius:50%;background:#cdd9e5;opacity:.5;flex:0 0 auto}

.detail-meta .cat{color:#ff9a9e;font-weight:700}



/* 相关阅读 */

.related{list-style:none;margin:0;padding:0}

.related li{padding:.75em 0;border-bottom:1px solid var(--line)}

.related li:last-child{border-bottom:0}

.related a{display:flex;align-items:baseline;gap:.55em;color:var(--ink-2);font-size:.92rem;line-height:1.5}

.related a:hover{color:var(--brand-red)}

.related .r-cat{color:var(--brand-red);font-weight:700;flex:0 0 auto}

.related .r-date{color:var(--muted);font-size:.8rem;margin-left:auto;white-space:nowrap;flex:0 0 auto}



.pager{display:flex;justify-content:center;margin-top:34px}

.news-empty{text-align:center;padding:30px 0;color:var(--muted)}



/* ---------- Responsive ---------- */

@media(max-width:980px){

  .grid--4{grid-template-columns:repeat(2,1fr)}

  .footer-grid{grid-template-columns:1fr 1fr}

}

@media(max-width:860px){

  .grid--3,.grid--2{grid-template-columns:1fr}

  .statband{grid-template-columns:repeat(2,1fr)}

  .nav-toggle{display:block}

  .main-nav{position:absolute;top:var(--header-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);

    max-height:0;overflow:hidden;transition:max-height .25s ease}

  .main-nav.open{max-height:420px}

  .main-nav .nav-list{flex-direction:column;padding:8px 0}

  .main-nav a{padding:.8em 18px;border-radius:0}

  .news-featured{grid-template-columns:1fr}

  .news-featured__media{min-height:200px}

  .news-featured__body{padding:26px}

}

@media(max-width:560px){

  .grid--4{grid-template-columns:1fr}

  .footer-grid{grid-template-columns:1fr}

  .section{padding:40px 0}

  .hero__inner{padding:60px 0 70px}

}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}



/* VIS: red + white, neutral text for readability. */

.site-footer{background:#fff!important;color:#4a3537!important;border-top:3px solid #d6000f!important}

.site-footer h3,.site-footer h4,.site-footer b,.site-footer strong,.site-footer .hl-num{color:#a60915!important}

.site-footer p,.site-footer li,.site-footer a,.site-footer small,.site-footer .hl-label,.site-footer .hl-mail,.site-footer .footer-nap{color:#654e50!important}

.site-footer a:hover{color:#d6000f!important}

.site-footer .foot-top,.site-footer .foot-bottom,.site-footer .footer-bottom{border-color:#f0dfe0!important;color:#654e50!important}


/* Supplied company logo, preserve original aspect ratio. */
.brand .logo,.brand img[src*="company-logo.png"]{width:76px!important;height:64px!important;object-fit:contain;border-radius:0!important;box-shadow:none!important;background:white;flex-shrink:0}
@media(max-width:600px){.brand .logo,.brand img[src*="company-logo.png"]{width:58px!important;height:49px!important}.brand{gap:8px}}