/*
 * SolarNrg — extras.css
 *
 * Effects theme.json can't express. Every value is traced back to a design
 * token from SolarNrg.dc.html. Blocks opt into these via className
 * (className="sn-*"), so all content stays editable as native blocks in
 * Gutenberg while the chrome (grids, glows, hovers) lives here.
 *
 * Token reference (mirrors theme.json):
 *   --sn-page    #0a1710   --sn-panel   #08120c   --sn-cream  #f4f1e8
 *   --sn-accent  #1f8a5b   --sn-accent-hover #27a36c  --sn-mint #9fe0bf
 *   hairlines: rgba(159,224,191, .1 / .12 / .16 / .2 / .28)
 */

:root {
	--sn-page: #0a1710;
	--sn-panel: #08120c;
	--sn-cream: #f4f1e8;
	--sn-ink: #0f2417;
	--sn-accent: #1f8a5b;
	--sn-accent-hover: #27a36c;
	/* Darker accent for small text on the cream sections — #1f8a5b is only
	 * 3.8:1 on #f4f1e8 (fails WCAG AA). #127a4e is 4.74:1 (passes AA). */
	--sn-accent-cream: #127a4e;
	--sn-mint: #9fe0bf;
	--sn-muted: #8ba596;
	--sn-muted-4: #6f8a7b;

	--sn-line-faint: rgba(159, 224, 191, 0.1);
	--sn-line-soft: rgba(159, 224, 191, 0.12);
	--sn-line-medium: rgba(159, 224, 191, 0.16);
	--sn-line-card: rgba(159, 224, 191, 0.14);
	--sn-line-strong: rgba(159, 224, 191, 0.2);
	--sn-line-bright: rgba(159, 224, 191, 0.28);
	--sn-line-ink: rgba(15, 36, 23, 0.08);
}

* {
	box-sizing: border-box;
}

/* Visually-hidden text for screen readers (e.g. the "5 з 5" star label).
 * Standard WP pattern; declared here so it works on the front end. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

html {
	scroll-behavior: smooth;
}

::selection {
	background: #9fe0bf;
	color: #0a1710;
}

/* Keyframes from the design <helmet>. */
@keyframes sn-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@keyframes sn-pulse {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 1; }
}

/* ===================== HEADER ===================== */
/* Sticky, blurred bar — applied to the header template part's group. */
.sn-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: rgba(10, 23, 16, 0.82);
	border-bottom: 1px solid var(--sn-line-soft);
}

/* Logo mark — emerald rounded square with glow. */
.sn-logomark {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--sn-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 1px rgba(159, 224, 191, 0.25), 0 8px 24px -8px rgba(31, 138, 91, 0.8);
	flex: none;
}
.sn-footer .sn-logomark {
	width: 32px;
	height: 32px;
}

/* Hamburger toggle — hidden on desktop, shown on mobile via the query. */
.sn-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--sn-line-strong);
	border-radius: 10px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	color: var(--sn-cream);
}
.sn-nav-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 18px;
}
.sn-nav-toggle__bars span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.sn-nav-toggle[aria-expanded="true"] .sn-nav-toggle__bars span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.sn-nav-toggle[aria-expanded="true"] .sn-nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.sn-nav-toggle[aria-expanded="true"] .sn-nav-toggle__bars span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Nav links + footer links — hover to white. */
.sn-nav a,
.sn-footer-links a {
	color: #cfe0d6;
	text-decoration: none;
	transition: color 0.15s ease;
}
.sn-nav a:hover,
.sn-footer-links a:hover {
	color: #fff;
}

/* ===================== BUTTONS ===================== */
/* Primary CTA glow + hover (theme.json sets base color/radius/padding). */
.sn-btn-primary .wp-block-button__link {
	box-shadow: 0 8px 22px -10px rgba(31, 138, 91, 0.9);
	transition: background 0.15s ease;
}
.sn-btn-primary-lg .wp-block-button__link {
	box-shadow: 0 16px 40px -16px rgba(31, 138, 91, 1);
}

/* Outline / ghost CTA. */
.sn-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--sn-cream);
	font-weight: 600;
	border: 1px solid var(--sn-line-bright);
	box-shadow: none;
	transition: border-color 0.15s ease;
}
.sn-btn-ghost .wp-block-button__link:hover,
.sn-btn-ghost .wp-block-button__link:focus {
	background: transparent;
	color: var(--sn-cream);
	border-color: rgba(159, 224, 191, 0.6);
}

/* Mono phone button in CTA band. */
.sn-btn-mono .wp-block-button__link {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 600;
}

/* ===================== EYEBROW LABELS / PILLS ===================== */
/* Mono uppercase numbered eyebrow ("01 / Рішення"). On the dark page bg
 * the old accent (#1f8a5b, 4.2:1) failed WCAG AA for 12px text, so the
 * dark-bg default is now mint (#9fe0bf, 12:1). Cream sections override it
 * below to the darker --sn-accent-cream (4.74:1). */
.sn-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sn-mint);
	margin: 0;
}
.sn-eyebrow--mint {
	color: var(--sn-mint);
}

/* Mono small labels (footer column heads, "Працюємо за стандартами"). */
.sn-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sn-muted-4);
	margin: 0;
}

/* Hero status pill with pulsing dot. */
.sn-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sn-mint);
	border: 1px solid var(--sn-line-bright);
	padding: 7px 13px;
	border-radius: 100px;
	width: fit-content;
}
.sn-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sn-accent);
	animation: sn-pulse 2.4s infinite;
	flex: none;
}

/* Trust badge pill (with check). */
.sn-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #cfe0d6;
	border: 1px solid var(--sn-line-medium);
	border-radius: 9px;
	padding: 9px 13px;
	margin: 0;
}
.sn-badge::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: no-repeat center / contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 7L9 18l-5-5' stroke='%231f8a5b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ===================== HERO ===================== */
.sn-hero {
	position: relative;
	overflow: hidden;
}
/* 64px grid backdrop with radial mask. */
.sn-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(159, 224, 191, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 224, 191, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 0%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 80% 70% at 60% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}
/* Radial accent glow top-right. */
.sn-hero::after {
	content: "";
	position: absolute;
	top: -180px;
	right: -160px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(31, 138, 91, 0.45), transparent 65%);
	filter: blur(20px);
	pointer-events: none;
}
.sn-hero > .wp-block-group__inner-container,
.sn-hero > * {
	position: relative;
	z-index: 1;
}

/* Hero image — radius + deep shadow (the editable core/image). */
.sn-hero-image img {
	border-radius: 20px;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 430px;
	object-fit: cover;
}
/* Placeholder state (no image set yet) keeps the framed look in the editor. */
.sn-hero-image.wp-block-image .components-placeholder,
.sn-hero-image .wp-block-image__placeholder {
	border-radius: 20px;
	min-height: 430px;
}

/* Stat numbers (hero + projects) — mono. */
.sn-stat-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 26px;
	font-weight: 600;
	color: #fff;
	line-height: 1;
	margin: 0;
}
.sn-stat-num .sn-accent {
	color: var(--sn-accent);
}

/* ===================== SPEC PANEL ===================== */
/* The floating "Специфікація системи" mono panel over the hero image. */
.sn-spec {
	position: absolute;
	left: -18px;
	bottom: -26px;
	width: 262px;
	background: rgba(8, 18, 12, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--sn-line-strong);
	border-radius: 16px;
	padding: 18px 18px 14px;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
	z-index: 2;
}
.sn-spec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.sn-spec__head .sn-label {
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: var(--sn-mint);
}
.sn-spec__head .sn-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sn-accent);
	flex: none;
}
.sn-spec__rows {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12.5px;
}
.sn-spec__row {
	display: flex;
	justify-content: space-between;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--sn-line-faint);
}
.sn-spec__row:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
.sn-spec__row .k { color: var(--sn-muted); }
.sn-spec__row .v { color: #fff; }
.sn-spec__row .v--accent { color: var(--sn-mint); }

/* ===================== TRUST STRIP ===================== */
.sn-trust {
	border-top: 1px solid var(--sn-line-faint);
	border-bottom: 1px solid var(--sn-line-faint);
	background: var(--sn-panel);
}

/* ===================== CARDS (solutions / reviews) ===================== */
.sn-card {
	background: linear-gradient(180deg, #102a1b, #0c2015);
	border: 1px solid var(--sn-line-card);
	border-radius: 18px;
	padding: 26px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.15s ease;
	height: 100%;
}
.sn-card:hover {
	border-color: rgba(159, 224, 191, 0.4);
}
/* Mono code in card corner (SYS·01). */
.sn-card__code {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	color: var(--sn-muted-4);
	position: absolute;
	top: 20px;
	right: 22px;
	margin: 0;
}
/* Card icon tile. */
.sn-icon-tile {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: rgba(31, 138, 91, 0.16);
	border: 1px solid var(--sn-line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sn-mint);
}
.sn-icon-tile svg { display: block; }

/* Card check-list row. */
.sn-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: #cfe0d6;
	margin: 0;
}
.sn-check::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: no-repeat center / contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 7L9 18l-5-5' stroke='%231f8a5b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* Check-list rendered as a native core/list (ul.sn-check items). Strip the
 * browser list chrome so the custom check rows match the design. */
ul.sn-pkg-divider {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
ul.sn-pkg-divider li.sn-check {
	margin: 0;
}

/* Divider above the check-list inside cards. */
.sn-card__points {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	margin-top: 18px;
	border-top: 1px solid var(--sn-line-faint);
}

/* ===================== STATS BAND ===================== */
.sn-stats-band {
	background: radial-gradient(120% 140% at 0% 0%, rgba(31, 138, 91, 0.22), transparent 55%), #0c2015;
	border: 1px solid var(--sn-line-medium);
	border-radius: 22px;
	padding: 42px 40px;
}
.sn-stats-band .sn-stat-big {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 42px;
	font-weight: 600;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

/* ===================== PROCESS ===================== */
.sn-step {
	position: relative;
	padding-top: 26px;
}
.sn-step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--sn-accent), transparent);
}
.sn-step__num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	color: var(--sn-mint);
	letter-spacing: 0.1em;
	margin: 0;
}

/* ===================== PROJECTS (light section) ===================== */
.sn-projects {
	background: #f4f1e8;
	color: #0f2417;
}
.sn-projects h2,
.sn-projects h3 {
	color: #0f2417;
}
.sn-projects .sn-eyebrow {
	color: var(--sn-accent-cream);
}
/* "Всі кейси" link + project location label use the cream-safe accent. */
.sn-projects .sn-link-accent a,
.sn-projects .sn-link-accent {
	color: var(--sn-accent-cream);
	font-weight: 700;
	text-decoration: none;
}
.sn-proj-loc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	color: var(--sn-accent-cream);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
}
.sn-proj-loc::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	background: no-repeat center / contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z' stroke='%23127a4e' stroke-width='2'/><circle cx='12' cy='10' r='2.4' stroke='%23127a4e' stroke-width='2'/></svg>");
}
.sn-proj-card {
	background: #fff;
	border: 1px solid var(--sn-line-ink);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 40px -28px rgba(15, 36, 23, 0.5);
	height: 100%;
}
.sn-proj-card .wp-block-image,
.sn-proj-card .wp-block-image img {
	margin: 0;
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
}
.sn-proj-card .wp-block-image .components-placeholder {
	min-height: 210px;
}
.sn-proj-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 18px;
	font-weight: 600;
	color: #0f2417;
	margin: 0;
}
.sn-proj-cap {
	font-size: 11.5px;
	color: #5b6f63;
	margin: 0;
}
.sn-proj-specs {
	border-top: 1px solid var(--sn-line-ink);
	padding-top: 16px;
	margin-top: 16px;
}

/* ===================== REVIEWS ===================== */
.sn-stars {
	display: flex;
	gap: 3px;
}
.sn-stars::before {
	content: "★★★★★";
	letter-spacing: 2px;
	color: var(--sn-mint);
	font-size: 16px;
	line-height: 1;
}
.sn-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(31, 138, 91, 0.2);
	border: 1px solid rgba(159, 224, 191, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	color: var(--sn-mint);
	font-size: 16px;
	flex: none;
}
.sn-review-foot {
	border-top: 1px solid var(--sn-line-faint);
	padding-top: 18px;
	margin-top: auto;
}

/* ===================== CTA BAND ===================== */
.sn-cta {
	position: relative;
	overflow: hidden;
	background: radial-gradient(120% 160% at 100% 0%, rgba(31, 138, 91, 0.4), transparent 55%), linear-gradient(180deg, #0f3322, #0a2317);
	border: 1px solid var(--sn-line-strong);
	border-radius: 26px;
	padding: 60px 56px;
}
.sn-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(159, 224, 191, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 224, 191, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 70% 100% at 80% 0%, #000, transparent 70%);
	mask-image: radial-gradient(ellipse 70% 100% at 80% 0%, #000, transparent 70%);
	pointer-events: none;
}
.sn-cta > * {
	position: relative;
	z-index: 1;
}
.sn-cta__aside {
	background: rgba(8, 18, 12, 0.5);
	border: 1px solid rgba(159, 224, 191, 0.18);
	border-radius: 16px;
	padding: 24px;
}
.sn-assure {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--sn-line-faint);
	font-size: 14.5px;
	color: #dce8e0;
	line-height: 1.45;
	margin: 0;
}
.sn-assure:last-child {
	border-bottom: none;
}
.sn-assure::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 1px;
	background: no-repeat center / contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='10' fill='rgba(31,138,91,0.2)'/><path d='M16 9l-5 5-2.5-2.5' stroke='%239fe0bf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ===================== FOOTER ===================== */
.sn-footer {
	border-top: 1px solid var(--sn-line-soft);
}
.sn-footer-bottom {
	border-top: 1px solid var(--sn-line-faint);
	padding-top: 24px;
	margin-top: 40px;
}

/* =====================================================================
 * PHASE 2 — Contact & Business pages
 * Same token system as above. Class hooks (sn-*) keep all copy editable
 * as native blocks; chrome (cards, form fields, map, panels) lives here.
 * ===================================================================== */

/* ---------- Shared page intro (lighter grid mask than hero) ---------- */
.sn-pageintro {
	position: relative;
	overflow: hidden;
}
.sn-pageintro::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(159, 224, 191, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 224, 191, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}
.sn-pageintro::after {
	content: "";
	position: absolute;
	top: -160px;
	left: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(31, 138, 91, 0.4), transparent 65%);
	filter: blur(20px);
	pointer-events: none;
}
.sn-pageintro > * {
	position: relative;
	z-index: 1;
}

/* ===================== CONTACT — FORM CARD ===================== */
.sn-formcard {
	background: linear-gradient(180deg, #102a1b, #0c2015);
	border: 1px solid var(--sn-line-medium);
	border-radius: 22px;
	padding: 34px;
}
/* Mono label above each field. */
.sn-field-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9fb5a6;
	display: block;
	margin: 0 0 8px;
}
.sn-field-label .req { color: var(--sn-mint); }

/* Inputs / select / textarea — dark glass fields from the design. */
.sn-in {
	width: 100%;
	background: rgba(8, 18, 12, 0.4);
	border: 1px solid var(--sn-line-strong);
	border-radius: 11px;
	padding: 13px 14px;
	color: var(--sn-cream);
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	line-height: 1.4;
}
textarea.sn-in { resize: vertical; min-height: 110px; }
input.sn-in[type="tel"] { font-family: 'IBM Plex Mono', monospace; }
.sn-in::placeholder { color: #6f8a7b; }
.sn-in:focus {
	outline: none;
	border-color: rgba(159, 224, 191, 0.55);
	background: rgba(8, 18, 12, 0.6);
}
.sn-in option { background: #0c2015; }
/* Honeypot — visually hidden, off-screen, not announced. */
.sn-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Form field grid (2-up, collapses on mobile). */
.sn-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 16px;
}
.sn-form-row:first-of-type { margin-top: 0; }
.sn-form-field { display: flex; flex-direction: column; }

/* Submit row. */
.sn-form-submit {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	flex-wrap: wrap;
}
.sn-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--sn-accent);
	color: var(--sn-page);
	border: none;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 15px 28px;
	border-radius: 12px;
	box-shadow: 0 16px 40px -16px rgba(31, 138, 91, 1);
	transition: background 0.15s ease;
}
.sn-submit-btn:hover { background: var(--sn-accent-hover); }
.sn-submit-btn svg { display: block; }

/* Success state ("Заявку прийнято!"). Hidden until JS / ?sent=1 reveals it. */
.sn-form-success { display: none; text-align: center; padding: 40px 20px; }
.sn-form.is-sent .sn-form-fields { display: none; }
.sn-form.is-sent .sn-form-success { display: block; }
.sn-success-icon {
	width: 74px;
	height: 74px;
	margin: 0 auto;
	border-radius: 50%;
	background: rgba(31, 138, 91, 0.18);
	border: 1px solid rgba(159, 224, 191, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sn-reset-btn {
	margin-top: 26px;
	background: transparent;
	color: var(--sn-mint);
	border: 1px solid rgba(159, 224, 191, 0.3);
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 22px;
	border-radius: 11px;
	transition: border-color 0.15s ease;
}
.sn-reset-btn:hover { border-color: rgba(159, 224, 191, 0.6); }
/* Error banner (bad nonce / mail failure → ?sent=0). */
.sn-form-error {
	background: rgba(180, 60, 60, 0.14);
	border: 1px solid rgba(220, 120, 120, 0.4);
	border-radius: 11px;
	padding: 12px 14px;
	color: #f3c9c9;
	font-size: 14px;
	margin: 0 0 20px;
}

/* ===================== CONTACT — INFO COLUMN ===================== */
.sn-info-card {
	background: linear-gradient(180deg, #102a1b, #0c2015);
	border: 1px solid var(--sn-line-card);
	border-radius: 16px;
	padding: 20px 22px;
	display: flex;
	align-items: flex-start;
	gap: 15px;
}
.sn-info-tile {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(31, 138, 91, 0.16);
	border: 1px solid var(--sn-line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sn-mint);
}
.sn-info-tile svg { display: block; }
.sn-info-card .k {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sn-muted-4);
	margin: 0;
}
.sn-info-card .v { font-size: 16px; font-weight: 600; color: #fff; margin: 5px 0 0; }
.sn-info-card .sub { font-size: 13px; color: var(--sn-muted); margin: 3px 0 0; }

/* Socials block. */
.sn-social-card {
	background: radial-gradient(120% 140% at 100% 0%, rgba(31, 138, 91, 0.2), transparent 55%), #0c2015;
	border: 1px solid var(--sn-line-card);
	border-radius: 16px;
	padding: 20px 22px;
}
.sn-social-links { display: flex; gap: 10px; }
.sn-social-links a {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	border: 1px solid var(--sn-line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #cfe0d6;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.sn-social-links a:hover { border-color: rgba(159, 224, 191, 0.55); color: #fff; }
.sn-social-links svg { display: block; }

/* ===================== CONTACT — MAP ===================== */
.sn-map-wrap {
	position: relative;
	border: 1px solid var(--sn-line-medium);
	border-radius: 22px;
	overflow: hidden;
	background: #0c2015;
}
.sn-map { height: 440px; }
.sn-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Tint the OSM tiles to match the dark emerald theme. */
	filter: invert(0.92) hue-rotate(175deg) brightness(0.95) contrast(0.92) saturate(0.85);
}
.sn-map-card {
	position: absolute;
	left: 24px;
	bottom: 24px;
	max-width: 300px;
	background: rgba(8, 18, 12, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(159, 224, 191, 0.22);
	border-radius: 16px;
	padding: 20px 22px;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
}
.sn-map-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sn-mint);
	margin: 0;
}
.sn-map-eyebrow svg { display: block; }
.sn-map-route {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	color: var(--sn-mint);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.sn-map-route:hover { color: #fff; }
.sn-map-route svg { display: block; }

/* ===================== BUSINESS — LOGO BADGE ===================== */
/* "Бізнес" pill next to the wordmark. Lives in the shared header but is
 * shown only on the Business page (body.sn-page-business), matching the
 * design's logo treatment without forking the header part. */
.sn-logo-badge {
	display: none;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sn-page);
	background: var(--sn-mint);
	padding: 3px 7px;
	border-radius: 6px;
	margin: 0;
	align-self: center;
}
.sn-page-business .sn-logo-badge {
	display: inline-block;
}

/* ===================== BUSINESS — HERO META ROW ===================== */
.sn-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sn-muted-4);
	padding-bottom: 24px;
	border-bottom: 1px solid var(--sn-line-soft);
	margin: 0;
}
.sn-meta-row .accent { color: var(--sn-mint); }

/* Floating metric chips under the B2B hero image. */
.sn-hero-chips {
	position: absolute;
	left: -18px;
	bottom: -26px;
	display: flex;
	gap: 10px;
	z-index: 2;
}
.sn-chip {
	background: rgba(8, 18, 12, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--sn-line-strong);
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
}
.sn-chip .num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}
.sn-chip .num .accent { color: var(--sn-mint); }
.sn-chip .cap { font-size: 11.5px; color: var(--sn-muted); margin: 2px 0 0; }
.sn-b2b-hero-image img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.sn-b2b-hero-image .components-placeholder { min-height: 420px; border-radius: 20px; }

/* ===================== BUSINESS — STATS BAND (4-up, flat) ===================== */
.sn-b2b-stats {
	border-top: 1px solid var(--sn-line-faint);
	border-bottom: 1px solid var(--sn-line-faint);
	background: var(--sn-panel);
}
.sn-b2b-stat-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 32px;
	font-weight: 600;
	color: #fff;
	line-height: 1;
	margin: 0;
}
.sn-b2b-stat-lbl { font-size: 13.5px; color: #9fb5a6; margin: 9px 0 0; }

/* ===================== BUSINESS — AUDIENCE CARDS ===================== */
.sn-aud-card {
	background: linear-gradient(180deg, #102a1b, #0c2015);
	border: 1px solid var(--sn-line-card);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color 0.15s ease;
	height: 100%;
}
.sn-aud-card:hover { border-color: rgba(159, 224, 191, 0.4); }
.sn-aud-card .wp-block-image,
.sn-aud-card .wp-block-image img {
	margin: 0;
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}
.sn-aud-card .wp-block-image .components-placeholder { min-height: 160px; }
.sn-aud-code {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	color: var(--sn-muted-4);
	letter-spacing: 0.08em;
	margin: 0;
}

/* ===================== BUSINESS — PACKAGE CARDS ===================== */
.sn-pkg-card {
	position: relative;
	background: linear-gradient(180deg, #102a1b, #0c2015);
	border: 1px solid var(--sn-line-medium);
	border-radius: 20px;
	padding: 28px;
	height: 100%;
	transition: border-color 0.15s ease;
}
.sn-pkg-card:hover { border-color: rgba(159, 224, 191, 0.4); }
.sn-pkg-tag {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sn-mint);
	border: 1px solid rgba(159, 224, 191, 0.25);
	padding: 5px 10px;
	border-radius: 7px;
	margin: 0;
}
.sn-pkg-divider {
	padding-top: 16px;
	margin-top: 18px;
	border-top: 1px solid var(--sn-line-faint);
}
/* "Кому підходить" footer box. */
.sn-fit {
	margin-top: 18px;
	background: rgba(8, 18, 12, 0.4);
	border: 1px solid var(--sn-line-soft);
	border-radius: 12px;
	padding: 14px;
}
.sn-fit .k {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sn-muted-4);
	margin: 0 0 6px;
}
.sn-fit .v { font-size: 13.5px; color: #cfe0d6; line-height: 1.5; margin: 0; }

/* ===================== BUSINESS — OUTCOMES (light grid) ===================== */
.sn-outcomes {
	background: #f4f1e8;
	color: #0f2417;
}
.sn-outcomes h2,
.sn-outcomes h3 { color: #0f2417; }
.sn-outcomes .sn-eyebrow { color: var(--sn-accent-cream); }
/* Hairline grid of 6 cells (1px gaps reveal the ink hairline). */
.sn-outcomes-grid {
	background: rgba(15, 36, 23, 0.1);
	border: 1px solid rgba(15, 36, 23, 0.1);
	border-radius: 18px;
	overflow: hidden;
}
/* Each column hosts two stacked outcome cells; a 1px gap lets the grid's
 * ink backdrop show through as a hairline (matches the prototype). The
 * column itself is the hairline colour so gaps between cells read as lines. */
.sn-outcomes-grid .wp-block-column {
	background: rgba(15, 36, 23, 0.1);
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.sn-outcome {
	background: #fff;
	padding: 28px 26px;
	height: 100%;
}
.sn-outcome .num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	color: var(--sn-accent-cream);
	letter-spacing: 0.08em;
	margin: 0;
}
.sn-outcome h3 { font-size: 19px; font-weight: 600; color: #0f2417; margin: 12px 0 0; }
.sn-outcome p { font-size: 14px; line-height: 1.6; color: #5b6f63; margin: 9px 0 0; }

/* ===================== BUSINESS — FINANCE + DIFFERENTIATORS ===================== */
.sn-finance {
	background: radial-gradient(120% 140% at 0% 0%, rgba(31, 138, 91, 0.2), transparent 55%), #0c2015;
	border: 1px solid var(--sn-line-medium);
	border-radius: 20px;
	padding: 32px;
	height: 100%;
}
.sn-fund-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: rgba(8, 18, 12, 0.4);
	border: 1px solid var(--sn-line-soft);
	border-radius: 12px;
}
.sn-fund-row::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 1px;
	background: no-repeat center / contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='10' fill='rgba(31,138,91,0.2)'/><path d='M16 9l-5 5-2.5-2.5' stroke='%239fe0bf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.sn-fund-row .t { font-size: 15px; font-weight: 600; color: #fff; margin: 0; }
.sn-fund-row .d { font-size: 13px; color: var(--sn-muted); margin: 2px 0 0; }

.sn-diff {
	background: linear-gradient(180deg, #102a1b, #0c2015);
	border: 1px solid var(--sn-line-medium);
	border-radius: 20px;
	padding: 32px;
	height: 100%;
}
.sn-diff-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #dce8e0;
	padding: 8px 0;
	border-bottom: 1px solid rgba(159, 224, 191, 0.08);
	margin: 0;
}
.sn-diff-row .num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	color: var(--sn-accent);
	flex: none;
}

/* ===================== BUSINESS — ACCREDITATION STRIP ===================== */
.sn-accred {
	border-top: 1px solid var(--sn-line-faint);
	border-bottom: 1px solid var(--sn-line-faint);
	padding: 26px 0;
}

/* ===================== BUSINESS — CTA ENGAGEMENT LIST ===================== */
.sn-engage-row {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 11px 0;
	border-bottom: 1px solid var(--sn-line-faint);
	margin: 0;
}
.sn-engage-row:last-child { border-bottom: none; }
.sn-engage-row .num {
	flex-shrink: 0;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	color: var(--sn-mint);
	width: 26px; /* fit "III" — 3 mono chars overflow 22px and wrapped */
	white-space: nowrap;
}
.sn-engage-row .t { font-size: 14.5px; font-weight: 600; color: #fff; margin: 0; }
.sn-engage-row .d { font-size: 13px; color: var(--sn-muted); margin: 2px 0 0; }

/* =====================================================================
 * EMPTY IMAGE PLACEHOLDERS (front-end)
 *
 * The client supplies real photos later. Until then every editable
 * core/image slot has an <img> with no src, which would collapse the
 * hero / project / audience layouts. These rules give empty slots a
 * styled placeholder that RESERVES the correct space (min-height) and
 * shows the prototype's dark grid look + a mono "Фото" label.
 *
 * Targeting: a placeholder figure is one whose <img> has no [src]
 * (img:not([src])). The moment the client sets an image, [src] exists,
 * the :has() rule stops matching, and the real photo shows — blocks stay
 * fully editable. Scoped to the specific design slots only.
 * ===================================================================== */
.sn-hero-image:has(img:not([src])),
.sn-b2b-hero-image:has(img:not([src])),
.sn-proj-card .wp-block-image:has(img:not([src])),
.sn-aud-card .wp-block-image:has(img:not([src])) {
	position: relative;
	display: block;
	background-color: #0c2015;
	background-image:
		linear-gradient(rgba(159, 224, 191, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(159, 224, 191, 0.07) 1px, transparent 1px),
		radial-gradient(120% 120% at 70% 0%, rgba(31, 138, 91, 0.18), transparent 60%);
	background-size: 28px 28px, 28px 28px, 100% 100%;
	border: 1px solid var(--sn-line-medium);
}

/* Collapse the empty <img> so only the styled figure shows. */
.sn-hero-image img:not([src]),
.sn-b2b-hero-image img:not([src]),
.sn-proj-card .wp-block-image img:not([src]),
.sn-aud-card .wp-block-image img:not([src]) {
	visibility: hidden;
}

/* Mono "Фото" label, centred in the reserved area. */
.sn-hero-image:has(img:not([src]))::after,
.sn-b2b-hero-image:has(img:not([src]))::after,
.sn-proj-card .wp-block-image:has(img:not([src]))::after,
.sn-aud-card .wp-block-image:has(img:not([src]))::after {
	content: "Фото";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(159, 224, 191, 0.55);
	pointer-events: none;
}

/* Reserve the right height per slot (matches the real-image heights). */
.sn-hero-image:has(img:not([src])) { min-height: 430px; border-radius: 20px; }
.sn-b2b-hero-image:has(img:not([src])) { min-height: 420px; border-radius: 20px; }
.sn-proj-card .wp-block-image:has(img:not([src])) { min-height: 210px; }
.sn-aud-card .wp-block-image:has(img:not([src])) { min-height: 160px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 781px) {
	.sn-hero-image img { height: 320px; }
	.sn-hero-image:has(img:not([src])) { min-height: 320px; }
	.sn-b2b-hero-image:has(img:not([src])) { min-height: 300px; }
	.sn-spec { position: static; width: auto; margin-top: 18px; left: 0; bottom: 0; }
	.sn-cta { padding: 40px 28px; }
	.sn-form-row { grid-template-columns: 1fr; }
	.sn-b2b-hero-image img { height: 300px; }
	.sn-hero-chips { position: static; margin-top: 18px; left: 0; bottom: 0; }
	.sn-map-card { position: static; max-width: none; margin: -2px; border-radius: 0; }

	/* ---- Mobile navigation ---- */
	.sn-nav-toggle { display: inline-flex; }

	/* Hide the header CTA on mobile — the hero CTA + the menu cover it,
	 * and it otherwise wraps to its own crowded row. (!important + scope
	 * to beat the block's .is-layout-flex display.) */
	.sn-header .sn-btn-primary { display: none !important; }

	/* Cards stack vertically on mobile but the columns' blockGap is
	 * horizontal-only, so stacked cards touch. Add a row-gap. */
	#solutions .wp-block-columns,
	#projects .wp-block-columns,
	#reviews .wp-block-columns {
		row-gap: 22px;
	}

	/* Business page: same horizontal-only blockGap issue across its card
	 * rows (audience, packages, process, finance/diff, hero, stats, CTA).
	 * Exclude the outcomes grid — it uses an intentional 1px hairline gap. */
	body.sn-page-business .wp-block-columns:not(.sn-outcomes-grid) {
		row-gap: 22px;
	}

	/* Collapse the inline nav into a dropdown panel under the header bar.
	 * Hidden by default; .is-open (set by nav.js) reveals it. */
	/* Higher specificity (.sn-header .sn-nav) so these beat WordPress's
	 * .is-layout-flex { display:flex } which the block emits at equal
	 * specificity — otherwise the menu never collapses on mobile. */
	.sn-header .sn-nav {
		display: none !important;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px !important;
		padding: 14px 32px 20px;
		background: rgba(8, 18, 12, 0.97);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--sn-line-soft);
	}
	.sn-header .sn-nav.is-open {
		display: flex !important;
	}
	.sn-header .sn-nav p {
		padding: 8px 0;
		width: 100%;
	}
}