/*
Theme Name:   Agency Child
Theme URI:    https://baranov-nikita.ru
Description:  Дочерняя тема агентского сайта-портфолио
Author:       Nikita Baranov
Template:     twentytwentyfive
Version:      2.0.0
Text Domain:  agency-child
*/

/* ============================================================
   TWENTYTWENTYFIVE / BLOCK THEME OVERRIDES
   ============================================================ */
html { background-color: #080806 !important; }

body {
	background-color: #080806 !important;
	color: #F0EDE5 !important;
	font-family: 'Space Grotesk', sans-serif !important;
}

.wp-site-blocks {
	padding-top:    0 !important;
	padding-right:  0 !important;
	padding-bottom: 0 !important;
	padding-left:   0 !important;
}

.skip-link:not(:focus) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Syne', sans-serif !important;
	font-weight: 800 !important;
}

/* Admin bar pushes fixed nav down */
.admin-bar .site-nav { top: 32px; }
.admin-bar .cfilters { top: 96px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-nav { top: 46px; }
	.admin-bar .cfilters { top: 102px; }
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	--bg:      #080806;
	--cream:   #F0EDE5;
	--orange:  #FF4500;
	--lime:    #C8FF00;
	--muted:   #5A5850;
	--border:  rgba(240, 237, 229, 0.1);
	--sans:    'Space Grotesk', sans-serif;
	--display: 'Syne', sans-serif;
	--mono:    'Space Mono', monospace;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html { scroll-behavior: smooth; }

body {
	background: var(--bg);
	color: var(--cream);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	cursor: none;
	overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: none; font-family: inherit; }

/* ============================================================
   NOISE OVERLAY
   ============================================================ */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	opacity: 0.04;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot {
	position: fixed;
	width: 12px;
	height: 12px;
	background: var(--lime);
	border-radius: 50%;
	pointer-events: none;
	z-index: 10001;
	transform: translate(-50%, -50%);
	mix-blend-mode: difference;
}

.cursor-ring {
	position: fixed;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(200, 255, 0, 0.4);
	border-radius: 50%;
	pointer-events: none;
	z-index: 10000;
	transform: translate(-50%, -50%);
	transition: width 0.25s, height 0.25s, border-color 0.2s;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 40px;
}

.site-nav__logo {
	font-family: var(--display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -1px;
}
.site-nav__logo span { color: var(--lime); }

.site-nav__links {
	display: flex;
	gap: 32px;
	list-style: none;
}
.site-nav__links a {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: color 0.2s;
	position: relative;
}
.site-nav__links a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s;
}
.site-nav__links a:hover { color: var(--cream); }
.site-nav__links a:hover::after { transform: scaleX(1); }

.site-nav__cta {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--cream);
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
}
.site-nav__cta:hover {
	background: var(--lime);
	color: var(--bg);
	border-color: var(--lime);
}

/* Hamburger — mobile only */
.site-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	padding: 4px;
	flex-shrink: 0;
}
.site-nav__burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--cream);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.site-nav__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.site-nav__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-nav__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
	min-height: min(100svh, 900px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 120px 40px 60px;
	position: relative;
	overflow: hidden;
}

.hero-upper {
	display: flex;
	flex-direction: column;
}

.hero-bg-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--display);
	font-size: clamp(120px, 22vw, 260px);
	font-weight: 800;
	color: transparent;
	-webkit-text-stroke: 1px rgba(240, 237, 229, 0.04);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	letter-spacing: -8px;
	will-change: transform;
}

.hero-tag {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.hero-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lime);
	flex-shrink: 0;
	animation: blink 2s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.hero-h1 {
	font-family: var(--display);
	font-size: clamp(52px, 9vw, 120px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -4px;
	overflow: hidden;
}
.hero-h1 .line {
	display: block;
	transform: translateY(100%);
	animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-h1 .line:nth-child(2) { animation-delay: 0.1s; }
.hero-h1 .line:nth-child(3) { animation-delay: 0.2s; }
@keyframes slideUp { to { transform: translateY(0); } }

.hero-h1 .acc  { color: var(--orange); font-style: italic; }
.hero-h1 .acc2 { color: var(--lime); }

.hero-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.hero-desc {
	max-width: 320px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.7;
}

.hero-ctas {
	display: flex;
	gap: 12px;
	align-items: center;
}

.hero-stats {
	display: flex;
	gap: 32px;
}

.hstat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-left: 1px solid var(--border);
	padding-left: 20px;
}
.hstat-n {
	font-family: var(--display);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	color: var(--cream);
}
.hstat-n span { color: var(--lime); }
.hstat-l {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-fill {
	background: var(--lime);
	color: var(--bg);
	padding: 14px 28px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s;
	border: none;
}
.btn-fill::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--orange);
	transform: translateX(-101%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-fill:hover::before { transform: translateX(0); }
.btn-fill:hover { transform: translateY(-2px); color: var(--bg); }
.btn-fill span { position: relative; z-index: 1; }

.btn-ghost-sm {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--muted);
	padding: 14px 24px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
}
.btn-ghost-sm:hover { border-color: var(--cream); color: var(--cream); }

/* Aliases for other templates */
.btn-primary   { background: var(--lime); color: var(--bg); padding: 14px 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.2s; }
.btn-primary:hover { opacity: 0.85; }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--cream); padding: 14px 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: border-color 0.2s; }
.btn-secondary:hover { border-color: var(--cream); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-wrap {
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	overflow: hidden;
	height: 48px;
	display: flex;
	align-items: center;
}

.marquee-inner {
	display: flex;
	animation: marquee 35s linear infinite;
	will-change: transform;
}
.marquee-inner:hover { animation-play-state: paused; }

.marquee-set {
	display: flex;
	flex-shrink: 0;
}

@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.marquee-item {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 0 32px;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 20px;
	white-space: nowrap;
}
.marquee-item .m-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--orange);
	flex-shrink: 0;
}

/* ============================================================
   SECTION LABEL
   ============================================================ */
.section-label {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 40px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.section-label::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-section {
	padding: 80px 40px;
}

.svc-list {
	display: flex;
	flex-direction: column;
}

.svc-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--border);
	padding: 24px 0;
	gap: 32px;
	position: relative;
	overflow: hidden;
	color: var(--cream);
	transition: color 0.3s;
}
.svc-row::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 0;
}
.svc-row:hover::before  { transform: scaleX(1); }
.svc-row:hover          { color: var(--bg); }
.svc-row:hover .svc-n   { color: rgba(8, 8, 6, 0.5); }
.svc-row:hover .svc-desc,
.svc-row:hover .svc-price { color: rgba(8, 8, 6, 0.6); }
.svc-row:hover .svc-arrow { transform: rotate(-45deg); color: var(--bg); }
.svc-row > * { position: relative; z-index: 1; }

.svc-n {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	min-width: 36px;
	flex-shrink: 0;
	transition: color 0.2s;
}
.svc-name {
	font-family: var(--display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -1px;
	flex: 1;
}
.svc-desc {
	font-size: 13px;
	color: var(--muted);
	max-width: 260px;
	transition: color 0.2s;
}
.svc-price {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	min-width: 120px;
	text-align: right;
	white-space: nowrap;
	transition: color 0.2s;
}
.svc-arrow {
	font-size: 20px;
	color: var(--muted);
	transition: transform 0.3s, color 0.2s;
}

/* ============================================================
   CASES GRID
   ============================================================ */
.cases-section {
	padding: 0 40px 80px;
}

.cases-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}

.cases-title {
	font-family: var(--display);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 800;
	letter-spacing: -3px;
	line-height: 1;
}
.cases-title em { font-style: italic; color: var(--orange); }

.all-cases {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 1px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color 0.2s;
}
.all-cases:hover { color: var(--lime); }

.case-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--border);
}

.case-card {
	background: var(--bg);
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.case-card.big { grid-row: span 2; }

.case-card-inner {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-card:hover .case-card-inner { transform: scale(1.02); }

.case-thumb {
	background: #111110;
	height: 220px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.case-card.big .case-thumb { height: 300px; }

.case-thumb-bg {
	position: absolute;
	inset: 0;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-card:hover .case-thumb-bg { transform: scale(1.08); }

/* Mock UI inside case thumbnail */
.case-mock {
	width: 72%;
	background: #1A1A18;
	border: 1px solid rgba(240, 237, 229, 0.08);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	z-index: 1;
}
.mock-bar  { height: 6px; background: #2A2A28; border-radius: 1px; }
.mock-bar.w70 { width: 70%; }
.mock-bar.w50 { width: 50%; }
.mock-block { height: 44px; background: #2A2A28; border-radius: 1px; }
.mock-row   { display: flex; gap: 6px; }
.mock-half  { flex: 1; height: 32px; background: #2A2A28; border-radius: 1px; }
.mock-btn   { height: 24px; width: 80px; background: var(--orange); border-radius: 1px; opacity: 0.8; }

/* Case card info */
.case-body  { padding: 20px 24px 24px; }

.case-tags  { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.case-tag {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 3px 8px;
}

.case-name {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 12px;
	line-height: 1.2;
	color: var(--cream);
}

.case-nums  { display: flex; gap: 20px; flex-wrap: wrap; }
.cn         { display: flex; flex-direction: column; gap: 2px; }
.cn-v {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 800;
	color: var(--lime);
	line-height: 1;
}
.cn-k {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.case-hover-tag {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--lime);
	color: var(--bg);
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 10px;
	font-weight: 700;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s, transform 0.25s;
	z-index: 2;
}
.case-card:hover .case-hover-tag { opacity: 1; transform: translateY(0); }

/* ============================================================
   WHY
   ============================================================ */
.why-section {
	padding: 80px 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
	border-top: 1px solid var(--border);
}

.why-big {
	font-family: var(--display);
	font-size: clamp(48px, 7vw, 88px);
	font-weight: 800;
	letter-spacing: -3px;
	line-height: 0.95;
	margin-bottom: 32px;
}
.why-big em { color: var(--lime); font-style: italic; }

.why-desc {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.7;
	max-width: 360px;
}

.why-right {
	display: flex;
	flex-direction: column;
	padding-top: 24px;
}

.why-item {
	display: flex;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
	transition: color 0.2s;
	cursor: default;
}
.why-item:hover .why-item-title { color: var(--lime); }

.why-item-n {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--orange);
	letter-spacing: 0.5px;
	padding-top: 4px;
	min-width: 28px;
	flex-shrink: 0;
}
.why-item-title {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
	transition: color 0.2s;
}
.why-item-text {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.65;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-section {
	padding: 0 40px 80px;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--border);
	margin-top: 0;
}

.rev {
	background: var(--bg);
	padding: 32px 28px;
	transition: background 0.2s;
	cursor: default;
}
.rev:hover { background: #0F0F0D; }

.rev-quote {
	font-family: var(--display);
	font-size: 60px;
	font-weight: 800;
	color: var(--orange);
	opacity: 0.25;
	line-height: 0.8;
	margin-bottom: 16px;
}
.rev-text {
	font-size: 13px;
	color: rgba(240, 237, 229, 0.7);
	line-height: 1.75;
	margin-bottom: 20px;
	font-style: italic;
}
.rev-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--cream);
}
.rev-co {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 0.5px;
	margin-top: 3px;
}

/* ============================================================
   CTA FORM
   ============================================================ */
.cta-section {
	margin: 0 40px 80px;
	border: 1px solid var(--border);
	overflow: hidden;
}

.cta-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 420px;
}

.cta-left {
	padding: 56px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}
.cta-left::before {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: var(--orange);
	opacity: 0.08;
	top: -100px;
	left: -100px;
	animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.cta-eyebrow {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.cta-big {
	font-family: var(--display);
	font-size: clamp(36px, 4.5vw, 64px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 0.95;
	position: relative;
	z-index: 1;
}
.cta-big em { color: var(--orange); font-style: italic; }

.cta-note {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.6;
	position: relative;
	z-index: 1;
	max-width: 280px;
}

.cta-right {
	padding: 56px;
	border-left: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cta-form { display: flex; flex-direction: column; gap: 0; }

.cta-field { margin-bottom: 4px; }

.field-label {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.field-input,
.cta-form__input,
.cta-form__textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border);
	padding: 10px 0;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--cream);
	outline: none;
	transition: border-color 0.2s;
	resize: none;
	margin-bottom: 16px;
}
.field-input::placeholder,
.cta-form__input::placeholder,
.cta-form__textarea::placeholder { color: var(--muted); }
.field-input:focus,
.cta-form__input:focus,
.cta-form__textarea:focus { border-bottom-color: var(--lime); }

.cta-submit {
	margin-top: 16px;
	width: 100%;
	background: var(--lime);
	color: var(--bg);
	padding: 16px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border: none;
	font-weight: 700;
	transition: transform 0.2s, opacity 0.2s;
}
.cta-submit:hover { transform: translateY(-2px); }
.cta-submit:disabled { opacity: 0.6; }

.cta-form__success {
	display: none;
	font-family: var(--display);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -1px;
	margin-top: 16px;
	color: var(--lime);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	border-top: 1px solid var(--border);
	padding: 24px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__logo {
	font-family: var(--display);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -1px;
}
.site-footer__logo span { color: var(--lime); }

.site-footer__copy {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 0.5px;
}

.site-footer__links {
	display: flex;
	gap: 24px;
	list-style: none;
}
.site-footer__links a {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: color 0.2s;
}
.site-footer__links a:hover { color: var(--lime); }

/* ============================================================
   CASE FILTER (archive page)
   ============================================================ */
.case-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 48px;
}
.case-filter__btn {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 8px 16px;
	color: var(--muted);
	transition: all 0.2s;
}
.case-filter__btn:hover,
.case-filter__btn.is-active {
	background: var(--lime);
	color: var(--bg);
	border-color: var(--lime);
}

/* ============================================================
   SINGLE SERVICE PAGE
   ============================================================ */
.svc-hero {
	padding: 140px 40px 80px;
	border-bottom: 1px solid var(--border);
}
.svc-hero__label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 20px;
}
.svc-hero__title {
	font-family: var(--display);
	font-size: clamp(2.5rem, 6vw, 6rem);
	font-weight: 800;
	letter-spacing: -3px;
	line-height: 0.95;
	margin-bottom: 32px;
}
.svc-hero__meta {
	display: flex;
	gap: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
	flex-wrap: wrap;
}
.svc-meta-item__label {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}
.svc-meta-item__value {
	font-family: var(--display);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -1px;
}

.svc-process {
	padding: 80px 40px;
	border-bottom: 1px solid var(--border);
}
.svc-process__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2px;
	background: var(--border);
	margin-top: 40px;
}
.svc-process__step {
	background: var(--bg);
	padding: 32px 28px;
}
.svc-process__num {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--orange);
	letter-spacing: 1px;
	margin-bottom: 16px;
}
.svc-process__title {
	font-family: var(--display);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin-bottom: 8px;
}
.svc-process__desc {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.65;
}

.svc-faq {
	padding: 80px 40px;
}
.svc-faq__item {
	border-bottom: 1px solid var(--border);
}
.svc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
	cursor: pointer;
	gap: 24px;
}
.svc-faq__q-text {
	font-family: var(--display);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.5px;
}
.svc-faq__icon {
	font-size: 1.5rem;
	color: var(--lime);
	flex-shrink: 0;
	transition: transform 0.3s;
}
.svc-faq__item.is-open .svc-faq__icon { transform: rotate(45deg); }
.svc-faq__a {
	display: none;
	padding-bottom: 24px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.75;
	max-width: 700px;
}
.svc-faq__item.is-open .svc-faq__a { display: block; }

/* ============================================================
   SINGLE CASE PAGE
   ============================================================ */
.case-hero {
	padding: 160px 40px 80px;
	border-bottom: 1px solid var(--border);
}
.case-hero__tags   { display: flex; gap: 8px; margin-bottom: 24px; }
.case-hero__title  { max-width: 800px; margin-bottom: 40px; }
.case-hero__metrics {
	display: flex;
	gap: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
	flex-wrap: wrap;
}
.case-metric-big__value {
	font-family: var(--display);
	font-size: clamp(2.5rem, 5vw, 5rem);
	font-weight: 800;
	letter-spacing: -3px;
}
.case-metric-big__label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 4px;
}
.case-body-layout {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 80px;
	padding: 80px 40px;
}
.case-sidebar dt {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
	margin-top: 24px;
}
.case-sidebar dt:first-child { margin-top: 0; }
.case-sidebar dd { font-size: 14px; }

/* ============================================================
   SINGLE CASE — новый шаблон
   ============================================================ */
.case-single-hero {
	padding: 140px 40px 80px;
	border-bottom: 1px solid var(--border);
}
.case-single-hero__back a {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	margin-bottom: 32px;
	display: inline-block;
	transition: color 0.2s;
}
.case-single-hero__back a:hover { color: var(--lime); }
.case-single-hero__tags { display: flex; gap: 8px; margin-bottom: 24px; }
.case-single-hero__title {
	font-family: var(--display);
	font-size: clamp(2.5rem, 6vw, 6rem);
	font-weight: 800;
	letter-spacing: -3px;
	line-height: 0.95;
	margin-bottom: 20px;
	max-width: 900px;
}
.case-single-hero__desc {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.75;
	max-width: 620px;
	margin-bottom: 40px;
}
.case-single-metrics {
	display: flex;
	gap: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
	flex-wrap: wrap;
}
.csm-item {}
.csm-val {
	font-family: var(--display);
	font-size: clamp(2rem, 4vw, 4rem);
	font-weight: 800;
	letter-spacing: -2px;
	color: var(--lime);
	line-height: 1;
}
.csm-key {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 6px;
}
.case-single-thumb {
	border-bottom: 1px solid var(--border);
}
.case-single-thumb__img {
	width: 100%;
	height: 560px;
	object-fit: cover;
	display: block;
}
.case-single-body {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0;
	padding: 80px 40px;
	align-items: start;
}
.case-single-main { padding-right: 80px; }
.case-single-block { margin-bottom: 60px; }
.case-single-text {
	font-size: 15px;
	color: var(--muted);
	line-height: 1.8;
	margin-top: 24px;
}
.case-single-text p { margin-bottom: 16px; }
.case-content h2 {
	font-family: var(--display);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--cream);
	letter-spacing: -1px;
	margin: 40px 0 16px;
}

/* Изображения и галерея в контенте кейса */
.case-content img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	margin: 32px 0;
}
.case-content .wp-block-image,
.case-content figure {
	margin: 32px 0;
}
.case-content figcaption {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 1px;
	text-align: center;
	margin-top: 8px;
}

/* Галерея — сетка мокапов */
.case-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
	margin: 32px 0;
}
.case-content .gallery-item {
	overflow: hidden;
	border-radius: 4px;
}
.case-content .gallery-item img {
	margin: 0;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.case-content .gallery-item img:hover {
	transform: scale(1.03);
}
.case-aside-card {
	position: sticky;
	top: 100px;
	border: 1px solid var(--border);
	padding: 32px;
}
.case-aside-dl {}
.case-aside-row {
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}
.case-aside-row:last-child { border-bottom: none; }
.case-aside-row dt {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}
.case-aside-row dd {
	font-size: 14px;
	color: var(--cream);
}

.case-aside-results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--border);
}
.car-item {
	background: var(--bg);
	padding: 16px;
}
.car-val {
	font-family: var(--display);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--lime);
	line-height: 1;
	margin-bottom: 4px;
}
.car-key {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ============================================================
   LABEL (legacy alias)
   ============================================================ */
.label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
	.case-grid        { grid-template-columns: 1fr; }
	.case-card.big    { grid-row: span 1; }
	.case-card.big .case-thumb { height: 240px; }
	.why-section      { grid-template-columns: 1fr; gap: 40px; }
	.why-right        { padding-top: 0; }
	.reviews-grid     { grid-template-columns: repeat(2, 1fr); }
	.cta-inner        { grid-template-columns: 1fr; }
	.cta-left         { min-height: 260px; }
	.case-body-layout { grid-template-columns: 1fr; }
	.case-single-body { grid-template-columns: 1fr; }
	.case-single-main { padding-right: 0; }
	.case-aside-card  { position: static; }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {

	/* Cursor — скрыть на мобильных */
	.cursor-dot,
	.cursor-ring      { display: none !important; }

	/* Nav */
	.site-nav         { padding: 14px 20px; }
	.site-nav__burger { display: flex; }
	.site-nav__cta    { display: none; }
	.site-nav__links {
		display: none;
		position: fixed;
		top: 57px;
		left: 0;
		right: 0;
		background: rgba(8, 8, 6, 0.97);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		flex-direction: column;
		gap: 0;
		padding: 0 20px 24px;
		border-bottom: 1px solid var(--border);
		z-index: 999;
	}
	.site-nav__links.is-open { display: flex; }
	.site-nav__links li { border-bottom: 1px solid var(--border); }
	.site-nav__links a { display: block; padding: 18px 0; font-size: 12px; color: var(--cream); }
	.site-nav__links a::after { display: none; }

	/* Admin bar + burger */
	.admin-bar .site-nav__links { top: 103px; }

	/* Hero */
	.hero             { padding: 80px 20px 40px; min-height: 100svh; }
	.hero-h1          { font-size: clamp(42px, 11vw, 72px); letter-spacing: -2px; }
	.hero-bottom      { flex-direction: column; align-items: flex-start; gap: 28px; }
	.hero-stats       { flex-wrap: wrap; gap: 16px; }
	.hero-ctas        { width: 100%; flex-direction: column; }
	.btn-fill,
	.btn-ghost-sm     { width: 100%; justify-content: center; }

	/* Sections */
	.services-section { padding: 60px 20px; }
	.cases-section    { padding: 0 20px 60px; }
	.why-section      { padding: 60px 20px; }
	.reviews-section  { padding: 0 20px 60px; }
	.cta-section      { margin: 0 20px 60px; }
	.site-footer      { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }

	/* Services */
	.svc-name         { font-size: 20px; }
	.svc-desc,
	.svc-price        { display: none; }

	/* Cases */
	.case-thumb       { height: 180px; }
	.cases-title      { font-size: 36px; }

	/* Reviews */
	.reviews-grid     { grid-template-columns: 1fr; }
	.rev              { padding: 28px 20px; }

	/* CTA */
	.cta-left,
	.cta-right        { padding: 40px 24px; }

	/* Single case */
	.case-hero          { padding: 110px 20px 48px; }
	.case-hero__metrics { flex-wrap: wrap; gap: 32px; }
	.case-body-layout   { padding: 40px 20px; gap: 40px; }
	.case-single-hero   { padding: 110px 20px 48px; }
	.case-single-metrics { gap: 28px; }
	.case-single-body   { padding: 40px 20px; gap: 40px; }
	.case-single-thumb__img { height: 240px; }

	/* Service single */
	.svc-hero           { padding: 100px 20px 48px; }
	.svc-hero__meta     { gap: 24px; }
	.svc-process        { padding: 48px 20px; }
	.svc-faq            { padding: 48px 20px; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
	.hero-h1    { font-size: clamp(36px, 11vw, 52px); letter-spacing: -1.5px; }
	.why-big    { font-size: 40px; letter-spacing: -2px; }
	.cta-big    { font-size: 32px; }
	.case-name  { font-size: 17px; }
	.svc-name   { font-size: 17px; }
}

/* ============================================================
   ОБЩИЙ HERO ДЛЯ ВНУТРЕННИХ СТРАНИЦ
   ============================================================ */
.pg-hero {
	padding: 100px 40px 60px;
	border-bottom: 1px solid var(--border);
}
.pg-hero__title {
	font-family: var(--display);
	font-size: clamp(48px, 8vw, 110px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -3px;
	margin-top: 16px;
}
.pg-hero__title em { color: var(--orange); font-style: italic; }

/* ============================================================
   СТРАНИЦА О СЕБЕ
   ============================================================ */
.about-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--border);
}
.about-left {
	padding: 60px 40px;
	border-right: 1px solid var(--border);
}
.about-right  { padding: 60px 40px; }
.about-text   { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 20px; }

.about-skills { list-style: none; padding: 0; margin: 0; }
.about-skill  {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
}
.about-skill:last-child { border-bottom: none; }
.about-skill__num  { font-family: var(--mono); font-size: 9px; color: var(--orange); letter-spacing: 1px; padding-top: 4px; flex-shrink: 0; width: 20px; }
.about-skill__name { font-family: var(--display); font-size: 1rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
.about-skill__desc { font-size: 12px; color: var(--muted); }

.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--border);
}
.about-stat {
	padding: 48px 40px;
	border-right: 1px solid var(--border);
}
.about-stat:last-child { border-right: none; }
.about-stat__n {
	font-family: var(--display);
	font-size: clamp(42px, 5vw, 72px);
	font-weight: 800;
	letter-spacing: -3px;
	line-height: 1;
	margin-bottom: 8px;
}
.about-stat__l {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.about-process { padding: 80px 40px; border-bottom: 1px solid var(--border); }
.about-process__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2px;
	background: var(--border);
}

/* ============================================================
   СТРАНИЦА КОНТАКТОВ
   ============================================================ */
.kontakty-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--border);
}
.kontakty-left  { padding: 60px 40px; border-right: 1px solid var(--border); }
.kontakty-right { padding: 60px 40px; }

.kontakt-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	color: var(--cream);
	transition: color 0.2s;
	min-width: 0;
}
.kontakt-row:hover { color: var(--lime); }
.kontakt-row__label {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	flex-shrink: 0;
	width: 80px;
}
.kontakt-row__val {
	font-family: var(--display);
	font-size: clamp(14px, 2vw, 1.2rem);
	font-weight: 800;
	letter-spacing: -0.5px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kontakt-row__arrow { color: var(--muted); flex-shrink: 0; margin-left: auto; }

.kontakt-note {
	margin-top: 32px;
	padding: 24px;
	border: 1px solid rgba(200,255,0,0.12);
	background: rgba(200,255,0,0.04);
}
.kontakt-note__label {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--lime);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.kontakt-note__text { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* ============================================================
   CITY PAGE
   ============================================================ */
.city-hero {
	padding: 140px 40px 80px;
	border-bottom: 1px solid var(--border);
}
.city-hero__label {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}
.city-hero__title {
	font-family: var(--display);
	font-size: clamp(42px, 7vw, 96px);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -3px;
	margin-bottom: 28px;
}
.city-hero__title em { color: var(--orange); font-style: italic; }
.city-hero__desc {
	font-size: 15px;
	color: var(--muted);
	line-height: 1.75;
	max-width: 580px;
	margin-bottom: 40px;
}
.city-hero__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 60px;
}
.city-hero__stats {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	padding-top: 40px;
	border-top: 1px solid var(--border);
}

/* Why items */
.why-item {
	display: flex;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var(--border);
}
.why-item:last-child { border-bottom: none; }
.why-item__num {
	font-family: var(--mono);
	font-size: 9px;
	color: var(--orange);
	letter-spacing: 1px;
	flex-shrink: 0;
	padding-top: 3px;
	width: 24px;
}
.why-item__title {
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin-bottom: 4px;
}
.why-item__desc {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.65;
}

/* ============================================================
   MOBILE — О себе / Контакты / город
   ============================================================ */
@media (max-width: 1024px) {
	.about-body       { grid-template-columns: 1fr; }
	.about-left       { border-right: none; border-bottom: 1px solid var(--border); }
	.about-stats      { grid-template-columns: repeat(2, 1fr); }
	.kontakty-body    { grid-template-columns: 1fr; }
	.kontakty-left    { border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 768px) {

	/* Общие */
	.pg-hero          { padding: 100px 20px 48px; }
	.pg-hero__title   { letter-spacing: -2px; }

	/* О себе */
	.about-left,
	.about-right      { padding: 40px 20px; }
	.about-stats      { grid-template-columns: 1fr; }
	.about-stat       { padding: 32px 20px; border-right: none; border-bottom: 1px solid var(--border); }
	.about-stat:last-child { border-bottom: none; }
	.about-process    { padding: 48px 20px; }

	/* Контакты */
	.kontakty-left,
	.kontakty-right   { padding: 40px 20px; }
	.kontakt-row__val { font-size: 15px; }
	.kontakt-row__label { width: 68px; }

	/* City hero */
	.city-hero            { padding: 100px 20px 48px; }
	.city-hero__title     { letter-spacing: -2px; }
	.city-hero__stats     { gap: 20px; }
	.city-hero__ctas      { flex-direction: column; }
	.city-hero__ctas .btn-fill,
	.city-hero__ctas .btn-ghost-sm { width: 100%; justify-content: center; }

	/* Case filter */
	.case-filter          { flex-wrap: wrap; gap: 8px; padding: 0 20px; }
	.case-filter__btn     { font-size: 9px; padding: 8px 14px; }

	/* Why items */
	.why-right            { padding: 0 20px 40px; }

	/* 404 */
	.e404__links-row      { gap: 20px; }

	/* Архив услуг */
	.svc-row              { flex-wrap: wrap; gap: 8px; padding: 20px; }
	.svc-n                { display: none; }
	.svc-desc             { display: none; }
	.svc-price            { display: none; }
	.svc-name             { flex: 1; font-size: 18px; }

	/* Aside карточка кейса */
	.case-single-aside    { padding-top: 0; }
}

@media (max-width: 480px) {
	.hero-h1    { font-size: clamp(36px, 11vw, 52px); letter-spacing: -1.5px; }
	.why-big    { font-size: 40px; letter-spacing: -2px; }
	.cta-big    { font-size: 32px; }
	.case-name  { font-size: 17px; }
	.svc-name   { font-size: 17px; }
	.city-hero__title { letter-spacing: -1.5px; }
	.hstat-n    { font-size: 26px; }
}

/* ============================================================
   АНИМАЦИИ — дополнительные
   ============================================================ */

/* Reveal — плавное появление снизу */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
	            transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger — дочерние элементы наследуют задержку */
.stagger-grid .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger-grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger-grid .reveal:nth-child(6) { transition-delay: 0.40s; }

/* Кейсы и услуги — stagger */
.case-grid  { }
.services-section .svc-row { transition-delay: calc(var(--i, 0) * 60ms); }

/* Кнопки — мягкий transition для magnetic */
.btn-fill,
.btn-ghost-sm,
.cta-submit {
	transition: transform 0.2s cubic-bezier(0.16,1,0.3,1),
	            background 0.3s, color 0.3s, border-color 0.3s,
	            opacity 0.3s;
}

/* Строки услуг — transition opacity для hover-dim */
.svc-row { transition: opacity 0.25s, background 0.25s; }

/* Ссылки в навигации — подчёркивание slide */
.site-nav__links a {
	position: relative;
}
.site-nav__links a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--lime);
	transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.site-nav__links a:hover::after { width: 100%; }

/* Счётчики — subtle glow когда отсчитывают */
.count-up {
	display: inline-block;
	transition: color 0.3s;
}

/* Case card — zoom thumbnail on hover */
.case-thumb { overflow: hidden; }
.case-thumb > div:nth-child(2) img,
.case-thumb > div[style*="position:absolute"] img {
	transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.case-card:hover .case-thumb > div:nth-child(2) img,
.case-card:hover .case-thumb > div[style*="position:absolute"] img {
	transform: scale(1.04);
}

/* Секция-label — появление с fade */
.section-label {
	opacity: 0;
	animation: labelFade 0.6s 0.2s forwards;
}
@keyframes labelFade {
	to { opacity: 1; }
}

/* Hero tag — мигание точки уже есть, добавим fade для всего тега */
.hero-tag {
	animation: labelFade 0.8s 0.1s both;
}

/* Hover на карточках кейсов */
.case-card {
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.case-card:hover {
	transform: translateY(-4px);
}

/* FAQ — плавное открытие */
.svc-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.16,1,0.3,1),
	            padding-bottom 0.35s;
	overflow: hidden;
	padding-bottom: 0;
}
.svc-faq__a > * { min-height: 0; overflow: hidden; }
.svc-faq__item.is-open .svc-faq__a {
	grid-template-rows: 1fr;
	padding-bottom: 24px;
}

/* Переопределяем старый display:none для FAQ */
.svc-faq__a { display: grid !important; }

/* ============================================================
   CASES ARCHIVE — /cases/
   ============================================================ */

/* ── Page Header ── */
.cph {
	padding: 120px 48px 64px;
	border-bottom: 1px solid var(--border);
	position: relative;
	overflow: hidden;
}
.cph__bg-text {
	position: absolute;
	right: -20px;
	top: 60px;
	font-family: var(--display);
	font-size: clamp(100px, 16vw, 220px);
	font-weight: 800;
	color: rgba(240,237,229,0.03);
	pointer-events: none;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: -4px;
	user-select: none;
}
.cph__tag {
	display: inline-block;
	background: rgba(240,237,229,0.06);
	border: 1px solid var(--border);
	border-radius: 40px;
	font-size: 11px;
	color: var(--muted);
	padding: 6px 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 24px;
}
.cph__title {
	font-family: var(--display);
	font-size: clamp(42px, 6vw, 80px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -2px;
	margin-bottom: 24px;
	color: var(--cream);
}
.cph__title em {
	color: var(--lime);
	font-style: normal;
}
.cph__desc {
	font-size: 15px;
	color: var(--muted);
	line-height: 1.7;
	max-width: 480px;
}
.cph__stats {
	display: flex;
	gap: 48px;
	margin-top: 48px;
}
.cph__stat-v {
	font-family: var(--display);
	font-size: 34px;
	font-weight: 800;
	color: var(--lime);
}
.cph__stat-l {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}

/* ── Filters ── */
.cfilters {
	padding: 24px 48px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 64px;
	z-index: 50;
	background: rgba(8,8,6,0.96);
	backdrop-filter: blur(12px);
}
.cfilters__label {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-right: 8px;
	font-family: var(--mono);
}
.cfilters__btn {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 40px;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 13px;
	padding: 8px 18px;
	transition: all 0.2s;
}
.cfilters__btn:hover {
	border-color: rgba(240,237,229,0.25);
	color: var(--cream);
}
.cfilters__btn.active {
	background: var(--lime);
	border-color: var(--lime);
	color: #000;
	font-weight: 600;
}

/* ── Count ── */
.ccount {
	padding: 28px 48px 0;
}
.ccount__text {
	font-size: 13px;
	color: var(--muted);
	font-family: var(--mono);
}
.ccount__text strong {
	color: var(--cream);
}

/* ── Grid ── */
.cgrid {
	padding: 32px 48px 64px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
}
.cgrid__empty {
	grid-column: 1 / -1;
	padding: 80px 0;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ── Case Card ── */
.ccard {
	background: var(--bg);
	border: 1px solid var(--border);
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s;
	animation: cFadeUp 0.5s ease both;
}
.ccard:hover { border-color: rgba(240,237,229,0.2); }
.ccard--featured { grid-column: span 2; }

@keyframes cFadeUp {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ccard.hidden { display: none !important; }

/* Arrow */
.ccard__arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-size: 14px;
	transition: all 0.3s;
	z-index: 2;
	text-decoration: none;
}
.ccard:hover .ccard__arrow {
	background: var(--lime);
	border-color: var(--lime);
	color: #000;
	transform: rotate(45deg);
}

/* Browser mockup */
.ccard__mockup {
	background: rgba(240,237,229,0.03);
	border-bottom: 1px solid var(--border);
}
.ccard__bar {
	background: rgba(0,0,0,0.4);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--border);
}
.ccard__dots {
	display: flex;
	gap: 5px;
}
.cdot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: block;
}
.cdot--r { background: #ff5f57; }
.cdot--y { background: #ffbd2e; }
.cdot--g { background: #28c840; }
.ccard__url {
	flex: 1;
	background: rgba(0,0,0,0.3);
	border-radius: 4px;
	padding: 4px 12px;
	font-size: 11px;
	color: rgba(240,237,229,0.25);
	text-align: center;
	font-family: var(--mono);
	margin: 0 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccard__screen {
	width: 100%;
	overflow: hidden;
}
.ccard__thumb {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ccard--featured .ccard__thumb { height: 440px; }
.ccard:hover .ccard__thumb { transform: scale(1.04); }

/* Placeholder screen */
.ccard__ph {
	background: #0a0a0a;
	height: 280px;
	display: flex;
	flex-direction: column;
}
.ccard--featured .ccard__ph { height: 400px; }
.ccard__ph-nav {
	height: 20px;
	background: #111;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ccard__ph-logo {
	font-family: var(--display);
	font-size: 5px;
	font-weight: 800;
	color: var(--lime);
	letter-spacing: 0.5px;
}
.ccard__ph-nav-lines {
	display: flex;
	gap: 5px;
}
.ccard__ph-nav-lines span {
	display: block;
	width: 16px;
	height: 2px;
	background: rgba(255,255,255,0.12);
	border-radius: 1px;
}
.ccard__ph-hero {
	flex: 1;
	padding: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ccard__ph-h {
	font-family: var(--display);
	font-size: 9px;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 5px;
}
.ccard__ph-p {
	width: 70%;
	height: 2px;
	background: rgba(255,255,255,0.1);
	border-radius: 1px;
	margin-bottom: 8px;
}
.ccard__ph-btn {
	width: 50px;
	height: 8px;
	background: var(--lime);
	border-radius: 8px;
}
.ccard__ph-bottom {
	display: flex;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.ccard__ph-stat {
	flex: 1;
	padding: 7px 10px;
	border-right: 1px solid rgba(255,255,255,0.06);
	display: flex;
	flex-direction: column;
}
.ccard__ph-stat:last-child { border-right: none; }
.ccard__ph-sv {
	font-family: var(--display);
	font-size: 8px;
	font-weight: 800;
	color: var(--lime);
}
.ccard__ph-sl {
	font-size: 3px;
	color: rgba(255,255,255,0.3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* =====================================================
 * WEBSITE CASE MOCKUP — ccard__wm
 * Показывается на странице кейсов по сайтам вместо
 * стандартного ccard__ph. Включает: навбар, герой/
 * скриншот, форму заявки, стрип с цифрами.
 * =================================================== */
.ccard__wm {
	height: 280px;
	display: flex;
	flex-direction: column;
	background: #0d0d0d;
	overflow: hidden;
}
.ccard--featured .ccard__wm { height: 400px; }

/* Внутренний навбар */
.ccard__wm-top {
	height: 22px;
	background: #111;
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 6px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	flex-shrink: 0;
}
.ccard__wm-logo {
	font-family: var(--display);
	font-size: 5.5px;
	font-weight: 800;
	color: #fff;
	letter-spacing: .5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55px;
}
.ccard__wm-menu {
	display: flex;
	gap: 4px;
	flex: 1;
}
.ccard__wm-menu span {
	display: block;
	width: 16px;
	height: 2px;
	background: rgba(255,255,255,.15);
	border-radius: 1px;
}
.ccard__wm-cta {
	display: block;
	width: 32px;
	height: 11px;
	background: var(--lime);
	border-radius: 2px;
	flex-shrink: 0;
}

/* Основное тело карточки: герой + форма рядом */
.ccard__wm-body {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	min-height: 0;
}

/* Левая сторона — скриншот или герой-текст */
.ccard__wm-hero {
	overflow: hidden;
	position: relative;
	background: #0a0a0a;
}
.ccard__wm-shot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.ccard__wm-hero-text {
	padding: 10px 10px 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}
.ccard__wm-h1 {
	font-family: var(--display);
	font-size: 8px;
	font-weight: 800;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ccard__wm-desc {
	height: 3px;
	background: rgba(255,255,255,.1);
	border-radius: 2px;
	margin-bottom: 3px;
	width: 90%;
}
.ccard__wm-desc + .ccard__wm-desc { width: 70%; margin-bottom: 8px; }
.ccard__wm-hero-btn {
	height: 13px;
	width: 48px;
	background: var(--lime);
	border-radius: 2px;
}

/* Правая сторона — форма заявки */
.ccard__wm-form {
	padding: 8px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}
.ccard__wm-form-title {
	font-size: 5.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #222;
	margin-bottom: 6px;
}
.ccard__wm-label {
	font-size: 5px;
	color: #888;
	margin-bottom: 2px;
	display: block;
}
.ccard__wm-input {
	height: 14px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
	margin-bottom: 5px;
	position: relative;
}
.ccard__wm-input::after {
	content: attr(data-ph);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 5px;
	font-size: 5px;
	color: #bbb;
}
.ccard__wm-submit {
	margin-top: auto;
	height: 18px;
	background: #111;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5.5px;
	font-weight: 700;
	color: var(--lime);
	letter-spacing: .3px;
	gap: 3px;
}
.ccard__wm-submit span { font-size: 7px; }

/* Нижний стрип с цифрами */
.ccard__wm-strip {
	display: flex;
	border-top: 1px solid rgba(255,255,255,.06);
	background: rgba(255,255,255,.02);
	flex-shrink: 0;
}
.ccard__wm-strip-item {
	flex: 1;
	padding: 4px 6px;
	text-align: center;
	border-right: 1px solid rgba(255,255,255,.05);
}
.ccard__wm-strip-item:last-child { border-right: none; }
.ccard__wm-sv {
	display: block;
	font-family: var(--display);
	font-size: 9px;
	font-weight: 800;
	color: var(--lime);
	line-height: 1;
}
.ccard__wm-sl {
	display: block;
	font-size: 4px;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: rgba(240,237,229,.3);
	margin-top: 2px;
}

/* Card body */
.ccard__body {
	padding: 22px 22px 0;
}
.ccard__tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.ccard__tag {
	background: rgba(240,237,229,0.06);
	border: 1px solid var(--border);
	border-radius: 40px;
	font-size: 10px;
	color: var(--muted);
	padding: 4px 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ccard__tag--tool {
	border-color: rgba(200,255,0,0.2);
	color: rgba(200,255,0,0.6);
	background: rgba(200,255,0,0.04);
}
.ccard__client {
	display: block;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 6px;
	color: var(--cream);
	transition: color 0.2s;
	text-decoration: none;
}
.ccard:hover .ccard__client { color: var(--lime); }
.ccard__desc {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 20px;
}

/* Metrics row */
.ccard__metrics {
	display: flex;
	margin: 0 -22px;
	border-top: 1px solid var(--border);
}
.ccard__metric {
	flex: 1;
	padding: 13px 14px;
	border-right: 1px solid var(--border);
}
.ccard__metric:last-child { border-right: none; }
.ccard__mv {
	font-family: var(--display);
	font-size: 14px;
	font-weight: 800;
	color: var(--lime);
	white-space: nowrap;
}
.ccard__ml {
	font-size: 9px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-top: 2px;
}

/* ── Load More ── */
.cload {
	padding: 32px 48px 80px;
	display: flex;
	justify-content: center;
}
.cload__btn {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--muted);
	font-family: var(--sans);
	font-size: 14px;
	padding: 16px 40px;
	border-radius: 40px;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cload__btn:hover {
	border-color: var(--lime);
	color: var(--lime);
}
.cload__btn.hidden { display: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
	.cgrid { grid-template-columns: repeat(2, 1fr); }
	.ccard--featured { grid-column: span 2; }
	.ccard--featured .ccard__thumb { height: 320px; }
	.ccard--featured .ccard__ph   { height: 300px; }
	.ccard--featured .ccard__wm   { height: 300px; }
}
@media (max-width: 700px) {
	.cph { padding: 100px 20px 48px; }
	.cph__bg-text { font-size: 80px; }
	.cph__stats { gap: 24px; }
	.cfilters { padding: 16px 20px; top: 56px; }
	.ccount { padding: 20px 20px 0; }
	.cgrid { grid-template-columns: 1fr; padding: 24px 20px 48px; }
	.ccard--featured { grid-column: span 1; }
	.cload { padding: 24px 20px 60px; }
}

/* ============================================================
   CASES ADS — доп. стили для рекламной страницы
   ============================================================ */

/* ── Stats box вариант ── */
.cph__stats--box {
	display: flex;
	width: fit-content;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	gap: 0;
	margin-top: 40px;
}
.cph__stats--box .cph__stat {
	padding: 18px 28px;
	border-right: 1px solid var(--border);
}
.cph__stats--box .cph__stat:last-child { border-right: none; }
.cph__stats--box .cph__stat-v { font-size: 26px; }

/* ── Tape marquee ── */
.cph--ads { padding-bottom: 0; }
.cph__tape {
	height: 36px;
	background: var(--lime);
	overflow: hidden;
	display: flex;
	align-items: center;
	margin-top: 48px;
}
.cph__tape-track {
	display: flex;
	animation: cTape 18s linear infinite;
	white-space: nowrap;
	will-change: transform;
}
@keyframes cTape {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.cph__tape-item {
	font-family: var(--display);
	font-size: 11px;
	font-weight: 800;
	color: #000;
	padding: 0 28px;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.cph__tape-dot {
	width: 4px;
	height: 4px;
	background: rgba(0,0,0,0.35);
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
}

/* ── Double filter rows ── */
.cfilters--ads {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 0 48px;
}
.cfilters__row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}
.cfilters__row:last-child { border-bottom: none; }

/* ── Sort bar ── */
.cads-sortbar {
	padding: 20px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cads-sortbar__count {
	font-size: 13px;
	color: var(--muted);
	font-family: var(--mono);
}
.cads-sortbar__count strong { color: var(--cream); }

/* ── Dashboard visual inside card ── */
.ccard__visual {
	border-bottom: 1px solid var(--border);
	background: rgba(240,237,229,0.02);
}
.cdash {
	padding: 14px 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cdash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cdash__logo {
	font-family: var(--display);
	font-size: 8px;
	font-weight: 800;
	color: var(--lime);
	letter-spacing: 0.5px;
}
.cdash__period {
	font-size: 9px;
	color: var(--muted);
	background: rgba(240,237,229,0.05);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 2px 8px;
	font-family: var(--mono);
}

/* KPI tiles */
.cdash__kpis {
	display: grid;
	gap: 6px;
}
.cdash__kpis--2 { grid-template-columns: 1fr 1fr; }
.cdash__kpis--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.cdash__kpi {
	background: rgba(240,237,229,0.04);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cdash__kpi-l { display: flex; flex-direction: column; gap: 2px; }
.cdash__kpi-label {
	font-size: 8px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.cdash__kpi-val {
	font-family: var(--display);
	font-size: 13px;
	font-weight: 800;
	color: var(--cream);
}
.cdash__kpi-val--accent { color: var(--lime); }
.cdash__badge {
	font-size: 8px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 10px;
}
.cdash__badge--up {
	background: rgba(200,255,0,0.1);
	color: var(--lime);
}

/* Bar chart */
.cdash__bars {
	height: 44px;
	display: flex;
	align-items: flex-end;
	gap: 3px;
}
.cdash__bar {
	flex: 0 0 6px;
	width: 6px;
	border-radius: 2px 2px 0 0;
	background: rgba(240,237,229,0.08);
}
.cdash__bar--med { background: rgba(74,90,0,0.9); }
.cdash__bar--hi  { background: var(--lime); }

/* Ad snippet */
.cdash__snippet-wrap { padding: 0 2px 2px; }
.cdash__snippet {
	background: #fff;
	border-radius: 6px;
	padding: 8px 10px;
	border: 1px solid #e8e8e8;
}
.cdash__ads-tag {
	font-size: 8px;
	color: #185abc;
	font-weight: 500;
	border: 1px solid #185abc;
	border-radius: 2px;
	padding: 0 3px;
	display: inline-block;
	margin-bottom: 2px;
}
.cdash__ads-url { font-size: 8px; color: #1a7f50; margin-bottom: 1px; }
.cdash__ads-title {
	font-size: 10px;
	font-weight: 700;
	color: #1a0dab;
	line-height: 1.3;
	margin-bottom: 2px;
}
.cdash__ads-desc { font-size: 8px; color: #444; line-height: 1.4; }
.cdash__ads-links {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.cdash__ads-links span {
	font-size: 8px;
	color: #1a0dab;
	text-decoration: underline;
}

/* Target creative */
.cdash__creative {
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--border);
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 2px 2px;
}
.cdash__tc-left {
	background: #0d0d0d;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.cdash__tc-logo {
	font-family: var(--display);
	font-size: 6px;
	font-weight: 800;
	color: var(--lime);
}
.cdash__tc-h {
	font-family: var(--display);
	font-size: 8px;
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
}
.cdash__tc-p { font-size: 5px; color: #555; line-height: 1.5; }
.cdash__tc-btn {
	background: var(--lime);
	color: #000;
	font-size: 5px;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 8px;
	display: inline-block;
	margin-top: auto;
	align-self: flex-start;
}
.cdash__tc-right {
	background: #1a1a1a;
	position: relative;
	overflow: hidden;
}
.cdash__tc-right::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #222, #0d0d0d);
}

/* Analytics chart */
.cdash__analytics { padding: 0 2px 2px; }
.cdash__analytics-labels {
	display: flex;
	justify-content: space-between;
	font-size: 7px;
	color: var(--muted);
	margin-bottom: 4px;
	padding: 0 2px;
}
.cdash__analytics-chart {
	height: 52px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	border-left: 1px solid rgba(255,255,255,0.08);
}
.cdash__analytics-chart svg { width: 100%; height: 100%; overflow: visible; }

/* Channel-specific tag colors */
.ccard__tag--direct  { border-color: rgba(122,176,0,0.3); color: #7ab000; background: rgba(10,15,0,0.5); }
.ccard__tag--target  { border-color: rgba(0,144,200,0.3); color: #0090c8; background: rgba(0,10,15,0.5); }
.ccard__tag--seo     { border-color: rgba(144,0,200,0.3); color: #9000c8; background: rgba(10,0,15,0.5); }
.ccard__tag--complex { border-color: rgba(200,128,0,0.3); color: #c88000; background: rgba(15,8,0,0.5); }

/* ── Responsive ads ── */
.admin-bar .cfilters--ads { top: 96px; }
@media (max-width: 700px) {
	.cph__stats--box { flex-wrap: wrap; border-radius: 8px; }
	.cph__stats--box .cph__stat { padding: 12px 20px; }
	.cfilters--ads { padding: 0 20px; }
	.cads-sortbar { padding: 16px 20px; }
	.cdash__kpis--4 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 782px) {
	.admin-bar .cfilters--ads { top: 102px; }
}

/* ============================================================
   CASE SINGLE — страница одного кейса
   ============================================================ */

/* ── Breadcrumb ── */
.csingle-crumb {
	padding: 96px 48px 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--muted);
	font-family: var(--mono);
}
.csingle-crumb a { color: var(--muted); transition: color 0.2s; }
.csingle-crumb a:hover { color: var(--lime); }
.csingle-crumb span { color: rgba(240,237,229,0.2); }
.csingle-crumb span:last-child { color: rgba(240,237,229,0.5); }

/* ── Hero ── */
.csingle-hero {
	padding: 28px 48px 0;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 0;
	border-bottom: 1px solid var(--border);
}
.csingle-hero__left {
	padding-right: 56px;
	padding-bottom: 52px;
	min-height: 300px;
}
.csingle-hero__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.csingle-tag {
	background: rgba(240,237,229,0.06);
	border: 1px solid var(--border);
	border-radius: 40px;
	font-size: 11px;
	color: var(--muted);
	padding: 5px 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.csingle-tag--accent {
	background: rgba(200,255,0,0.08);
	border-color: rgba(200,255,0,0.2);
	color: var(--lime);
}
.csingle-hero__title {
	font-family: var(--display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -2px;
	margin-bottom: 36px;
	color: var(--cream);
}
.csingle-hero__metrics {
	display: flex;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 28px;
}
.csingle-hm {
	flex: 1;
	padding: 18px 20px;
	border-right: 1px solid var(--border);
}
.csingle-hm:last-child { border-right: none; }
.csingle-hm__val {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 800;
	color: var(--lime);
	white-space: nowrap;
}
.csingle-hm__label {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}
.csingle-hero__sub {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--muted);
}
.csingle-hero__dot {
	width: 4px;
	height: 4px;
	background: var(--muted);
	border-radius: 50%;
}

/* Hero sidebar */
.csingle-hero__right {
	border-left: 1px solid var(--border);
	padding: 0 0 52px 32px;
}
.csingle-hs {
	margin-bottom: 22px;
}
.csingle-hs__label {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 6px;
	font-family: var(--mono);
}
.csingle-hs__val {
	font-size: 14px;
	color: rgba(240,237,229,0.75);
}
.csingle-hs__val a { color: var(--lime); font-size: 13px; }
.csingle-hs__val--budget {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 800;
	color: var(--lime);
}
.csingle-hs__divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0 0 22px;
}

/* ── Hero cover image ── */
.csingle-cover {
	position: relative;
	height: 560px;
	margin: 0 48px;
	border-radius: 0 0 16px 16px;
	border: 1px solid var(--border);
	border-top: none;
	overflow: hidden;
}
.csingle-cover__img {
	position: absolute;
	inset: 0;
}
.csingle-cover__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.35);
	max-width: none;
}
.csingle-cover__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(8,8,6,0.8) 0%, transparent 60%);
}
.csingle-cover__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding: 40px 48px;
}
.csingle-cover__quote {
	max-width: 500px;
	font-size: 17px;
	color: rgba(240,237,229,0.8);
	line-height: 1.65;
	font-style: italic;
}
.csingle-cover__cta {
	position: absolute;
	right: 48px;
	bottom: 40px;
	background: var(--lime);
	color: #000;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	padding: 13px 26px;
	border-radius: 40px;
	transition: transform 0.2s;
	z-index: 3;
}
.csingle-cover__cta:hover { transform: scale(1.04); }

/* ── Content 2-col ── */
.csingle-content {
	display: grid;
	grid-template-columns: 1fr 300px;
	border-bottom: 1px solid var(--border);
}
.csingle-content__main {
	border-right: 1px solid var(--border);
}
.csingle-content__aside {
	padding: 48px 0 48px 36px;
}
.csingle-section {
	padding: 48px;
	border-bottom: 1px solid var(--border);
}
.csingle-section:last-child { border-bottom: none; }
.csingle-section__label {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 14px;
	font-family: var(--mono);
}
.csingle-section__title {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 18px;
	letter-spacing: -0.5px;
}
.csingle-section__text {
	font-size: 15px;
	color: rgba(240,237,229,0.6);
	line-height: 1.8;
}

/* Steps list */
.csingle-steps {
	list-style: none;
	display: flex;
	flex-direction: column;
}
.csingle-step {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
}
.csingle-step:last-child { border-bottom: none; }
.csingle-step__num {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	font-weight: 700;
	padding-top: 2px;
	min-width: 24px;
}
.csingle-step__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--cream);
	margin-bottom: 4px;
}
.csingle-step__desc {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.65;
}

/* Aside */
.csingle-aside-block { margin-bottom: 24px; }
.csingle-aside-block__label {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
	font-family: var(--mono);
}
.csingle-aside-block__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.csingle-aside-tag {
	background: rgba(240,237,229,0.06);
	border: 1px solid var(--border);
	border-radius: 40px;
	font-size: 11px;
	color: var(--muted);
	padding: 4px 12px;
}
.csingle-aside-block__divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0 0 24px;
}
.csingle-aside-results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 8px;
}
.csingle-aside-res {
	background: rgba(240,237,229,0.04);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 12px 14px;
}
.csingle-aside-res__val {
	font-family: var(--display);
	font-size: 16px;
	font-weight: 800;
	color: var(--lime);
}
.csingle-aside-res__label {
	font-size: 9px;
	color: var(--muted);
	text-transform: uppercase;
	margin-top: 2px;
}

/* ── Screens section ── */
.csingle-screens {
	background: rgba(240,237,229,0.02);
	padding: 64px 48px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.csingle-screens__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 48px;
}
.csingle-screens__eyebrow {
	font-size: 11px;
	color: var(--lime);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 10px;
	font-family: var(--mono);
}
.csingle-screens__title {
	font-family: var(--display);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1px;
}
.csingle-screens__sub {
	font-size: 13px;
	color: var(--muted);
	margin-top: 8px;
}
.csingle-screens__count {
	font-family: var(--display);
	font-size: 64px;
	font-weight: 800;
	color: rgba(240,237,229,0.04);
	line-height: 1;
	user-select: none;
}

/* Tabs */
.csingle-screens__tabs {
	display: flex;
	gap: 2px;
	background: rgba(240,237,229,0.04);
	border: 1px solid var(--border);
	border-radius: 40px;
	padding: 4px;
	margin-bottom: 36px;
	width: fit-content;
}
.csingle-screens__tab {
	background: transparent;
	border: none;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--muted);
	padding: 9px 22px;
	border-radius: 40px;
	transition: all 0.2s;
}
.csingle-screens__tab.active {
	background: var(--bg);
	color: var(--cream);
	border: 1px solid var(--border);
}

/* Desktop screens grid */
.csingle-screens__desktop {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.csingle-screen {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(240,237,229,0.12);
}
.csingle-screen--wide { /* first screen full width — already default */ }
.csingle-screen__browser { background: rgba(240,237,229,0.03); }
.csingle-screen__bar {
	background: rgba(0,0,0,0.5);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--border);
}
.csingle-screen__url {
	flex: 1;
	background: rgba(0,0,0,0.4);
	border-radius: 4px;
	padding: 4px 12px;
	font-size: 11px;
	color: rgba(240,237,229,0.2);
	text-align: center;
	font-family: var(--mono);
	margin: 0 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.csingle-screen__img-wrap img {
	width: 100%;
	display: block;
	max-width: none;
}
.csingle-screen__caption {
	background: rgba(240,237,229,0.03);
	border-top: 1px solid var(--border);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.csingle-screen__cap-name {
	font-size: 13px;
	font-weight: 600;
	color: rgba(240,237,229,0.7);
}
.csingle-screen__cap-pill {
	background: rgba(200,255,0,0.1);
	border: 1px solid rgba(200,255,0,0.25);
	border-radius: 40px;
	font-size: 11px;
	color: var(--lime);
	padding: 4px 12px;
}

/* Two-column screen grid (for non-first items) */
.csingle-screens__desktop .csingle-screen:not(.csingle-screen--wide) {
	/* default single column */
}
.csingle-screens__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* Mobile screens */
.csingle-screens__mobile {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
.csingle-screens__mobile.hidden { display: none; }
.csingle-mob-device {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.csingle-mob-frame {
	background: #111;
	border-radius: 32px;
	border: 2px solid rgba(240,237,229,0.1);
	overflow: hidden;
	width: 160px;
	box-shadow: 0 0 0 5px rgba(0,0,0,0.8), 0 0 0 6px rgba(240,237,229,0.05);
}
.csingle-mob-notch {
	background: #111;
	height: 18px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.csingle-mob-notch::after {
	content: '';
	width: 56px;
	height: 10px;
	background: #0d0d0d;
	border-radius: 0 0 12px 12px;
}
.csingle-mob-screen img {
	width: 100%;
	display: block;
}
.csingle-mob-bar {
	height: 10px;
	background: #0d0d0d;
	display: flex;
	align-items: center;
	justify-content: center;
}
.csingle-mob-bar::after {
	content: '';
	width: 36px;
	height: 3px;
	background: rgba(255,255,255,0.15);
	border-radius: 2px;
}
.csingle-mob-caption {
	font-size: 12px;
	color: var(--muted);
	text-align: center;
}

/* ── Results ── */
.csingle-results {
	padding: 64px 48px;
}
.csingle-results__label {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 14px;
	font-family: var(--mono);
}
.csingle-results__title {
	font-family: var(--display);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin-bottom: 32px;
}
.csingle-results__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 0;
}
.csingle-res-card {
	padding: 24px 20px;
	border-right: 1px solid var(--border);
}
.csingle-res-card:last-child { border-right: none; }
.csingle-res-card__val {
	font-family: var(--display);
	font-size: 28px;
	font-weight: 800;
	color: var(--lime);
	margin-bottom: 6px;
}
.csingle-res-card__label {
	font-size: 12px;
	color: var(--muted);
}
.csingle-res-card__sub {
	font-size: 11px;
	color: rgba(240,237,229,0.2);
	margin-top: 4px;
}

/* Post content inside results */
.csingle-post-content {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.csingle-post-content p {
	font-size: 15px;
	color: rgba(240,237,229,0.6);
	line-height: 1.8;
	margin-bottom: 16px;
}
.csingle-post-content h2,
.csingle-post-content h3 {
	font-family: var(--display);
	color: var(--cream);
	margin-bottom: 8px;
}

/* ── Next case ── */
.csingle-next {
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--border);
	overflow: hidden;
}
.csingle-next__left {
	flex: 1;
	padding: 48px;
	border-right: 1px solid var(--border);
}
.csingle-next__label {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 14px;
	font-family: var(--mono);
}
.csingle-next__title {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 18px;
	letter-spacing: -0.5px;
}
.csingle-next__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.csingle-nc-tag {
	background: rgba(240,237,229,0.06);
	border: 1px solid var(--border);
	border-radius: 40px;
	font-size: 11px;
	color: var(--muted);
	padding: 5px 14px;
}
.csingle-next__right {
	width: 320px;
	background: rgba(240,237,229,0.02);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s;
	text-decoration: none;
}
.csingle-next__right:hover { background: rgba(240,237,229,0.06); }
.csingle-next__arrow {
	width: 56px;
	height: 56px;
	border: 1px solid var(--border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--muted);
	transition: all 0.3s;
}
.csingle-next__right:hover .csingle-next__arrow {
	background: var(--lime);
	border-color: var(--lime);
	color: #000;
	transform: rotate(45deg);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
	.csingle-hero        { grid-template-columns: 1fr; }
	.csingle-hero__right { border-left: none; border-top: 1px solid var(--border); padding: 28px 0 0; margin-top: 28px; }
	.csingle-hero__left  { padding-right: 0; padding-bottom: 0; }
	.csingle-content     { grid-template-columns: 1fr; }
	.csingle-content__main { border-right: none; }
	.csingle-content__aside { padding: 32px 0 0; border-top: 1px solid var(--border); }
	.csingle-results__grid { grid-template-columns: repeat(2, 1fr); }
	.csingle-post-content  { grid-template-columns: 1fr; }
	.csingle-next__right   { width: 120px; }
}
@media (max-width: 700px) {
	.csingle-crumb { padding: 80px 20px 0; }
	.csingle-hero  { padding: 20px 20px 0; }
	.csingle-cover { margin: 0 20px; height: 280px; }
	.csingle-cover__cta { right: 20px; bottom: 20px; }
	.csingle-section { padding: 32px 20px; }
	.csingle-screens { padding: 48px 20px; }
	.csingle-results { padding: 48px 20px; }
	.csingle-results__grid { grid-template-columns: repeat(2, 1fr); }
	.csingle-next__left { padding: 32px 20px; }
	.csingle-hero__metrics { flex-wrap: wrap; }
	.csingle-hm { min-width: 50%; }
}

/* ============================================================
   CASE SINGLE — ADS
   ============================================================ */

/* Counter Strip */
.csingle-counter-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid var(--border);
}
.csingle-cs-item {
	padding: 28px 40px;
	border-right: 1px solid var(--border);
	position: relative;
	overflow: hidden;
}
.csingle-cs-item:last-child { border-right: none; }
.csingle-cs-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(200,255,0,.03) 0%, transparent 60%);
	pointer-events: none;
}
.csingle-cs-label {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .8px;
	margin-bottom: 8px;
}
.csingle-cs-val {
	font-family: var(--display);
	font-size: 40px;
	font-weight: 700;
	color: var(--lime);
	line-height: 1;
}
.csingle-cs-sub {
	font-size: 12px;
	color: var(--muted);
	margin-top: 6px;
}
.csingle-cs-arrow {
	font-size: 11px;
	color: var(--lime);
	margin-top: 4px;
	opacity: .7;
}

/* Hero sidebar tags for tools */
.csingle-hs__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.csingle-hs__tag {
	background: rgba(200,255,0,.06);
	border: 1px solid rgba(200,255,0,.18);
	border-radius: 40px;
	font-size: 11px;
	color: var(--cream);
	padding: 3px 10px;
}

/* Ads sidebar in content */
.csingle-ads-budget {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 700;
	color: var(--lime);
}
.csingle-aside-block__text {
	font-size: 14px;
	color: rgba(240,237,229,.7);
}

/* Ad Materials Section */
.csingle-ad-section {
	background: rgba(255,255,255,.02);
	padding: 72px 48px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.csingle-ad-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
}
.csingle-ad-eyebrow {
	font-size: 11px;
	color: var(--lime);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 10px;
}
.csingle-ad-title {
	font-family: var(--display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -1px;
	color: var(--cream);
}
.csingle-ad-sub {
	font-size: 14px;
	color: var(--muted);
	margin-top: 8px;
}
.csingle-ad-num {
	font-family: var(--display);
	font-size: 80px;
	font-weight: 700;
	color: rgba(255,255,255,.04);
	line-height: 1;
	user-select: none;
}

/* Tabs */
.csingle-ad-tabs {
	display: flex;
	gap: 2px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 40px;
	padding: 4px;
	width: fit-content;
	margin-bottom: 40px;
}
.csingle-ad-tab {
	background: transparent;
	border: none;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--muted);
	padding: 8px 22px;
	border-radius: 40px;
	cursor: pointer;
	transition: all .2s;
}
.csingle-ad-tab.active {
	background: var(--bg);
	color: var(--cream);
	border: 1px solid var(--border);
}
.csingle-ad-panel { display: none; }
.csingle-ad-panel.show { display: block; }

/* Panel 1: Объявления */
.csingle-direct-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.csingle-direct-col { display: flex; flex-direction: column; gap: 16px; }

.csingle-serp {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
}
.csingle-serp__bar {
	background: #fff2cc;
	padding: 6px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid #e8e8e8;
}
.csingle-serp__logo {
	font-size: 11px;
	font-weight: 700;
	color: #c00;
}
.csingle-serp__search {
	flex: 1;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 10px;
	color: #333;
}
.csingle-serp__body { padding: 10px 14px; }
.csingle-ad-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.csingle-ad-item:last-child { border-bottom: none; }
.csingle-ad-item--dim { opacity: .45; }
.csingle-ad-badge {
	display: inline-block;
	background: #f0f0f0;
	color: #666;
	font-size: 8px;
	padding: 1px 5px;
	border-radius: 2px;
	margin-bottom: 3px;
}
.csingle-ad-url { font-size: 9.5px; color: #1a7f50; margin-bottom: 2px; }
.csingle-ad-title-line { font-size: 11px; font-weight: 700; color: #1a0dab; line-height: 1.35; margin-bottom: 3px; }
.csingle-ad-desc { font-size: 9.5px; color: #555; line-height: 1.5; margin-bottom: 5px; }
.csingle-ad-winner-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(200,255,0,.12);
	border: 1px solid rgba(200,255,0,.3);
	border-radius: 4px;
	font-size: 9px;
	color: var(--lime);
	padding: 2px 8px;
	margin-top: 4px;
}
.csingle-stat-row { display: flex; gap: 8px; }
.csingle-stat-pill {
	flex: 1;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 10px 12px;
	text-align: center;
}
.csingle-sp-v { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--lime); }
.csingle-sp-l { font-size: 9px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }

/* A/B comparison */
.csingle-ab-wrap {
	padding: 16px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 10px;
}
.csingle-ab-head { font-size: 13px; font-weight: 600; color: rgba(240,237,229,.7); margin-bottom: 14px; }
.csingle-ab-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.csingle-ab-card {
	background: rgba(255,255,255,.03);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 14px;
	position: relative;
}
.csingle-ab-card--winner { border-color: rgba(200,255,0,.3); }
.csingle-ab-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.csingle-ab-label--a { color: var(--muted); }
.csingle-ab-label--b { color: var(--lime); }
.csingle-ab-metric { margin-bottom: 4px; }
.csingle-ab-m-name { font-size: 10px; color: var(--muted); margin-bottom: 2px; }
.csingle-ab-m-val { font-size: 14px; font-weight: 700; color: var(--cream); }
.csingle-ab-m-val--accent { color: var(--lime) !important; }
.csingle-ab-m-sub { font-size: 10px; color: var(--lime); }
.csingle-ab-winner-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--lime);
	color: #000;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
}

/* Channels */
.csingle-channels-wrap {
	padding: 16px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 10px;
}
.csingle-channels-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.csingle-channel-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: rgba(240,237,229,.7);
}
.csingle-channel-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lime);
	flex-shrink: 0;
}
.csingle-tools-row { display: flex; flex-wrap: wrap; gap: 6px; }
.csingle-tool-tag {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 40px;
	font-size: 11px;
	color: var(--muted);
	padding: 4px 12px;
}

/* Panel 2: Analytics */
.csingle-metrika-dash {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	margin-bottom: 20px;
}
.csingle-metrika-bar {
	background: #f5f5f5;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid #e0e0e0;
}
.csingle-metrika-logo { font-size: 11px; font-weight: 700; color: #c00; }
.csingle-metrika-title { font-size: 11px; color: #333; font-weight: 600; }
.csingle-metrika-period { font-size: 10px; color: #888; margin-left: auto; }
.csingle-metrika-kpis {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-bottom: 1px solid #eee;
}
.csingle-metrika-kpi { padding: 12px 14px; border-right: 1px solid #eee; }
.csingle-metrika-kpi:last-child { border-right: none; }
.csingle-metrika-kpi-v { font-size: 16px; font-weight: 700; color: #111; }
.csingle-metrika-kpi-l { font-size: 9px; color: #aaa; text-transform: uppercase; margin-top: 2px; }
.csingle-metrika-kpi-d { font-size: 9px; margin-top: 2px; font-weight: 600; }
.csingle-kpi-up { color: #1a8a3a; }
.csingle-metrika-chart-wrap { padding: 14px 16px; }
.csingle-metrika-chart-labels {
	display: flex;
	justify-content: space-between;
	font-size: 9px;
	color: #aaa;
	margin-bottom: 6px;
}
.csingle-metrika-chart { height: 80px; }
.csingle-metrika-chart svg { width: 100%; height: 100%; }

.csingle-analytics-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.csingle-source-card,
.csingle-devices-card {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 18px 20px;
}
.csingle-source-title,
.csingle-devices-title {
	font-size: 13px;
	font-weight: 600;
	color: rgba(240,237,229,.7);
	margin-bottom: 14px;
}
.csingle-source-rows { display: flex; flex-direction: column; gap: 8px; }
.csingle-source-row { display: flex; align-items: center; gap: 10px; }
.csingle-source-name { font-size: 12px; color: var(--muted); min-width: 110px; }
.csingle-source-bar-wrap {
	flex: 1;
	height: 8px;
	background: rgba(255,255,255,.06);
	border-radius: 4px;
	overflow: hidden;
}
.csingle-source-bar {
	height: 100%;
	border-radius: 4px;
	background: #3a5500;
}
.csingle-source-bar--main { background: var(--lime); }
.csingle-source-pct { font-size: 11px; font-weight: 700; color: var(--cream); min-width: 36px; text-align: right; }

.csingle-devices-bars {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	height: 80px;
}
.csingle-device-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.csingle-device-bar-wrap {
	width: 100%;
	flex: 1;
	display: flex;
	align-items: flex-end;
}
.csingle-device-bar {
	width: 100%;
	border-radius: 4px 4px 0 0;
}
.csingle-device-label { font-size: 10px; color: var(--muted); }
.csingle-device-pct { font-size: 11px; font-weight: 700; color: var(--cream); }

/* Panel 3: Funnel */
.csingle-funnel-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.csingle-funnel-card,
.csingle-romi-card {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 24px;
}
.csingle-funnel-title,
.csingle-romi-title {
	font-size: 14px;
	font-weight: 600;
	color: rgba(240,237,229,.7);
	margin-bottom: 20px;
}
.csingle-funnel-steps { display: flex; flex-direction: column; gap: 6px; }
.csingle-f-step { position: relative; }
.csingle-f-bar-bg {
	width: 100%;
	height: 40px;
	background: rgba(255,255,255,.04);
	border-radius: 6px;
	overflow: hidden;
}
.csingle-f-bar-fill {
	height: 100%;
	border-radius: 6px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	gap: 10px;
}
.csingle-f-name { font-size: 12px; font-weight: 600; white-space: nowrap; }
.csingle-f-count { font-size: 12px; font-weight: 700; margin-left: auto; white-space: nowrap; }
.csingle-f-drop { font-size: 10px; color: var(--muted); padding-left: 6px; }

.csingle-romi-card { display: flex; flex-direction: column; }
.csingle-romi-big {
	font-family: var(--display);
	font-size: 60px;
	font-weight: 700;
	color: var(--lime);
	line-height: 1;
}
.csingle-romi-label { font-size: 13px; color: var(--muted); margin-top: 6px; margin-bottom: 20px; }
.csingle-romi-breakdown { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.csingle-romi-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	background: rgba(255,255,255,.03);
	border-radius: 8px;
}
.csingle-romi-row--accent {
	background: rgba(200,255,0,.06);
	border: 1px solid rgba(200,255,0,.15);
}
.csingle-romi-row-label { font-size: 13px; color: var(--muted); }
.csingle-romi-row-val { font-size: 14px; font-weight: 700; color: var(--cream); }
.csingle-romi-row-val--accent { color: var(--lime) !important; font-size: 18px; }

/* Responsive — ads inner */
@media (max-width: 1024px) {
	.csingle-counter-strip { grid-template-columns: repeat(2, 1fr); }
	.csingle-direct-layout { grid-template-columns: 1fr; }
	.csingle-funnel-section { grid-template-columns: 1fr; }
	.csingle-analytics-grid { grid-template-columns: 1fr; }
	.csingle-ad-section { padding: 48px 32px; }
	.csingle-metrika-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.csingle-counter-strip { grid-template-columns: repeat(2, 1fr); }
	.csingle-cs-item { padding: 20px; }
	.csingle-cs-val { font-size: 28px; }
	.csingle-ad-section { padding: 40px 20px; }
	.csingle-ad-title { font-size: 24px; }
	.csingle-ad-num { display: none; }
	.csingle-metrika-kpis { grid-template-columns: repeat(2, 1fr); }
	.csingle-ab-compare { grid-template-columns: 1fr; }
	.csingle-romi-big { font-size: 44px; }
}

/* ==========================================================
 * CASES HUB NAV + SECTIONS
 * ======================================================== */

.chub-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 clamp(20px, 5vw, 80px);
	margin: 0 0 48px;
	border-bottom: 1px solid var(--border);
}
.chub-nav__link {
	padding: 14px 20px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .2s, border-color .2s;
}
.chub-nav__link:hover { color: var(--cream); }
.chub-nav__link--active {
	color: var(--lime);
	border-bottom-color: var(--lime);
}

.chub-section {
	padding: 0 clamp(20px, 5vw, 80px) 72px;
}
.chub-section + .chub-section {
	border-top: 1px solid var(--border);
	padding-top: 64px;
}
.chub-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}
.chub-section__kicker {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 8px;
}
.chub-section__title {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	color: var(--cream);
	margin: 0;
	line-height: 1;
}
.chub-section--ads .chub-section__title { color: var(--lime); }
.chub-section__more {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--border);
}
.chub-section__more:hover { color: var(--cream); border-bottom-color: var(--cream); }
.chub-section__more span { margin-left: 4px; }

.chub-section__footer {
	margin-top: 36px;
	text-align: center;
}
.chub-section__all-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cream);
	text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}
.chub-section__all-btn:hover {
	border-color: var(--cream);
	background: rgba(240,237,229,.04);
}
.chub-section__all-btn--ads { color: var(--lime); border-color: rgba(200,255,0,.3); }
.chub-section__all-btn--ads:hover { border-color: var(--lime); background: rgba(200,255,0,.05); }

@media (max-width: 600px) {
	.chub-nav { gap: 0; overflow-x: auto; }
	.chub-section__head { flex-direction: column; align-items: flex-start; }
	.chub-section__more { display: none; }
}

/* ==========================================================
 * PRELOADER
 * ======================================================== */

.preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	transition: opacity .4s ease, visibility .4s ease;
}
.preloader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.preloader__logo {
	font-family: var(--display);
	font-size: clamp(40px, 8vw, 72px);
	font-weight: 800;
	color: var(--cream);
	letter-spacing: -2px;
}
.preloader__logo span {
	color: var(--lime);
}
.preloader__bar {
	width: 200px;
	height: 2px;
	background: rgba(240,237,229,.12);
	border-radius: 2px;
	overflow: hidden;
}
.preloader__bar span {
	display: block;
	height: 100%;
	background: var(--lime);
	border-radius: 2px;
	width: 0;
	animation: preloader-fill 1.2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes preloader-fill {
	0%   { width: 0; }
	60%  { width: 80%; }
	100% { width: 100%; }
}

/* ==========================================================
 * COOKIE BANNER
 * ======================================================== */

.cookie-bar {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(120%);
	z-index: 9000;
	width: calc(100% - 48px);
	max-width: 640px;
	background: var(--cream);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 8px 40px rgba(0,0,0,.4);
	transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cookie-bar.visible {
	transform: translateX(-50%) translateY(0);
}
.cookie-bar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.cookie-bar__text {
	font-family: var(--sans);
	font-size: 13px;
	color: #111;
	flex: 1;
	min-width: 200px;
	margin: 0;
	line-height: 1.5;
}
.cookie-bar__link {
	color: #111;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cookie-bar__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}
.cookie-bar__accept {
	background: var(--bg);
	color: var(--lime);
	border: none;
	border-radius: 8px;
	padding: 8px 20px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .2s;
}
.cookie-bar__accept:hover { opacity: .8; }
.cookie-bar__decline {
	background: transparent;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 8px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #555;
	cursor: pointer;
	transition: background .2s;
}
.cookie-bar__decline:hover { background: rgba(0,0,0,.06); }
@media (max-width: 480px) {
	.cookie-bar { bottom: 16px; left: 16px; right: 16px; width: auto; transform: translateY(120%); }
	.cookie-bar.visible { transform: translateY(0); }
	.cookie-bar__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   CSINGLE-BH — Browser hero mockup (website case, no thumbnail)
   ============================================================ */
.csingle-bh {
	padding: 0 clamp(16px,5vw,80px) 48px;
	max-width: 1200px;
	margin: 0 auto;
}
.csingle-bh__browser {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(240,237,229,.1);
	box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.csingle-bh__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: #1a1a1a;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.csingle-bh__dots { display:flex; gap:6px; flex-shrink:0; }
.csingle-bh__url {
	flex: 1;
	background: #242424;
	border-radius: 6px;
	padding: 4px 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: rgba(240,237,229,.5);
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.csingle-bh__lock {
	width: 10px;
	height: 10px;
	color: #5af15a;
	flex-shrink: 0;
}
.csingle-bh__ps {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--lime);
	background: rgba(200,255,0,.1);
	padding: 3px 8px;
	border-radius: 4px;
	flex-shrink: 0;
}
.csingle-bh__page { background: var(--cream); }
.csingle-bh__sitenav {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px 24px;
	background: #fff;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.csingle-bh__sitelogo {
	font-family: var(--display);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: -.02em;
	color: #111;
	flex-shrink: 0;
}
.csingle-bh__sitemenu {
	display: flex;
	gap: 20px;
	flex: 1;
}
.csingle-bh__sitemenu span {
	font-size: 11px;
	color: rgba(0,0,0,.5);
	font-family: var(--sans);
}
.csingle-bh__sitecta {
	font-size: 11px;
	background: #111;
	color: var(--lime);
	padding: 5px 14px;
	border-radius: 4px;
	font-family: var(--mono);
	flex-shrink: 0;
}
.csingle-bh__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 300px;
}
.csingle-bh__hero-col {
	padding: 36px 28px 28px;
	background: linear-gradient(135deg,#f8f6f0 0%,#ede9e0 100%);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.csingle-bh__h1 {
	font-family: var(--display);
	font-size: clamp(18px,2.4vw,28px);
	font-weight: 800;
	color: #111;
	line-height: 1.2;
}
.csingle-bh__tagline {
	font-size: 12px;
	color: rgba(0,0,0,.5);
	font-family: var(--sans);
}
.csingle-bh__hero-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.csingle-bh__btn-primary {
	font-size: 11px;
	background: #111;
	color: var(--lime);
	padding: 8px 16px;
	border-radius: 4px;
	font-family: var(--mono);
}
.csingle-bh__btn-sec {
	font-size: 11px;
	color: rgba(0,0,0,.5);
	padding: 8px 0;
	font-family: var(--sans);
}
.csingle-bh__badge {
	font-size: 10px;
	color: var(--lime);
	background: rgba(0,0,0,.08);
	padding: 3px 10px;
	border-radius: 20px;
	width: fit-content;
	font-family: var(--mono);
	margin-top: auto;
}
.csingle-bh__form-col {
	background: #fff;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.csingle-bh__form {
	width: 100%;
	max-width: 280px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 8px;
	padding: 18px;
	box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.csingle-bh__form-title {
	font-family: var(--display);
	font-size: 14px;
	font-weight: 700;
	color: #111;
	margin-bottom: 14px;
}
.csingle-bh__field { margin-bottom: 10px; }
.csingle-bh__flabel {
	font-size: 10px;
	color: rgba(0,0,0,.45);
	font-family: var(--sans);
	margin-bottom: 3px;
}
.csingle-bh__finput {
	height: 30px;
	background: #f5f5f5;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,.08);
	font-size: 11px;
	font-family: var(--sans);
	color: rgba(0,0,0,.3);
	padding: 0 8px;
	display: flex;
	align-items: center;
}
.csingle-bh__finput--filled {
	color: rgba(0,0,0,.65);
	background: #eefad8;
	border-color: rgba(200,255,0,.4);
}
.csingle-bh__fsubmit {
	margin-top: 12px;
	height: 34px;
	background: #111;
	color: var(--lime);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 12px;
	font-family: var(--mono);
	font-weight: 600;
}
.csingle-bh__fnote {
	font-size: 9px;
	color: rgba(0,0,0,.35);
	font-family: var(--sans);
	text-align: center;
	margin-top: 6px;
}
.csingle-bh__strip {
	display: flex;
	gap: 32px;
	padding: 14px 28px;
	background: #111;
	flex-wrap: wrap;
}
.csingle-bh__sitem {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.csingle-bh__sitem strong {
	font-family: var(--display);
	font-size: 18px;
	font-weight: 800;
	color: var(--lime);
}
.csingle-bh__sitem span {
	font-size: 10px;
	color: rgba(240,237,229,.4);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.csingle-bh__quote {
	margin: 28px auto 0;
	max-width: 640px;
	text-align: center;
	font-style: italic;
	color: rgba(240,237,229,.55);
	font-size: 15px;
	font-family: var(--sans);
}
.csingle-bh__cta {
	display: block;
	text-align: center;
	margin: 24px auto 0;
	width: fit-content;
	background: var(--lime);
	color: #080806;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 8px;
	text-decoration: none;
	letter-spacing: .04em;
}
@media (max-width: 700px) {
	.csingle-bh__body { grid-template-columns: 1fr; }
	.csingle-bh__sitemenu { display: none; }
	.csingle-bh__strip { gap: 16px; padding: 10px 16px; }
}

/* ============================================================
   CSINGLE-WM-FULL — Full website mockup in screens section
   (website case, no screenshots attached)
   ============================================================ */
.csingle-screens--mockup { padding-bottom: 60px; }
.csingle-wm-full { margin-top: 32px; }
.csingle-wm-full__browser {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(240,237,229,.1);
	box-shadow: 0 16px 60px rgba(0,0,0,.4);
}
.csingle-wm-full__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: #1a1a1a;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.csingle-wm-full__dots { display:flex; gap:6px; }
.csingle-wm-full__url {
	flex: 1;
	background: #242424;
	border-radius: 6px;
	padding: 4px 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: rgba(240,237,229,.5);
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.csingle-wm-full__lock {
	width: 10px;
	height: 10px;
	color: #5af15a;
	flex-shrink: 0;
}
.csingle-wm-full__ps-badge {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--lime);
	background: rgba(200,255,0,.1);
	padding: 3px 8px;
	border-radius: 4px;
	flex-shrink: 0;
}
.csingle-wm-full__page { background: var(--cream); }
.csingle-wm-full__nav {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px 24px;
	background: #fff;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.csingle-wm-full__nav-logo {
	font-family: var(--display);
	font-weight: 800;
	font-size: 14px;
	color: #111;
	flex-shrink: 0;
}
.csingle-wm-full__nav-menu {
	flex: 1;
	display: flex;
	gap: 20px;
}
.csingle-wm-full__nav-menu span {
	font-size: 11px;
	color: rgba(0,0,0,.5);
}
.csingle-wm-full__nav-cta {
	background: #111;
	color: var(--lime);
	padding: 5px 14px;
	border-radius: 4px;
	font-size: 11px;
	font-family: var(--mono);
	flex-shrink: 0;
}
.csingle-wm-full__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 280px;
}
.csingle-wm-full__hero-left {
	padding: 36px 28px 28px;
	background: linear-gradient(135deg,#f8f6f0 0%,#ede9e0 100%);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.csingle-wm-full__h1 {
	font-family: var(--display);
	font-size: clamp(18px,2.4vw,28px);
	font-weight: 800;
	color: #111;
	line-height: 1.2;
}
.csingle-wm-full__h1-sub {
	font-size: 12px;
	color: rgba(0,0,0,.5);
	font-family: var(--sans);
}
.csingle-wm-full__cta-wrap { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.csingle-wm-full__cta-btn {
	background: #111;
	color: var(--lime);
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 11px;
	font-family: var(--mono);
}
.csingle-wm-full__cta-link {
	font-size: 11px;
	color: rgba(0,0,0,.5);
	padding: 8px 0;
}
.csingle-wm-full__trust { margin-top: auto; }
.csingle-wm-full__ps {
	font-size: 10px;
	font-family: var(--mono);
	color: var(--lime);
	background: rgba(0,0,0,.08);
	padding: 3px 10px;
	border-radius: 20px;
}
.csingle-wm-full__hero-right {
	background: #fff;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.csingle-wm-full__form {
	width: 100%;
	max-width: 280px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 8px;
	padding: 18px;
	box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.csingle-wm-full__form-h {
	font-family: var(--display);
	font-size: 15px;
	font-weight: 700;
	color: #111;
	margin-bottom: 14px;
}
.csingle-wm-full__form-row { margin-bottom: 10px; }
.csingle-wm-full__form-row label {
	display: block;
	font-size: 10px;
	color: rgba(0,0,0,.45);
	font-family: var(--sans);
	margin-bottom: 3px;
}
.csingle-wm-full__input {
	height: 32px;
	background: #f5f5f5;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,.08);
	font-size: 11px;
	color: rgba(0,0,0,.3);
	padding: 0 8px;
	display: flex;
	align-items: center;
}
.csingle-wm-full__input--filled {
	color: rgba(0,0,0,.65);
	background: #eefad8;
	border-color: rgba(200,255,0,.4);
}
.csingle-wm-full__submit {
	margin-top: 12px;
	height: 36px;
	background: #111;
	color: var(--lime);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 12px;
	font-family: var(--mono);
	font-weight: 600;
}
.csingle-wm-full__form-note {
	font-size: 9px;
	color: rgba(0,0,0,.35);
	text-align: center;
	margin-top: 6px;
}
.csingle-wm-full__strip {
	display: flex;
	gap: 40px;
	padding: 14px 28px;
	background: #111;
	flex-wrap: wrap;
}
.csingle-wm-full__strip-item b {
	display: block;
	font-family: var(--display);
	font-size: 20px;
	font-weight: 800;
	color: var(--lime);
}
.csingle-wm-full__strip-item span {
	font-size: 10px;
	color: rgba(240,237,229,.4);
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.csingle-wm-full__services {
	padding: 24px 28px;
	background: #f8f6f0;
	border-top: 1px solid rgba(0,0,0,.06);
}
.csingle-wm-full__services-title {
	font-family: var(--display);
	font-size: 13px;
	font-weight: 700;
	color: #111;
	margin-bottom: 16px;
}
.csingle-wm-full__services-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 12px;
}
.csingle-wm-full__svc-card {
	background: #fff;
	border-radius: 6px;
	padding: 14px;
	border: 1px solid rgba(0,0,0,.07);
}
.csingle-wm-full__svc-ico {
	width: 24px;
	height: 24px;
	background: var(--lime);
	border-radius: 4px;
	margin-bottom: 8px;
}
.csingle-wm-full__svc-name {
	font-size: 11px;
	font-family: var(--sans);
	font-weight: 600;
	color: #111;
	margin-bottom: 8px;
}
.csingle-wm-full__svc-line {
	height: 4px;
	background: rgba(0,0,0,.08);
	border-radius: 2px;
	margin-bottom: 4px;
}
.csingle-wm-full__svc-line--short { width: 60%; }
@media (max-width: 700px) {
	.csingle-wm-full__hero { grid-template-columns: 1fr; }
	.csingle-wm-full__nav-menu { display: none; }
	.csingle-wm-full__services-grid { grid-template-columns: 1fr 1fr; }
	.csingle-wm-full__strip { gap: 16px; padding: 10px 16px; }
}