/* ===== SANMU SEO Agency - Common CSS ===== */
*, *::before, *::after {
margin:0;
padding:0;
box-sizing:border-box
}
:root {
 --navy:#0a1628;
--blue:#1652c7;
--accent:#4f8ef7;
--cyan:#18b8d4;
 --ink:#1a2332;
--muted:#5b6675;
--bg:#fff;
--soft:#f5f8fc;
--line:#e2e8f0;
 --radius:12px;
--shadow:0 4px 20px rgba(10, 22, 40, .06);
}
html {
	scroll-behavior:smooth;
	scroll-padding-top:70px;
	font-size:16px
}
body {
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color:var(--ink);
	line-height:1.7;
	background:var(--bg);
	-webkit-font-smoothing:antialiased
}
a {
	color:var(--blue);
	text-decoration:none
}
a:hover {
	color:var(--cyan)
}
img {
	max-width:100%;
	display:block
}
.container {
	max-width:1140px;
	margin:0 auto;
	padding:0 24px
}
/* ===== Typography ===== */
h1, h2, h3, h4 {
	font-weight:700;
	line-height:1.25;
	letter-spacing:-.02em;
	color:var(--navy)
}
h1 {
	font-size:clamp(2rem, 4.5vw, 2.8rem)
}
h2 {
	font-size:clamp(1.6rem, 3vw, 2.1rem)
}
h3 {
	font-size:1.15rem
}
h4 {
	font-size:1rem
}
p {
	color:var(--muted);
	font-size:1rem;
	line-height:1.7
}
.section-label {
	display:inline-block;
font-size:.78rem;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.14em;
	color:var(--accent);
	background:rgba(79, 142, 247, .1);
	padding:6px 16px;
	border-radius:30px;
	margin-bottom:14px
}
.section-desc {
	margin-bottom:36px;
	font-size:1.02rem
}
/* ===== Buttons ===== */
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:12px 26px;
	border-radius:50px;
	font-weight:600;
font-size:.95rem;
	cursor:pointer;
	border:none;
	white-space:nowrap;
transition:all .2s
}
.btn-primary {
	background:var(--accent);
	color:#fff;
	box-shadow:0 4px 16px rgba(79, 142, 247, .3)
}
.btn-primary:hover {
	background:#3a7ae0;
	color:#fff;
	transform:translateY(-2px)
}
.btn-outline {
	background:transparent;
	color:var(--navy);
	border:2px solid var(--line)
}
.btn-outline:hover {
	border-color:var(--accent);
	color:var(--accent)
}
.btn-cyan {
	background:var(--cyan);
	color:#fff
}
.btn-cyan:hover {
	background:var(--blue);
	color:#fff
}
/* ===== Navigation ===== */
.navbar {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	background:rgba(255, 255, 255, .94);
	backdrop-filter:blur(10px);
	border-bottom:1px solid rgba(226, 232, 240, .6)
}
.nav-inner {
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:66px
}
.nav-logo {
	font-size:1.4rem;
	font-weight:800;
	color:var(--navy);
	letter-spacing:-.03em
}
.nav-logo span {
	color:var(--accent)
}
.nav-links {
	display:flex;
	gap:24px;
	align-items:center;
	list-style:none
}
.nav-links a {
font-size:.9rem;
	font-weight:500;
	color:var(--muted);
transition:all .2s;
	padding:4px 2px;
	border-bottom:2px solid transparent
}
.nav-links a:hover, .nav-links a.active {
	color:var(--accent);
	border-bottom-color:var(--accent)
}

.nav-toggle {
	display:none;
	flex-direction:column;
	gap:5px;
	cursor:pointer;
	padding:4px
}
.nav-toggle span {
	width:24px;
	height:2px;
	background:var(--navy);
	border-radius:2px
}
/* ===== Sections ===== */
section {
	padding:64px 0;
	position:relative
}
.section-alt {
	background:var(--soft)
}
/* ===== Card System ===== */
.card {
	background:var(--bg);
	border-radius:var(--radius);
	padding:26px;
	border:1px solid var(--line);
	box-shadow:0 1px 3px rgba(10, 22, 40, .04);
transition:all .25s;
	display:flex;
	flex-direction:column;
	height:100%
}
.card:hover {
	transform:translateY(-4px);
	box-shadow:var(--shadow);
	border-color:rgba(79, 142, 247, .2)
}
.card-icon {
	width:46px;
	height:46px;
	border-radius:10px;
	background:rgba(79, 142, 247, .1);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.3rem;
	margin-bottom:14px;
	color:var(--accent);
	flex-shrink:0
}
.card h3 {
	margin-bottom:8px
}
.card p {
font-size:.92rem;
	flex:1
}
.grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	gap:22px
}
.grid-2 {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:24px
}
.grid-3 {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px
}
.grid-4 {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:20px
}
/* ===== Hero ===== */
.hero {
	padding:130px 0 70px;
	background:linear-gradient(135deg, var(--navy) 0%, #12294d 60%, #1a3a6c 100%);
	color:#fff;
	overflow:hidden;
	position:relative
}
.hero::after {
content:"";
position:absolute;
right:-80px;
top:-80px;
width:340px;
height:340px;
background:radial-gradient(circle, rgba(79, 142, 247, .2), transparent 70%);
border-radius:50%
}
.hero-inner {
	display:flex;
	align-items:center;
	gap:44px;
	position:relative;
	z-index:2;
	flex-wrap:wrap
}
.hero-text {
	flex:1;
	min-width:300px
}
.hero h1 {
	color:#fff;
	margin-bottom:18px
}
.hero h1 .hl {
	color:var(--cyan)
}
.hero p.lead {
	font-size:1.05rem;
	color:rgba(255, 255, 255, .78);
	margin-bottom:26px;
}
.hero-stats {
	display:flex;
	gap:25px;
	margin-top:30px;
	flex-wrap:wrap
}
.hstat .num {
	font-size:1.8rem;
	font-weight:800;
	color:var(--cyan);
	line-height:1.1
}
.hstat .lbl {
font-size:.8rem;
	color:rgba(255, 255, 255, .7);
	margin-top:3px
}
/* ===== Section Head ===== */
.section-head {
	text-align:center;
	margin-bottom:40px
}
.section-head h2 {
	margin-bottom:10px
}
.section-head p {
	color:var(--muted);
	margin:0 auto
}
/* ===== Steps ===== */
.steps {
	display:flex;
	flex-direction:column;
	gap:16px;
	max-width:820px;
	margin:0 auto
}
.step {
	display:flex;
	gap:16px;
	align-items:flex-start;
	background:var(--soft);
	border-radius:var(--radius);
	padding:18px 20px;
	border-left:4px solid var(--cyan)
}
.step .num {
	background:var(--navy);
	color:#fff;
	width:34px;
	height:34px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	flex-shrink:0;
font-size:.95rem
}
.step h4 {
	margin-bottom:4px
}
.step p {
font-size:.9rem
}
/* ===== Pillars ===== */
.pillars {
	display:flex;
	gap:18px;
	flex-wrap:wrap
}
.pillar {
	flex:1;
	min-width:200px;
	background:linear-gradient(180deg, #fff 0%, #f0f7fb 100%);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:24px;
	text-align:center
}
.pillar .p-icon {
	font-size:2rem;
	margin-bottom:10px
}
.pillar h3 {
	margin-bottom:6px
}
.pillar p {
font-size:.88rem
}
/* ===== Two Col ===== */
.two-col {
	display:flex;
	gap:36px;
	flex-wrap:wrap;
	align-items:flex-start
}
.two-col .col {
	flex:1;
	min-width:280px
}
/* ===== Clean List ===== */
ul.clean {
	list-style:none
}
ul.clean li {
	padding:9px 0 9px 26px;
	position:relative;
	color: #3cb7d3;
font-size:.95rem;
	border-bottom:1px dashed var(--line)
}
ul.clean li:last-child {
	border-bottom:none
}
ul.clean li::before {
content:"✓";
position:absolute;
left:0;
color:var(--cyan);
font-weight:900
}
/* ===== FAQ ===== */
.faq-item {
	background:var(--bg);
	border:1px solid var(--line);
	border-radius:var(--radius);
	margin-bottom:12px;
	overflow:hidden
}
.faq-q {
	width:100%;
	text-align:left;
	padding:18px 22px;
	font-size:1rem;
	font-weight:700;
	color:var(--navy);
	background:none;
	border:none;
	cursor:pointer;
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-family:inherit
}
.faq-q .plus {
	font-size:1.4rem;
	color:var(--accent);
	font-weight:400;
transition:transform .2s
}
.faq-item.open .faq-q .plus {
	transform:rotate(45deg)
}
.faq-a {
	max-height:0;
	overflow:hidden;
transition:max-height .3s ease
}
.faq-item.open .faq-a {
	max-height:400px
}
.faq-a p {
	padding:0 22px 20px;
font-size:.93rem
}
/* ===== Footer ===== */
footer.site-footer {
	background:var(--navy);
	color:rgba(255, 255, 255, .7);
	padding:36px 0;
	text-align:center;
font-size:.88rem
}
footer.site-footer .brand {
	color:#fff;
	font-size:1.2rem;
	margin-bottom:8px;
	display:inline-block;
	font-weight:800
}
footer.site-footer .brand span {
	color:var(--accent)
}
footer.site-footer a {
	color:rgba(255, 255, 255, .6)
}
footer.site-footer a:hover {
	color:var(--accent)
}
footer.site-footer .disclaimer {
font-size:.8rem;
	color:rgba(255, 255, 255, .45);
	margin-top:8px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto
}

/* ===== Responsive ===== */
@media(max-width:900px) {
 .grid-3, .grid-4 {
grid-template-columns:repeat(2, 1fr)
}
 .nav-links {
display:none
}
.nav-toggle {
display:flex
}
 .nav-links.open {
display:flex;
flex-direction:column;
position:absolute;
top:66px;
left:0;
right:0;
background:#fff;
padding:20px 24px;
box-shadow:var(--shadow);
gap:14px
}
}
@media(max-width:560px) {
 section {
padding:44px 0
}
.hero {
padding:100px 0 50px
}
 h1 {
font-size:1.8rem
}
.section-head h2 {
font-size:1.5rem
}
 .grid-2, .grid-3, .grid-4 {
grid-template-columns:1fr
}
 .hero-stats {
gap:18px
}
.hstat .num {
font-size:1.4rem
}
}
/* ===== INDEX ===== */

:root {
 --primary: #0A1628;
 --accent: #4F8EF7;
 --accent-light: #7EB3FF;
 --accent-glow: rgba(79, 142, 247, 0.10);
 --accent-bg: rgba(79, 142, 247, 0.05);
 --text: #1A2332;
 --text-light: #5A6675;
 --bg: #FFFFFF;
 --bg-alt: #F5F8FC;
 --bg-dark: #0A1628;
 --border: #E2E8F0;
 --border-light: #EDF1F7;
 --success: #22C55E;
 --radius: 16px;
 --radius-sm: 10px;
 --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.04), 0 1px 2px rgba(10, 22, 40, 0.06);
 --shadow-md: 0 4px 20px rgba(10, 22, 40, 0.06), 0 2px 8px rgba(10, 22, 40, 0.04);
 --shadow-lg: 0 12px 40px rgba(10, 22, 40, 0.10), 0 4px 12px rgba(10, 22, 40, 0.05);
 --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
/* ===== TYPOGRAPHY ===== */


.section-label {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent);
	background: var(--accent-glow);
	padding: 6px 16px;
	border-radius: 30px;
	margin-bottom: 14px;
}
.section-desc {
	margin-bottom: 40px;
	font-size: 1.05rem;
}
.section-head {
	text-align: center;
	margin: 0 auto 40px;
}
.section-head h2 {
	margin-bottom: 10px;
}
.section-head p {
	color: var(--text-light);
}
/* ===== BUTTONS ===== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: var(--transition);
	border: none;
	white-space: nowrap;
}
.btn-primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 4px 16px rgba(79, 142, 247, 0.30);
}
.btn-primary:hover {
	background: #3A7AE0;
	color: #fff;
}
.btn-outline {
	background: transparent;
	color: var(--primary);
	border: 2px solid var(--border);
}
.btn-outline:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.btn-outline-light {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.25);
}
.btn-outline-light:hover {
	border-color: var(--accent-light);
	color: var(--accent-light);
}
/* ===== SITE NAVBAR (unified across all pages) ===== */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.6);
	transition: var(--transition);
}
.navbar.scrolled {
	box-shadow: var(--shadow-sm);
}
.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
}
.nav-logo {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--primary);
	letter-spacing: -0.03em;
}
.nav-logo span {
	color: var(--accent);
}
.nav-links {
	display: flex;
	gap: 22px;
	align-items: center;
}
.nav-links a {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-light);
	transition: var(--transition);
	position: relative;
}
.nav-links a:hover {
	color: var(--accent);
}
.nav-links a.active {
	color: var(--accent);
}
.nav-links a.active::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent);
}
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 4px;
}
.nav-toggle span {
	width: 24px;
	height: 2px;
	background: var(--primary);
	border-radius: 2px;
}
/* ===== SECTIONS ===== */
section {
	padding: 20px 0;
	position: relative;
}
.section-alt {
	background: var(--bg-alt);
}
/* ===== UNIFIED CARD SYSTEM ===== */
.card {
	background: var(--bg);
	border-radius: var(--radius);
	padding: 32px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.18);
}
.card-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--accent-glow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-bottom: 18px;
	color: var(--accent);
	flex-shrink: 0;
}
.card h3 {
	margin-bottom: 10px;
	font-size: 1.15rem;
	line-height: 1.35;
}
.card p {
	font-size: 0.92rem;
	line-height: 1.65;
	flex: 1;
}
.card-num {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--accent), var(--accent-light));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
}
.card-dark {
	background: var(--bg-dark);
	color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.card-dark h3 {
	color: #fff;
}
.card-dark p {
	color: rgba(255, 255, 255, 0.6);
}
.card-dark .card-icon {
	background: rgba(79, 142, 247, 0.15);
}
/* ===== GRID HELPERS ===== */
.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
/* ===== BANNER / HERO ===== */
.banner {
	padding: 160px 0 100px;
	background: linear-gradient(155deg, #0A1628 0%, #0F1F3A 50%, #16294A 100%);
	color: #fff;
	overflow: hidden;
	position: relative;
}
.banner::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
 background: radial-gradient(circle, rgba(79, 142, 247, 0.10) 0%, transparent 70%);
border-radius: 50%;
}
.banner::after {
content: "";
position: absolute;
bottom: -30%;
left: -10%;
width: 450px;
height: 450px;
 background: radial-gradient(circle, rgba(126, 179, 255, 0.06) 0%, transparent 70%);
border-radius: 50%;
}
.banner-inner {
	position: relative;
	z-index: 2;	
}
.banner h1 {
	color: #fff;
	margin-bottom: 20px;
}
.banner h1 .highlight {
	color: var(--accent-light);
}
.banner p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 1.12rem;
	margin-bottom: 32px;
}
.banner-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 44px;
}
.banner-stats {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.banner-stat {
	text-align: left;
}
.banner-stat-num {
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--accent-light);
	line-height: 1.1;
}
.banner-stat-label {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 4px;
}
/* ===== METHODOLOGY ===== */
.method-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.method-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 24px;
	background: var(--bg);
	border-radius: var(--radius);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	position: relative;
	overflow: hidden;
}
.method-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
 background: linear-gradient(90deg, var(--accent), var(--accent-light));
opacity: 0;
transition: var(--transition);
}
.method-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.15);
}
.method-card:hover::after {
opacity: 1;
}
.method-step-num {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--primary), #1A2D52);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
	flex-shrink: 0;
}
.method-step-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.method-step-content h3 {
	margin-bottom: 8px;
	font-size: 1.02rem;
	line-height: 1.35;
}
.method-step-content p {
	font-size: 0.88rem;
	line-height: 1.6;
	flex: 1;
}
/* ===== PROCESS ===== */
.process-flow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	position: relative;
}
.process-card {
	position: relative;
	padding: 22px 18px;
	background: var(--bg);
	border-radius: var(--radius);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	text-align: left;
}
.process-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.15);
}
.process-card:not(:last-child)::after {
content: "→";
position: absolute;
top: 22px;
right: -14px;
width: 12px;
 color: var(--accent);
font-weight: 700;
font-size: 1.1rem;
z-index: 2;
background: var(--bg);
border-radius: 50%;
 text-align: center;
line-height: 1;
}
.process-step-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	flex-shrink: 0;
	margin-bottom: 12px;
	box-shadow: 0 0 0 3px var(--accent-glow);
}
.process-card .process-tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-glow);
	padding: 3px 9px;
	border-radius: 20px;
	margin-bottom: 8px;
	align-self: flex-start;
}
.process-card h3 {
	margin-bottom: 6px;
	font-size: 0.96rem;
	line-height: 1.35;
}
.process-card p {
	font-size: 0.82rem;
	line-height: 1.55;
	flex: 1;
}
/* ===== CASE STUDIES ===== */
.case-card {
	background: var(--bg);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
}
.case-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.18);
}
.case-header {
	padding: 26px 26px 0;
}
.case-tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-light);
	background: var(--bg-alt);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
}
.case-header h3 {
	margin-bottom: 14px;
	font-size: 1.1rem;
}
.case-metrics {
	display: flex;
	gap: 10px;
	margin-bottom: 4px;
}
.case-metric {
	flex: 1;
	text-align: center;
	padding: 12px 6px;
	background: var(--bg-alt);
	border-radius: 10px;
}
.case-metric-val {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1.1;
}
.case-metric-label {
	font-size: 0.7rem;
	color: var(--text-light);
	margin-top: 4px;
}
.case-body {
	padding: 18px 26px 26px;
	flex: 1;
}
.case-body p {
	font-size: 0.9rem;
}
/* ===== INDUSTRIES ===== */
.industry-card {
	text-align: center;
	padding: 30px 20px;
	background: var(--bg);
	border-radius: var(--radius);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.industry-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.18);
}
.industry-icon {
	font-size: 2rem;
	margin-bottom: 14px;
}
.industry-card h3 {
	margin-bottom: 8px;
	font-size: 1.05rem;
}
.industry-card p {
	font-size: 0.85rem;
}
/* ===== INSIGHTS ===== */
.insight-card {
	background: var(--bg);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
}
.insight-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.18);
}
.insight-img {
	height: 140px;
	background: linear-gradient(135deg, var(--bg-alt), var(--accent-glow));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
}
.insight-body {
	padding: 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.insight-meta {
	font-size: 0.75rem;
	color: var(--text-light);
	margin-bottom: 10px;
	display: flex;
	gap: 12px;
}
.insight-meta span {
	display: flex;
	align-items: center;
	gap: 4px;
}
.insight-body h3 {
	margin-bottom: 8px;
	font-size: 1.05rem;
	line-height: 1.35;
}
.insight-body p {
	font-size: 0.88rem;
	flex: 1;
}
.insight-link {
	margin-top: 14px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.insight-link:hover {
	gap: 8px;
}
/* ===== FAQ ===== */
.faq-list {
	margin: 0 auto;
}
.faq-card {
	background: var(--bg);
	border-radius: var(--radius);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	margin-bottom: 12px;
	overflow: hidden;
	transition: var(--transition);
}
.faq-card:hover {
	border-color: rgba(79, 142, 247, 0.12);
}
.faq-q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding: 22px 26px;
	gap: 16px;
}
.faq-q h3 {
	font-size: 1.02rem;
	flex: 1;
}
.faq-toggle {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--accent);
	transition: var(--transition);
}
.faq-card.active {
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.18);
}
.faq-card.active .faq-toggle {
	background: var(--accent);
	color: #fff;
	transform: rotate(45deg);
}
.faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.faq-card.active .faq-a {
	max-height: 600px;
}
.faq-a-inner {
	padding: 0 26px 22px;
}
.faq-a p {
	font-size: 0.92rem;
}
/* ===== BLOG ===== */
.blog-card {
	display: flex;
	gap: 18px;
	padding: 20px;
	background: var(--bg);
	border-radius: var(--radius);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	align-items: flex-start;
}
.blog-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 142, 247, 0.15);
}
.blog-date {
	flex-shrink: 0;
	width: 52px;
	text-align: center;
	padding: 10px 4px;
	background: var(--bg-alt);
	border-radius: 10px;
}
.blog-date-day {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
}
.blog-date-month {
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--text-light);
	text-transform: uppercase;
	margin-top: 4px;
}
.blog-content {
	flex: 1;
}
.blog-content h3 {
	margin-bottom: 6px;
	font-size: 1rem;
	line-height: 1.35;
}
.blog-content p {
	font-size: 0.85rem;
}
.blog-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-glow);
	padding: 3px 10px;
	border-radius: 16px;
	margin-bottom: 8px;
}
/* ===== ARTICLE CARD (blog page) ===== */
.article-card {
	background: var(--bg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	padding: 22px 24px;
	margin-bottom: 20px;
	box-shadow: var(--shadow-sm);
}
.article-card h2 {
	font-size: 1.25rem;
	margin-bottom: 8px;
	line-height: 1.35;
}
.article-card h2 a {
	color: var(--primary);
}
.article-card .meta {
	font-size: 0.82rem;
	color: var(--text-light);
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.badge {
	display: inline-block;
	background: var(--accent-glow);
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
	margin-right: 4px;
}
.read-more {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--accent);
}
/* ===== SIDEBAR (blog page) ===== */
.sidebar-box {
	background: var(--bg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	padding: 18px 20px;
	margin-bottom: 22px;
	box-shadow: var(--shadow-sm);
}
.sidebar-box h3 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--accent);
	display: inline-block;
}
.sidebar-list {
	list-style: none;
}
.sidebar-list li {
	padding: 8px 0;
	border-bottom: 1px dashed var(--border);
	font-size: 0.9rem;
}
.sidebar-list li:last-child {
	border-bottom: none;
}
.sidebar-list a {
	color: var(--text);
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.sidebar-list.hot .tag {
	background: #fef2f2;
	color: #dc2626;
}
/* ===== PRICING TIERS ===== */
.tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.tier {
	background: var(--bg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	transition: var(--transition);
	position: relative;
	overflow: hidden;
}
.tier:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
	border-color: rgba(79, 142, 247, 0.25);
}
.tier.featured {
	border-color: var(--accent);
	box-shadow: var(--shadow-sm);
}
.tier.featured::before {
content: "Most chosen";
position: absolute;
top: 14px;
right: 14px;
font-size: 10.5px;
font-weight: 700;
color: #fff;
background: var(--accent);
padding: 4px 9px;
border-radius: 20px;
}
.tier h3 {
	font-size: 1.05rem;
	color: var(--primary);
	font-weight: 800;
}
.tier .price {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--accent);
	margin: 10px 0 4px;
}
.tier .price small {
	font-size: 0.85rem;
	color: var(--text-light);
	font-weight: 500;
}
.tier .who {
	font-size: 0.85rem;
	color: var(--text-light);
	margin-bottom: 14px;
	min-height: 38px;
}
.tier ul {
	list-style: none;
	margin-top: auto;
	display: grid;
	gap: 8px;
}
.tier li {
	font-size: 0.85rem;
	color: var(--text);
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.tier li::before {
content: "✓";
color: var(--accent);
font-weight: 800;
font-size: 0.85rem;
margin-top: 1px;
}
/* ===== COMPARISON TABLE ===== */
.compare-wrap {
	background: #fff;
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	overflow: hidden;
}
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93rem;
}
thead th {
	background: var(--primary);
	color: #fff;
	text-align: left;
	padding: 13px 14px;
	font-size: 0.85rem;
	font-weight: 700;
}
tbody td {
	padding: 12px 14px;
	border-top: 1px solid var(--border-light);
	color: var(--text);
	vertical-align: top;
}
tbody tr:nth-child(even) {
background: var(--bg-alt);
}
tbody td b {
	color: var(--primary);
}
td.center, th.center {
	text-align: center;
}
/* ===== HERO CARD (case page right-side checklist) ===== */
.hero-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius);
	padding: 26px;
	backdrop-filter: blur(4px);
}
.hero-card h3 {
	font-size: 1.05rem;
	margin-bottom: 14px;
	color: var(--accent-light);
}
.clean {
	list-style: none;
}
.clean li {
	padding: 7px 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	gap: 10px;
}
.clean li::before {
content: "✓";
color: var(--accent-light);
font-weight: 800;
font-size: 1rem;
}
/* ===== PILLARS / EEAT (about page) ===== */
.pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
.pillar {
	position: relative;
	padding: 28px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	background: #fff;
	display: flex;
	flex-direction: column;
}
.pillar:hover {
	border-color: var(--accent);
}
.pillar .num {
	position: absolute;
	top: 14px;
	right: 18px;
	font-size: 2rem;
	font-weight: 800;
	color: var(--accent-glow);
	line-height: 1;
}
.pillar .tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--primary);
	background: var(--accent-glow);
	padding: 5px 12px;
	border-radius: 20px;
	margin-bottom: 12px;
}
.pillar h3 {
	font-size: 1.08rem;
	margin-bottom: 8px;
}
.pillar p {
	font-size: 0.92rem;
	flex: 1;
}
/* ===== STEP LIST (about methodology) ===== */
.steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 820px;
	margin: 0 auto;
}
.step-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--bg-alt);
	border-radius: var(--radius);
	padding: 18px 20px;
	border-left: 4px solid var(--accent);
}
.step-item .num {
	background: var(--primary);
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	flex-shrink: 0;
	font-size: 0.95rem;
}
.step-item h4 {
	font-size: 1rem;
	color: var(--primary);
	margin-bottom: 4px;
}
.step-item p {
	font-size: 0.9rem;
}
/* ===== STATS ROW ===== */
.stats-row {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 24px;
}
.stat-item {
	text-align: left;
}
.stat-item b {
	display: block;
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--accent);
}
.stat-item span {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.7);
}
/* ===== FOOTER (unified) ===== */



/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
 .method-list {
grid-template-columns: repeat(2, 1fr);
}
 .process-flow {
grid-template-columns: repeat(3, 1fr);
}
 .process-card:nth-child(3)::after {
display: none;
}
 .tiers {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
 .grid-3 {
grid-template-columns: repeat(2, 1fr);
}
 .grid-4 {
grid-template-columns: repeat(2, 1fr);
}
 .nav-links {
display: none;
}
 .nav-toggle {
display: flex;
}
 .nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 68px;
left: 0;
right: 0;
background: #fff;
padding: 20px 24px;
box-shadow: var(--shadow-md);
gap: 14px;
}
 .pillars {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
 section {
padding: 64px 0;
}
 .banner {
padding: 130px 0 72px;
}
 .grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
}
 .method-list {
grid-template-columns: 1fr;
}
 .process-flow {
grid-template-columns: 1fr;
}
 .process-card::after {
display: none !important;
}
 .banner-stats {
gap: 24px;
}
 .tiers {
grid-template-columns: 1fr;
}
}

/* ===== A11Y ===== */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.main-layout {
	display:flex;
	gap:28px;
	align-items:flex-start;
	max-width:1180px;
	margin:0 auto;
	padding:0 24px
}
.content-left {
	flex:1;
	min-width:0
}
.sidebar-right {
	flex:0 0 300px;
	position:sticky;
	top:80px
}
.article-card {
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:22px 24px;
	margin-bottom:18px;
	box-shadow:0 1px 3px rgba(0, 0, 0, .04);
transition:box-shadow .2s
}
.article-card:hover {
	box-shadow:var(--shadow)
}
.article-card h2 {
	font-size:1.25rem;
	margin-bottom:8px;
	line-height:1.35
}
.article-card h2 a {
	color:var(--navy)
}
.article-card h2 a:hover {
	color:var(--accent)
}
.meta {
font-size:.82rem;
	color:var(--muted);
	margin-bottom:10px;
	display:flex;
	flex-wrap:wrap;
	gap:12px
}
.badge {
	display:inline-block;
	background:#eff6ff;
	color:var(--blue);
font-size:.75rem;
	font-weight:600;
	padding:2px 8px;
	border-radius:999px;
	margin-right:4px
}
.sidebar-box {
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:18px 20px;
	margin-bottom:20px;
	box-shadow:0 1px 3px rgba(0, 0, 0, .04)
}
.sidebar-box h3 {
	font-size:1rem;
	font-weight:700;
	margin-bottom:12px;
	padding-bottom:8px;
	border-bottom:2px solid var(--accent);
	display:inline-block
}
.sidebar-list {
	list-style:none
}
.sidebar-list li {
	padding:8px 0;
	border-bottom:1px dashed var(--line);
font-size:.9rem
}
.sidebar-list li:last-child {
	border-bottom:none
}
.sidebar-list a {
	color:#334155;
	display:flex;
	justify-content:space-between;
	gap:8px
}
.sidebar-list a:hover {
	color:var(--accent)
}
.hot .tag {
	background:#fef2f2;
	color:#dc2626
}
 @media(max-width:900px) {
.main-layout {
flex-direction:column
}
.sidebar-right {
flex:1;
width:100%;
position:static
}
}
.hero-card {
	background:rgba(255, 255, 255, .06);
	border:1px solid rgba(255, 255, 255, .12);
	border-radius:var(--radius);
	padding:26px;
	backdrop-filter:blur(4px)
}
.hero-card h3 {
	color:var(--cyan);
	font-size:1.05rem;
	margin-bottom:14px
}
.hero-check li {
	color:rgba(255, 255, 255, .88);
	border-bottom-color:rgba(255, 255, 255, .1);
	padding:8px 0 8px 26px
}
.hero-check li:last-child {
	border-bottom:none
}
/* ===== Article page additions  ===== */
.article-head {
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:var(--radius);
	padding:30px 32px 22px;
	margin-bottom:24px;
	box-shadow:var(--shadow-sm)
}
.article-head h1 {
	font-size:clamp(1.7rem, 3.2vw, 2.4rem);
	line-height:1.25;
	margin:12px 0 14px;
	color:var(--primary)
}
.article-head .meta {
font-size:.85rem;
	color:var(--text-light);
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-bottom:6px
}
.article-head .meta span {
	display:inline-flex;
	align-items:center;
	gap:5px
}
.article-body {
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:var(--radius);
	padding:34px 36px;
	box-shadow:var(--shadow-sm);
	line-height:1.8;
	color:#26303f
}
.article-body .lead {
	font-size:1.05rem;
	color:#3a4656;
	margin-bottom:22px
}
.article-body h2 {
	font-size:1.32rem;
	margin:30px 0 12px;
	color:var(--primary);
	scroll-margin-top:80px
}
.article-body h3 {
	font-size:1.08rem;
	margin:20px 0 8px;
	color:#16243b
}
.article-body p {
	margin-bottom:14px;
font-size:.96rem
}
.article-body ul, .article-body ol {
	margin:0 0 16px 22px
}
.article-body ul li, .article-body ol li {
	margin-bottom:8px;
font-size:.95rem;
	color:#33404f
}
.article-body .check li {
	list-style:none;
	margin-left:-22px;
	padding-left:26px;
	position:relative
}
.article-body .check li::before {
content:"\2713";
position:absolute;
left:0;
color:var(--accent);
font-weight:800
}
.article-body .callout {
	background:var(--accent-glow);
	border-left:4px solid var(--accent);
	border-radius:10px;
	padding:16px 20px;
	margin:20px 0;
font-size:.93rem;
	color:#21324f
}
.article-body .callout b {
	color:var(--primary)
}
.article-body table {
	width:100%;
	border-collapse:collapse;
	margin:18px 0;
font-size:.9rem
}
.article-body th, .article-body td {
	padding:11px 12px;
	border:1px solid var(--border-light);
	text-align:left;
	vertical-align:top
}
.article-body thead th {
	background:var(--primary);
	color:#fff;
font-size:.82rem;
	font-weight:700
}
.article-body tbody tr:nth-child(even) {
background:var(--bg-alt)
}
.article-body code {
	background:var(--bg-alt);
	border:1px solid var(--border-light);
	border-radius:6px;
	padding:1px 6px;
font-size:.86rem;
	color:#c21e6c
}
.article-tags {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:26px 0 6px
}
.article-tags a {
font-size:.78rem;
	font-weight:600;
	color:var(--accent);
	background:var(--accent-glow);
	padding:5px 12px;
	border-radius:20px
}
.article-tags a:hover {
	background:rgba(79, 142, 247, .18)
}
.article-share {
	display:flex;
	align-items:center;
	gap:12px;
	margin:18px 0 4px;
font-size:.9rem;
	color:var(--text-light)
}
.article-share a {
	width:34px;
	height:34px;
	border-radius:50%;
	background:var(--bg-alt);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:1rem;
	border:1px solid var(--border-light);
	color:var(--text)
}
.article-share a:hover {
	background:var(--accent);
	color:#fff;
	border-color:var(--accent)
}
.article-nav {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin-top:28px
}
.article-nav a {
	display:block;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:var(--radius);
	padding:16px 18px;
font-size:.88rem;
	color:var(--text);
	box-shadow:var(--shadow-sm);
	transition:var(--transition)
}
.article-nav a:hover {
	border-color:rgba(79, 142, 247, .25);
	box-shadow:var(--shadow-md);
	color:var(--accent)
}
.article-nav .lbl {
font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:var(--text-light);
	font-weight:700;
	margin-bottom:4px;
	display:block
}
.article-nav .next {
	text-align:right
}
.more-articles {
	margin-top:34px
}
.more-articles h2.section-title {
	font-size:1.3rem;
	margin-bottom:16px
}
.more-articles .article-card h2 {
	font-size:1.08rem
}
.toc {
	background:var(--bg-alt);
	border:1px solid var(--border-light);
	border-radius:var(--radius);
	padding:18px 22px;
	margin:0 0 24px;
font-size:.9rem
}
.toc b {
	display:block;
	margin-bottom:8px;
	color:var(--primary);
font-size:.92rem
}
.toc ol {
	margin:0 0 0 20px
}
.toc li {
	margin-bottom:5px
}
.toc a {
	color:var(--text)
}
.toc a:hover {
	color:var(--accent)
}
@media(max-width:640px) {
.article-body {
padding:24px 20px
}
.article-head {
padding:24px 20px
}
.article-nav {
grid-template-columns:1fr
}
}



/* case shuju */


 .wrap { max-width: 1500px; margin: 0 auto; }

  /* Header */
  header.hero-data {
    background: #ffffff;
    color: #fff;
	padding-top: 50px;
  }
  header.hero-data h2 { font-size: 28px; margin-bottom: 8px; letter-spacing: .2px;text-align: center; }
  header.hero-data p { font-size: 14px; opacity: .92;text-align: center; }

 

  /* Grid: 4 columns */
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  @media (max-width: 1200px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .grid { grid-template-columns: 1fr; } }

  /* Card */
  .card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15,23,42,.07);
    display: flex; flex-direction: column;
    border-top: 5px solid var(--c);
  }
  .card .head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
  }
  .card .head .num {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: var(--c); text-transform: uppercase;
  }
  .card .head h2 { font-size: 16px; margin-top: 4px; color: #0f172a; }

  .body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }

  .section-title {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: #64748b; text-transform: uppercase; margin-bottom: 6px;
  }

  /* Starting point list */
 section-title ul.clean { list-style: none; }
 section-title ul.clean li {
    font-size: 12.5px; padding: 4px 0; color: #334155;
    display: flex; justify-content: space-between; gap: 8px;
    border-bottom: 1px dashed #eef2f7;
	left: -15px !important;
  }
  section-title ul.clean li:last-child { border-bottom: none; }
  section-title ul.clean li b { color: #0f172a; font-weight: 600; white-space: nowrap; }

  .issue {
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
    padding: 8px 10px; font-size: 12px; color: #991b1b; line-height: 1.45;
  }
  .issue b { color: #7f1d1d; }

  /* SEO focus tags */
  .tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .tag {
    font-size: 11px; padding: 4px 9px; border-radius: 999px;
    background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe;
  }

  /* Outcome metric grid */
  .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px;
    padding: 9px 10px;
  }
  .metric .lab { font-size: 10.5px; color: #64748b; line-height: 1.2; }
  .metric .val { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 3px; }
  .metric .val .arrow { color: #16a34a; font-weight: 700; }

  .scope {
    font-size: 12px; color: #334155; line-height: 1.5;
    background: #f8fafc; border-left: 3px solid var(--c);
    padding: 9px 12px; border-radius: 0 8px 8px 0;
  }

  .caseft { text-align: center; color: #94a3b8; font-size: 12px; margin-top: 28px; }

  /* Print */
  @media print {
    body { background: #fff; padding: 0; }
    .card { break-inside: avoid; box-shadow: none; border: 1px solid #e2e8f0; }
    header.hero { box-shadow: none; }
  }

.fypage{
clear: both;
    font-size: 15px;
    height: 37px;
    line-height: 37px;
    margin: 25px 10px 10px 10px;
    list-style: none;
}
.fypage li {
    float: left;
}

.fypage a {
padding: 8px 15px;
    font-size: 15px;
    color: #333;
    border: 1px solid #eee;
    border-radius: 3px;
    background-color: #eee;
    margin: 0 5px;
}
/* ===== index-tabs===== */
    .tabs-box {
	width: 1180px;
	margin: 0 auto;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* 分类按钮 */
    .tabs {
	display: flex;
	border-bottom: 1px solid #eee;
}
.tab {
	padding: 16px;
	text-align: center;
	cursor: pointer;
	color: #666;
	font-size: 16px;
	transition: all 0.3s;
	position: relative;
}
.tab:hover {
	color: #333;
}
/* 当前选中的分类 */
    .tab.active {
	color: #1677ff;
	font-weight: bold;
}
 .tab.active::after {
 content: "";
 position: absolute;
 left: 30%;
 right: 30%;
 bottom: 0;
 height: 3px;
 background: #1677ff;
 border-radius: 3px 3px 0 0;
}
/* 内容区域 */
    .sylabel {
	display: none;
}
.sylabel.active {
	display: block;
}
.sylabel p {
	color: #666;
	line-height: 1.8;
	margin: 10px;
}