/*
Theme Name: Stackflow
Author: Stackflow Systems
Description: A crypto-exchange inspired WordPress theme with a waterfall / gradient-tech aesthetic — sticky shrinking topbar, split hero with flowing gradient animation, live ticker marquee, masonry research flow with flip/slide cards, gradient-bordered instruments, wave dividers and a sticky-TOC single layout. Bilingual (zh/en), fully dynamic SEO and slot-based CTA resolver.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stackflow
Tags: blog, grid-layout, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--stk-bg: #F8FAFC;
	--stk-white: #FFFFFF;
	--stk-ink: #1E293B;
	--stk-muted: #64748B;
	--stk-blue: #0EA5E9;
	--stk-green: #10B981;
	--stk-line: #E2E8F0;
	--stk-grad: linear-gradient(135deg, #0EA5E9 0%, #10B981 100%);
	--stk-grad-soft: linear-gradient(135deg, rgba(14,165,233,.10) 0%, rgba(16,185,129,.10) 100%);
	--stk-ink-soft: #334155;
	--stk-shadow-sm: 0 2px 10px rgba(30,41,59,.06);
	--stk-shadow-md: 0 12px 34px rgba(30,41,59,.10);
	--stk-shadow-lg: 0 26px 60px rgba(14,165,233,.18);
	--stk-radius: 18px;
	--stk-radius-sm: 12px;
	--stk-topbar-h: 80px;
	--stk-topbar-h-sm: 56px;
	--stk-maxw: 1200px;
	--stk-ease: cubic-bezier(.22,.61,.36,1);
	--stk-font-display: 'Sora', system-ui, sans-serif;
	--stk-font-body: 'Manrope', system-ui, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

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

body.stk-body {
	margin: 0;
	background: var(--stk-bg);
	color: var(--stk-ink);
	font-family: var(--stk-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--stk-font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--stk-ink);
	margin: 0 0 .5em;
	letter-spacing: -.02em;
}

a { color: var(--stk-blue); text-decoration: none; transition: color .25s var(--stk-ease); }
a:hover { color: var(--stk-green); }

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

p { margin: 0 0 1em; }

.stk-wrap {
	width: 100%;
	max-width: var(--stk-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

.stk-grad-text {
	background: var(--stk-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.stk-section { padding: 96px 0; position: relative; }
.stk-section--tight { padding: 64px 0; }

.stk-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--stk-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--stk-blue);
	background: var(--stk-grad-soft);
	border: 1px solid rgba(14,165,233,.18);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.stk-head { max-width: 640px; margin-bottom: 48px; }
.stk-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.stk-head h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
.stk-head p { color: var(--stk-muted); font-size: 17px; margin: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.stk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--stk-font-display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .28s var(--stk-ease), box-shadow .28s var(--stk-ease), background .28s var(--stk-ease), color .28s var(--stk-ease);
	white-space: nowrap;
}
.stk-btn svg { width: 18px; height: 18px; }
.stk-btn--grad {
	background: var(--stk-grad);
	color: var(--stk-white);
	box-shadow: 0 10px 26px rgba(14,165,233,.30);
}
.stk-btn--grad:hover {
	color: var(--stk-white);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(16,185,129,.36);
}
.stk-btn--ghost {
	background: var(--stk-white);
	color: var(--stk-ink);
	border-color: var(--stk-line);
	box-shadow: var(--stk-shadow-sm);
}
.stk-btn--ghost:hover { transform: translateY(-3px); color: var(--stk-blue); border-color: rgba(14,165,233,.4); }
.stk-btn--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.stk-btn--light:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-3px); }
.stk-btn--sm { padding: 10px 18px; font-size: 13px; }
.stk-btn--block { width: 100%; }

/* ==========================================================================
   A. Sticky topbar (scroll shrink)
   ========================================================================== */
.stk-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var(--stk-topbar-h);
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: height .38s var(--stk-ease), box-shadow .38s var(--stk-ease), background .38s var(--stk-ease), border-color .38s var(--stk-ease);
}
.stk-topbar__inner {
	max-width: var(--stk-maxw);
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.stk-topbar.is-scrolled {
	height: var(--stk-topbar-h-sm);
	background: rgba(255,255,255,.72);
	box-shadow: 0 8px 30px rgba(30,41,59,.10);
	border-bottom-color: var(--stk-line);
}

.stk-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.stk-brand__mark {
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--stk-grad);
	display: grid; place-items: center;
	color: #fff;
	box-shadow: 0 8px 20px rgba(14,165,233,.32);
	transition: width .38s var(--stk-ease), height .38s var(--stk-ease), border-radius .38s var(--stk-ease);
}
.stk-brand__mark svg { width: 24px; height: 24px; }
.is-scrolled .stk-brand__mark { width: 34px; height: 34px; border-radius: 10px; }
.is-scrolled .stk-brand__mark svg { width: 19px; height: 19px; }
.stk-brand__logo {
	width: 42px; height: 42px; border-radius: 12px; object-fit: contain; flex-shrink: 0;
	transition: width .38s var(--stk-ease), height .38s var(--stk-ease);
}
.is-scrolled .stk-brand__logo { width: 34px; height: 34px; }
.stk-footer .stk-brand__logo { width: 42px; height: 42px; background: rgba(255,255,255,.14); padding: 4px; }
.stk-brand__name {
	font-family: var(--stk-font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.03em;
	color: var(--stk-ink);
	transition: font-size .38s var(--stk-ease);
}
.is-scrolled .stk-brand__name { font-size: 18px; }
.stk-brand__name .stk-grad-text { font-weight: 800; }
.stk-brand .custom-logo { max-height: 44px; width: auto; transition: max-height .38s var(--stk-ease); }
.is-scrolled .stk-brand .custom-logo { max-height: 34px; }

.stk-nav { flex: 1; display: flex; justify-content: center; }
.stk-menu { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.stk-menu__item > a {
	display: block;
	font-family: var(--stk-font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--stk-ink-soft);
	padding: 10px 16px;
	border-radius: 999px;
	position: relative;
	transition: color .25s var(--stk-ease), background .25s var(--stk-ease);
}
.stk-menu__item > a:hover { color: var(--stk-blue); background: var(--stk-grad-soft); }
.stk-menu .current-menu-item > a,
.stk-menu .current_page_item > a { color: var(--stk-blue); background: var(--stk-grad-soft); }

.stk-topbar__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.stk-langswitch { display: inline-flex; border: 1px solid var(--stk-line); border-radius: 999px; overflow: hidden; background: var(--stk-white); }
.stk-langswitch a {
	font-family: var(--stk-font-display);
	font-size: 12px; font-weight: 700;
	padding: 7px 12px; color: var(--stk-muted);
	transition: background .25s, color .25s;
}
.stk-langswitch a:hover { color: var(--stk-blue); }
.stk-langswitch a.stk-active { background: var(--stk-grad); color: #fff; }

.stk-iconbtn {
	width: 40px; height: 40px; border-radius: 12px;
	display: grid; place-items: center;
	border: 1px solid var(--stk-line); background: var(--stk-white);
	color: var(--stk-ink-soft); cursor: pointer;
	transition: color .25s, border-color .25s, transform .25s;
}
.stk-iconbtn:hover { color: var(--stk-blue); border-color: rgba(14,165,233,.4); transform: translateY(-2px); }
.stk-iconbtn svg { width: 20px; height: 20px; }

.stk-burger { display: none; }

/* Mobile nav drawer */
.stk-mnav {
	position: fixed; inset: var(--stk-topbar-h) 0 auto 0; z-index: 999;
	background: var(--stk-white);
	border-bottom: 1px solid var(--stk-line);
	box-shadow: var(--stk-shadow-md);
	padding: 16px 24px 24px;
	transform: translateY(-130%);
	transition: transform .42s var(--stk-ease);
	max-height: calc(100vh - var(--stk-topbar-h)); overflow-y: auto;
}
.stk-mnav.is-open { transform: translateY(0); }
.stk-mnav .stk-menu { flex-direction: column; align-items: stretch; gap: 4px; }
.stk-mnav .stk-menu__item > a { padding: 14px 16px; border-radius: var(--stk-radius-sm); }
.stk-mnav__actions { display: flex; gap: 12px; margin-top: 18px; align-items: center; }

body.stk-nav-open { overflow: hidden; }
body.stk-nav-open .stk-topbar { height: var(--stk-topbar-h); }

.stk-body-pad { padding-top: var(--stk-topbar-h); }
#stk-main { padding-top: var(--stk-topbar-h); }

/* ==========================================================================
   B. Hero — split (text left / animated gradient graphic right)
   ========================================================================== */
.stk-hero {
	position: relative;
	padding: 72px 0 96px;
	overflow: hidden;
	background:
		radial-gradient(1100px 520px at 82% -6%, rgba(14,165,233,.14), transparent 60%),
		radial-gradient(900px 480px at 4% 8%, rgba(16,185,129,.12), transparent 55%),
		var(--stk-bg);
}
.stk-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.stk-hero__copy .stk-kicker { animation: stk-rise .7s var(--stk-ease) both; }
.stk-hero__title {
	font-size: clamp(34px, 5.4vw, 60px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.035em;
	margin: 0 0 20px;
	animation: stk-rise .7s .08s var(--stk-ease) both;
}
.stk-hero__title span { display: block; }
.stk-hero__text {
	font-size: 18px; color: var(--stk-muted); max-width: 520px; margin: 0 0 32px;
	animation: stk-rise .7s .16s var(--stk-ease) both;
}
.stk-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; animation: stk-rise .7s .24s var(--stk-ease) both; }
.stk-hero__note { font-size: 13px; color: var(--stk-muted); display: flex; align-items: center; gap: 7px; }
.stk-hero__note svg { width: 16px; height: 16px; color: var(--stk-green); }
.stk-hero__trust {
	list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px;
	margin: 36px 0 0; padding: 0;
	animation: stk-rise .7s .32s var(--stk-ease) both;
}
.stk-hero__trust li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--stk-ink-soft); }
.stk-hero__trust svg { width: 20px; height: 20px; color: var(--stk-green); flex-shrink: 0; }

/* Animated gradient flow graphic */
.stk-hero__art {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 520px;
	margin-left: auto;
	animation: stk-fade 1s .2s var(--stk-ease) both;
}
.stk-orb {
	position: absolute; border-radius: 50%; filter: blur(2px);
	mix-blend-mode: normal;
}
.stk-orb--a {
	inset: 6% 10% 22% 6%;
	background: radial-gradient(circle at 30% 30%, #38BDF8, #0EA5E9 55%, transparent 72%);
	animation: stk-float 9s ease-in-out infinite;
}
.stk-orb--b {
	inset: 24% 4% 8% 30%;
	background: radial-gradient(circle at 65% 40%, #34D399, #10B981 55%, transparent 72%);
	animation: stk-float 11s ease-in-out infinite reverse;
}
.stk-orb--c {
	inset: 34% 30% 30% 22%;
	background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.9), rgba(16,185,129,.55) 60%, transparent 75%);
	filter: blur(18px);
	animation: stk-pulse 7s ease-in-out infinite;
}
.stk-hero__mesh {
	position: absolute; inset: 0;
	border-radius: 28px;
	background:
		linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) padding-box,
		var(--stk-grad) border-box;
	border: 1.5px solid transparent;
	box-shadow: var(--stk-shadow-lg);
	overflow: hidden;
	backdrop-filter: blur(2px);
}
.stk-hero__banner {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: .55;
}
.stk-hero__grid-lines {
	position: absolute; inset: 0; z-index: 1;
	background-image:
		linear-gradient(rgba(100,116,139,.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(100,116,139,.10) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
}
.stk-hero__chart { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.stk-hero__chart .stk-line {
	stroke-dasharray: 1400; stroke-dashoffset: 1400;
	animation: stk-draw 3.4s .3s var(--stk-ease) forwards, stk-glow 4s 3.6s ease-in-out infinite;
}
.stk-hero__badge {
	position: absolute;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(8px);
	border: 1px solid var(--stk-line);
	border-radius: 14px;
	padding: 12px 16px;
	box-shadow: var(--stk-shadow-md);
	display: flex; align-items: center; gap: 12px;
	font-size: 13px; font-weight: 700;
	animation: stk-float 6s ease-in-out infinite;
}
.stk-hero__badge b { font-family: var(--stk-font-display); font-size: 16px; color: var(--stk-ink); }
.stk-hero__badge .stk-chg { font-size: 12px; font-weight: 700; }
.stk-hero__badge--1 { top: 12%; left: -4%; }
.stk-hero__badge--2 { bottom: 14%; right: -2%; animation-delay: 1.4s; }
.stk-up { color: var(--stk-green); }
.stk-down { color: #F43F5E; }
.stk-badge__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--stk-grad); display: grid; place-items: center; color: #fff; font-family: var(--stk-font-display); font-size: 11px; }

@keyframes stk-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes stk-fade { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes stk-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes stk-pulse { 0%,100% { opacity: .55; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes stk-draw { to { stroke-dashoffset: 0; } }
@keyframes stk-glow { 0%,100% { opacity: 1; } 50% { opacity: .65; } }

/* ==========================================================================
   Ticker marquee band
   ========================================================================== */
.stk-ticker {
	position: relative;
	background: var(--stk-grad);
	color: #fff;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(14,165,233,.22);
}
.stk-ticker__inner { display: flex; align-items: stretch; }
.stk-ticker__label {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--stk-font-display); font-weight: 700; font-size: 13px;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 16px 22px;
	background: rgba(15,23,42,.22);
	white-space: nowrap; z-index: 2;
}
.stk-ticker__label .stk-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: stk-blink 1.4s ease-in-out infinite; }
@keyframes stk-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.stk-ticker__viewport { flex: 1; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.stk-ticker__track { display: flex; gap: 0; width: max-content; animation: stk-marquee 38s linear infinite; }
.stk-ticker:hover .stk-ticker__track { animation-play-state: paused; }
@keyframes stk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stk-tick {
	display: flex; align-items: center; gap: 10px;
	padding: 16px 26px; white-space: nowrap;
	border-right: 1px solid rgba(255,255,255,.16);
	font-size: 14px;
}
.stk-tick__sym { font-family: var(--stk-font-display); font-weight: 700; }
.stk-tick__price { font-weight: 600; opacity: .95; }
.stk-tick__chg { font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
.stk-ticker__cta { display: flex; align-items: center; padding: 0 20px; background: rgba(15,23,42,.18); }

/* ==========================================================================
   C. Masonry research flow + D. flip/slide cards
   ========================================================================== */
.stk-flow { background: var(--stk-bg); }
.stk-masonry { columns: 2; column-gap: 28px; }
.stk-masonry__item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 28px; display: inline-block; width: 100%; }

.stk-card {
	position: relative;
	background: var(--stk-white);
	border: 1px solid var(--stk-line);
	border-radius: var(--stk-radius);
	overflow: hidden;
	box-shadow: var(--stk-shadow-sm);
	transition: transform .42s var(--stk-ease), box-shadow .42s var(--stk-ease), border-color .42s var(--stk-ease);
	perspective: 1200px;
}
.stk-card:hover { transform: translateY(-6px); box-shadow: var(--stk-shadow-md); border-color: rgba(14,165,233,.35); }
.stk-card__media { position: relative; overflow: hidden; display: block; }
.stk-card__media img,
.stk-card__media .stk-thumb-fallback,
.stk-card__media .stk-thumb-fallback svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.stk-card__media .stk-thumb-fallback { aspect-ratio: 16 / 10; }
.stk-card__cat {
	position: absolute; top: 14px; left: 14px; z-index: 3;
	font-family: var(--stk-font-display); font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	background: rgba(255,255,255,.92); color: var(--stk-blue);
	padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.stk-card__body { padding: 22px 24px 24px; }
.stk-card__title { font-size: 19px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.stk-card__title a { color: var(--stk-ink); }
.stk-card__title a:hover { color: var(--stk-blue); }
.stk-card__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--stk-muted); }
.stk-card__meta .stk-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--stk-line); }

/* Text-only masonry card variant (natural height variance) */
.stk-card--text { background: var(--stk-grad-soft); border-color: rgba(14,165,233,.18); }
.stk-card--text .stk-card__title { font-size: 22px; }
.stk-card--quote {
	background: var(--stk-ink); color: #fff; border-color: transparent;
	padding: 30px 28px;
}
.stk-card--quote .stk-card__title { color: #fff; font-size: 22px; }
.stk-card--quote blockquote { margin: 0; font-family: var(--stk-font-display); font-size: 20px; line-height: 1.4; font-weight: 600; }
.stk-card--quote .stk-card__meta { color: rgba(255,255,255,.6); margin-top: 16px; }
.stk-card--quote .stk-quote-mark { font-size: 54px; line-height: .6; color: var(--stk-green); font-family: var(--stk-font-display); }

/* Hover slide-out reveal panel (spec D) */
.stk-card__reveal {
	position: absolute; inset: auto 0 0 0;
	background: linear-gradient(to top, rgba(15,23,42,.96) 30%, rgba(15,23,42,.82) 70%, rgba(15,23,42,0));
	color: #fff;
	padding: 44px 24px 24px;
	transform: translateY(101%);
	transition: transform .46s var(--stk-ease);
}
.stk-card:hover .stk-card__reveal,
.stk-card:focus-within .stk-card__reveal { transform: translateY(0); }
.stk-card--open .stk-card__reveal { transform: translateY(0); }
.stk-card--open .stk-card__titlebar { opacity: 0; }
.stk-card__reveal p { font-size: 14px; color: rgba(255,255,255,.82); margin: 0 0 14px; }
.stk-card__reveal .stk-reveal__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.stk-card__reveal .stk-reveal__cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--stk-font-display); font-weight: 700; font-size: 14px; color: #fff;
}
.stk-card__reveal .stk-reveal__cta svg { width: 17px; height: 17px; transition: transform .3s var(--stk-ease); }
.stk-card__reveal .stk-reveal__cta:hover { color: #7DE3C1; }
.stk-card__reveal .stk-reveal__cta:hover svg { transform: translateX(4px); }
/* Media cards keep a visible title bar; the reveal slides over the media */
.stk-card--media { min-height: 260px; }
.stk-card--media .stk-card__media { height: 260px; }
.stk-card--media.stk-card--tall .stk-card__media { height: 360px; }
.stk-card--media .stk-card__titlebar { position: absolute; inset: auto 0 0 0; padding: 40px 22px 20px; background: linear-gradient(to top, rgba(15,23,42,.9), transparent); z-index: 2; transition: opacity .3s; }
.stk-card--media:hover .stk-card__titlebar { opacity: 0; }
.stk-card--media .stk-card__titlebar h3 { color: #fff; font-size: 19px; margin: 0; }

.stk-flow__more { text-align: center; margin-top: 20px; }

/* ==========================================================================
   Instruments — 4 columns, gradient border
   ========================================================================== */
.stk-instruments { background: var(--stk-white); }
.stk-inst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stk-inst {
	position: relative;
	border-radius: var(--stk-radius);
	padding: 2px;
	background: var(--stk-line);
	transition: background .4s var(--stk-ease), transform .4s var(--stk-ease);
}
.stk-inst:hover { background: var(--stk-grad); transform: translateY(-6px); }
.stk-inst__inner {
	background: var(--stk-white);
	border-radius: calc(var(--stk-radius) - 2px);
	padding: 30px 24px;
	height: 100%;
	display: flex; flex-direction: column;
}
.stk-inst__icon {
	width: 58px; height: 58px; border-radius: 16px;
	background: var(--stk-grad-soft);
	display: grid; place-items: center;
	position: relative;
	color: var(--stk-blue);
	margin-bottom: 20px;
	transition: background .4s, color .4s, transform .4s var(--stk-ease);
}
.stk-inst:hover .stk-inst__icon { background: var(--stk-grad); color: #fff; transform: rotate(-6deg) scale(1.05); }
.stk-inst__icon svg { width: 30px; height: 30px; }
.stk-inst__icon .stk-iconimg--overlay { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; object-fit: contain; }
.stk-hero__trust .stk-iconimg { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.stk-inst h3 { font-size: 19px; margin: 0 0 8px; }
.stk-inst p { color: var(--stk-muted); font-size: 14.5px; margin: 0 0 20px; flex: 1; }
.stk-inst__link {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--stk-font-display); font-weight: 700; font-size: 14px; color: var(--stk-blue);
}
.stk-inst__link svg { width: 16px; height: 16px; transition: transform .3s var(--stk-ease); }
.stk-inst__link:hover { color: var(--stk-green); }
.stk-inst__link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   H. Wave divider
   ========================================================================== */
.stk-wave { line-height: 0; font-size: 0; margin-top: -1px; }
.stk-wave svg { width: 100%; height: 90px; display: block; }
.stk-wave--flip svg { transform: rotate(180deg); }
.stk-wave--light svg { height: 70px; }

/* ==========================================================================
   Advantages — 3 columns gradient icon cards
   ========================================================================== */
.stk-advantages { background: var(--stk-bg); }
.stk-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stk-adv {
	background: var(--stk-white);
	border: 1px solid var(--stk-line);
	border-radius: var(--stk-radius);
	padding: 36px 30px;
	position: relative; overflow: hidden;
	transition: transform .4s var(--stk-ease), box-shadow .4s var(--stk-ease);
}
.stk-adv::before {
	content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: var(--stk-grad); transform: scaleX(0); transform-origin: left;
	transition: transform .5s var(--stk-ease);
}
.stk-adv:hover { transform: translateY(-8px); box-shadow: var(--stk-shadow-md); }
.stk-adv:hover::before { transform: scaleX(1); }
.stk-adv__icon {
	width: 66px; height: 66px; border-radius: 20px;
	background: var(--stk-grad); color: #fff;
	display: grid; place-items: center; margin-bottom: 22px;
	box-shadow: 0 12px 26px rgba(14,165,233,.28);
}
.stk-adv__icon svg { width: 32px; height: 32px; }
.stk-adv h3 { font-size: 21px; margin: 0 0 10px; }
.stk-adv p { color: var(--stk-muted); margin: 0; font-size: 15px; }

/* ==========================================================================
   Stats band — gradient bg + white numbers
   ========================================================================== */
.stk-stats {
	background: var(--stk-grad);
	color: #fff; position: relative; overflow: hidden;
}
.stk-stats::after {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
	background-size: 26px 26px; opacity: .5; pointer-events: none;
}
.stk-stats__inner { position: relative; z-index: 1; text-align: center; }
.stk-stats .stk-kicker { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.stk-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 44px 0; }
.stk-stat__num { font-family: var(--stk-font-display); font-size: clamp(34px, 5vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.stk-stat__label { font-size: 14px; opacity: .9; margin-top: 10px; font-weight: 500; }
.stk-stat { padding: 20px; border-radius: var(--stk-radius); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); transition: transform .35s var(--stk-ease), background .35s; }
.stk-stat:hover { transform: translateY(-5px); background: rgba(255,255,255,.16); }

/* ==========================================================================
   CTA area
   ========================================================================== */
.stk-cta-band { background: var(--stk-white); }
.stk-cta-card {
	background:
		radial-gradient(700px 300px at 12% 0%, rgba(14,165,233,.16), transparent 60%),
		radial-gradient(700px 320px at 92% 100%, rgba(16,185,129,.16), transparent 60%),
		var(--stk-ink);
	border-radius: 28px;
	color: #fff;
	padding: 64px 56px;
	text-align: center;
	position: relative; overflow: hidden;
	box-shadow: var(--stk-shadow-lg);
}
.stk-cta-card h2 { color: #fff; font-size: clamp(26px, 3.6vw, 40px); max-width: 640px; margin: 0 auto 16px; }
.stk-cta-card p { color: rgba(255,255,255,.72); max-width: 540px; margin: 0 auto 30px; font-size: 17px; }
.stk-cta-card__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.stk-cta-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; }
.stk-cta-orb--1 { width: 260px; height: 260px; background: #0EA5E9; top: -80px; left: -60px; animation: stk-float 10s ease-in-out infinite; }
.stk-cta-orb--2 { width: 240px; height: 240px; background: #10B981; bottom: -90px; right: -50px; animation: stk-float 12s ease-in-out infinite reverse; }

/* ==========================================================================
   G. Floating capsule CTA (appears on scroll)
   ========================================================================== */
.stk-capsule {
	position: fixed; right: 26px; bottom: 26px; z-index: 900;
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--stk-grad); color: #fff;
	font-family: var(--stk-font-display); font-weight: 700; font-size: 15px;
	padding: 15px 24px; border-radius: 999px;
	box-shadow: 0 16px 40px rgba(14,165,233,.42);
	opacity: 0; transform: translateY(24px) scale(.9); pointer-events: none;
	transition: opacity .4s var(--stk-ease), transform .4s var(--stk-ease), box-shadow .3s;
}
.stk-capsule svg { width: 20px; height: 20px; }
.stk-capsule:hover { color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 50px rgba(16,185,129,.5); }
.stk-capsule.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.stk-capsule__pulse { position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(16,185,129,.5); animation: stk-ring 2.4s ease-out infinite; }
@keyframes stk-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }

/* Back to top */
.stk-totop {
	position: fixed; right: 30px; bottom: 92px; z-index: 900;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--stk-white); color: var(--stk-blue);
	border: 1px solid var(--stk-line); box-shadow: var(--stk-shadow-md);
	display: grid; place-items: center; cursor: pointer;
	opacity: 0; transform: translateY(16px); pointer-events: none;
	transition: opacity .35s, transform .35s, color .25s;
}
.stk-totop svg { width: 20px; height: 20px; }
.stk-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.stk-totop:hover { color: var(--stk-green); }

/* ==========================================================================
   F. Footer — 4 columns gradient bg
   ========================================================================== */
.stk-footer { background: linear-gradient(135deg, #0EA5E9 0%, #0D9488 55%, #10B981 100%); color: #fff; position: relative; }
.stk-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 72px 0 48px; }
.stk-footer__brand .stk-brand__mark { background: rgba(255,255,255,.18); box-shadow: none; }
.stk-footer__brand .stk-brand__name { color: #fff; }
.stk-footer__about { color: rgba(255,255,255,.82); font-size: 14.5px; margin: 18px 0 22px; max-width: 320px; }
.stk-footer__cta { display: inline-flex; }
.stk-footer__col h4 { color: #fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 18px; font-weight: 700; }
.stk-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.stk-footer__links a { color: rgba(255,255,255,.86); font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; transition: transform .25s var(--stk-ease), color .25s; }
.stk-footer__links a:hover { color: #fff; transform: translateX(5px); }
.stk-footer__links svg { width: 14px; height: 14px; opacity: .7; }
.stk-footer__bottom { border-top: 1px solid rgba(255,255,255,.22); padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.stk-footer__copy { font-size: 13.5px; color: rgba(255,255,255,.8); }
.stk-footer__disclaimer { font-size: 12.5px; color: rgba(255,255,255,.65); width: 100%; }
.stk-footer .stk-langswitch { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.stk-footer .stk-langswitch a { color: rgba(255,255,255,.85); }
.stk-footer .stk-langswitch a.stk-active { background: #fff; color: var(--stk-blue); }
.stk-footer__langwrap { display: flex; align-items: center; gap: 12px; }
.stk-footer__langwrap span { font-size: 13px; color: rgba(255,255,255,.75); }

/* ==========================================================================
   E. Single — full width + sticky TOC right
   ========================================================================== */
.stk-single { padding: 56px 0 88px; background: var(--stk-bg); }
.stk-single__layout { display: grid; grid-template-columns: minmax(0, 800px) 200px; gap: 56px; justify-content: center; align-items: start; }
.stk-single__main { min-width: 0; }
.stk-article-head { margin-bottom: 30px; }
.stk-article-head h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin: 12px 0 18px; }
.stk-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--stk-muted); }
.stk-article-meta .stk-chip { display: inline-flex; align-items: center; gap: 7px; }
.stk-article-meta svg { width: 16px; height: 16px; color: var(--stk-blue); }
.stk-article-hero { border-radius: var(--stk-radius); overflow: hidden; margin-bottom: 34px; box-shadow: var(--stk-shadow-md); aspect-ratio: 16 / 8; }
.stk-article-hero img, .stk-article-hero .stk-thumb-fallback, .stk-article-hero .stk-thumb-fallback svg { width: 100%; height: 100%; object-fit: cover; }

.stk-content { font-size: 17.5px; line-height: 1.85; color: var(--stk-ink-soft); }
.stk-content > *:first-child { margin-top: 0; }
.stk-content h2 { font-size: 27px; margin: 42px 0 16px; scroll-margin-top: 100px; }
.stk-content h3 { font-size: 21px; margin: 32px 0 12px; scroll-margin-top: 100px; }
.stk-content p { margin: 0 0 20px; }
.stk-content a { color: var(--stk-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(14,165,233,.35); }
.stk-content a:hover { color: var(--stk-green); }
.stk-content ul, .stk-content ol { margin: 0 0 22px; padding-left: 24px; }
.stk-content li { margin-bottom: 10px; }
.stk-content blockquote {
	margin: 28px 0; padding: 20px 26px; border-left: 4px solid; border-image: var(--stk-grad) 1;
	background: var(--stk-grad-soft); border-radius: 0 var(--stk-radius-sm) var(--stk-radius-sm) 0;
	font-family: var(--stk-font-display); font-size: 19px; font-weight: 600; color: var(--stk-ink);
}
.stk-content img { border-radius: var(--stk-radius-sm); margin: 24px 0; }
.stk-content pre { background: var(--stk-ink); color: #E2E8F0; padding: 20px; border-radius: var(--stk-radius-sm); overflow-x: auto; font-size: 14px; }
.stk-content code { background: rgba(14,165,233,.1); color: var(--stk-blue); padding: 2px 7px; border-radius: 6px; font-size: 15px; }
.stk-content pre code { background: none; color: inherit; padding: 0; }
.stk-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.stk-content th, .stk-content td { border: 1px solid var(--stk-line); padding: 12px 14px; text-align: left; }
.stk-content th { background: var(--stk-grad-soft); font-family: var(--stk-font-display); }

/* Sticky TOC */
.stk-toc { position: sticky; top: calc(var(--stk-topbar-h-sm) + 28px); align-self: start; }
.stk-toc__title { font-family: var(--stk-font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stk-muted); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.stk-toc__title::before { content: ''; width: 18px; height: 2px; background: var(--stk-grad); border-radius: 2px; }
.stk-toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--stk-line); display: flex; flex-direction: column; gap: 2px; }
.stk-toc__list a { display: block; padding: 7px 0 7px 16px; font-size: 13.5px; color: var(--stk-muted); margin-left: -2px; border-left: 2px solid transparent; line-height: 1.4; transition: color .25s, border-color .25s; }
.stk-toc__list a:hover { color: var(--stk-blue); }
.stk-toc__list a.is-active { color: var(--stk-blue); border-left-color: var(--stk-blue); font-weight: 600; }
.stk-toc__list .stk-toc-h3 { padding-left: 30px; font-size: 12.5px; }

/* Post footer nav + end CTA */
.stk-post-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; }
.stk-post-tags a { font-size: 13px; font-weight: 600; color: var(--stk-blue); background: var(--stk-grad-soft); border: 1px solid rgba(14,165,233,.2); padding: 6px 14px; border-radius: 999px; }
.stk-post-tags a:hover { background: var(--stk-grad); color: #fff; border-color: transparent; }
.stk-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.stk-post-nav a { background: var(--stk-white); border: 1px solid var(--stk-line); border-radius: var(--stk-radius-sm); padding: 18px 20px; transition: border-color .3s, transform .3s var(--stk-ease); }
.stk-post-nav a:hover { border-color: rgba(14,165,233,.4); transform: translateY(-3px); }
.stk-post-nav span { display: block; font-size: 12px; color: var(--stk-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.stk-post-nav strong { color: var(--stk-ink); font-family: var(--stk-font-display); font-size: 15px; line-height: 1.35; display: block; }
.stk-post-nav .stk-next { text-align: right; }
.stk-endcta { margin-top: 44px; background: var(--stk-grad-soft); border: 1px solid rgba(14,165,233,.2); border-radius: var(--stk-radius); padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stk-endcta h3 { font-size: 22px; margin: 0 0 6px; }
.stk-endcta p { color: var(--stk-muted); margin: 0; }

/* Comments */
.stk-comments { margin-top: 56px; }
.stk-comments h3 { font-size: 22px; }
.stk-comments .comment-list { list-style: none; padding: 0; }
.stk-comments .comment { background: var(--stk-white); border: 1px solid var(--stk-line); border-radius: var(--stk-radius-sm); padding: 20px; margin-bottom: 16px; }
.stk-comments .comment-respond { margin-top: 24px; }

/* ==========================================================================
   Archive / index / search headers + loops
   ========================================================================== */
.stk-page-head {
	background:
		radial-gradient(800px 340px at 78% -10%, rgba(14,165,233,.14), transparent 60%),
		radial-gradient(700px 320px at 6% 0%, rgba(16,185,129,.12), transparent 55%),
		var(--stk-white);
	border-bottom: 1px solid var(--stk-line);
	padding: 56px 0 48px;
}
.stk-page-head h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; margin: 0 0 12px; }
.stk-page-head p { color: var(--stk-muted); font-size: 17px; margin: 0; max-width: 620px; }
.stk-page-head .stk-crumbs { font-size: 13px; color: var(--stk-muted); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.stk-page-head .stk-crumbs a { color: var(--stk-blue); }

.stk-listing { padding: 56px 0 80px; }
.stk-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Horizontal list card (archive-loop) */
.stk-lcard { background: var(--stk-white); border: 1px solid var(--stk-line); border-radius: var(--stk-radius); overflow: hidden; box-shadow: var(--stk-shadow-sm); transition: transform .38s var(--stk-ease), box-shadow .38s, border-color .38s; height: 100%; display: flex; flex-direction: column; }
.stk-lcard:hover { transform: translateY(-6px); box-shadow: var(--stk-shadow-md); border-color: rgba(14,165,233,.35); }
.stk-lcard__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; display: block; }
.stk-lcard__media img, .stk-lcard__media .stk-thumb-fallback, .stk-lcard__media .stk-thumb-fallback svg { width: 100%; height: 100%; object-fit: cover; }
.stk-lcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.stk-lcard__cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stk-blue); margin-bottom: 10px; }
.stk-lcard__title { font-size: 19px; margin: 0 0 10px; line-height: 1.3; }
.stk-lcard__title a { color: var(--stk-ink); }
.stk-lcard__title a:hover { color: var(--stk-blue); }
.stk-lcard__excerpt { color: var(--stk-muted); font-size: 14.5px; margin: 0 0 16px; flex: 1; }
.stk-lcard__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--stk-muted); }
.stk-lcard__meta .stk-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--stk-line); }

/* Pagination */
.stk-pagination { margin-top: 52px; display: flex; justify-content: center; }
.stk-pagination .nav-links, .stk-pagination .page-numbers { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.stk-pagination .page-numbers {
	min-width: 42px; height: 42px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--stk-font-display); font-weight: 600; font-size: 14px;
	color: var(--stk-ink-soft); background: var(--stk-white); border: 1px solid var(--stk-line); border-radius: 12px;
	transition: all .28s var(--stk-ease);
}
.stk-pagination a.page-numbers:hover { color: var(--stk-blue); border-color: rgba(14,165,233,.4); transform: translateY(-2px); }
.stk-pagination .page-numbers.current { background: var(--stk-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(14,165,233,.3); }

.stk-empty { text-align: center; padding: 60px 20px; color: var(--stk-muted); }
.stk-empty svg { width: 56px; height: 56px; color: var(--stk-line); margin-bottom: 18px; }

/* Search form */
.stk-searchform { display: flex; gap: 10px; max-width: 560px; }
.stk-searchform .stk-field { flex: 1; position: relative; }
.stk-searchform input[type="search"], .stk-searchform input[type="text"] {
	width: 100%; padding: 14px 18px 14px 46px; border-radius: 999px;
	border: 1px solid var(--stk-line); background: var(--stk-white);
	font-family: var(--stk-font-body); font-size: 15px; color: var(--stk-ink);
	transition: border-color .25s, box-shadow .25s;
}
.stk-searchform input:focus { outline: none; border-color: var(--stk-blue); box-shadow: 0 0 0 4px rgba(14,165,233,.12); }
.stk-searchform .stk-field svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--stk-muted); }

/* 404 */
.stk-404 { text-align: center; padding: 90px 0; }
.stk-404__code { font-family: var(--stk-font-display); font-size: clamp(90px, 20vw, 200px); font-weight: 800; line-height: .9; }
.stk-404 h1 { font-size: clamp(26px, 4vw, 38px); margin: 12px 0 16px; }
.stk-404 p { color: var(--stk-muted); max-width: 520px; margin: 0 auto 30px; }

/* Page template */
.stk-page { padding: 56px 0 80px; }
.stk-page__body { max-width: 820px; margin: 0 auto; }

/* Reveal on scroll utility (JS toggles .stk-inview) */
.stk-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--stk-ease), transform .7s var(--stk-ease); }
.stk-reveal.stk-inview { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.stk-single__layout { grid-template-columns: minmax(0, 1fr); }
	.stk-toc { position: static; order: -1; margin-bottom: 32px; }
	.stk-toc__list { border-left: none; flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.stk-toc__list a { border: 1px solid var(--stk-line); border-radius: 999px; padding: 6px 14px; margin: 0; }
	.stk-toc__list a.is-active { border-color: var(--stk-blue); }
	.stk-toc__list .stk-toc-h3 { padding-left: 14px; }
	.stk-inst-grid { grid-template-columns: repeat(2, 1fr); }
	.stk-adv-grid { grid-template-columns: 1fr; }
	.stk-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.stk-list-grid { grid-template-columns: repeat(2, 1fr); }
	.stk-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
	.stk-nav, .stk-topbar__actions .stk-btn, .stk-topbar__actions .stk-langswitch { display: none; }
	.stk-burger { display: grid; }
	.stk-hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.stk-hero__art { max-width: 420px; margin: 0 auto; }
	.stk-masonry { columns: 1; }
}

@media (max-width: 640px) {
	.stk-section { padding: 64px 0; }
	.stk-inst-grid { grid-template-columns: 1fr; }
	.stk-stats__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.stk-list-grid { grid-template-columns: 1fr; }
	.stk-footer__top { grid-template-columns: 1fr; }
	.stk-post-nav { grid-template-columns: 1fr; }
	.stk-cta-card { padding: 44px 26px; }
	.stk-capsule { right: 16px; bottom: 16px; padding: 13px 20px; font-size: 14px; }
	.stk-totop { bottom: 82px; right: 20px; }
	.stk-endcta { flex-direction: column; align-items: flex-start; }
	.stk-hero { padding: 40px 0 64px; }
}

/* Accessibility & motion preferences */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.stk-reveal { opacity: 1; transform: none; }
	.stk-hero__chart .stk-line { stroke-dashoffset: 0; }
}

.stk-screen-reader { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ==== breadcrumb (added by automation) ==== */
.stk-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-size:.85rem;line-height:1.4;margin:0 0 1.1rem;opacity:.9}
.stk-crumb a{color:inherit;text-decoration:none}
.stk-crumb a:hover{text-decoration:underline}
.stk-crumb .stk-sep{opacity:.45}
.stk-crumb .stk-current{font-weight:600}
.stk-crumb-bar{padding-top:16px}