:root {
	--ok-black: #080808;
	--ok-graphite: #151515;
	--ok-line: rgba(255, 255, 255, 0.18);
	--ok-soft-line: rgba(8, 8, 8, 0.12);
	--ok-orange: #f58220;
	--ok-accent-rgb: 245, 130, 32;
	--ok-orange-dark: #c85b00;
	--ok-silver: #eef0f2;
	--ok-white: #ffffff;
	--ok-text: #1d1d1f;
	--ok-muted: #6c6f75;
	--ok-container: min(1180px, calc(100vw - 40px));
	--ok-radius: 8px;
	--ok-font-display: "Exo 2", sans-serif;
	--ok-font-body: "Exo 2", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ok-text);
	background: var(--ok-white);
	font-family: var(--ok-font-body);
	line-height: 1.55;
}

.home .ok-main {
	background: linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f6f7f8) 48%, #ffffff 100%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.ok-nav-list,
.ok-header-cta,
.ok-button,
.ok-eyebrow,
.ok-service span,
.ok-hero-proof,
.ok-footer h2 {
	font-family: var(--ok-font-display);
}

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

a {
	color: inherit;
	text-decoration: none;
}

.skip-link,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.skip-link:focus {
	z-index: 1000;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 10px 14px;
	clip: auto;
	background: var(--ok-orange);
	color: var(--ok-black);
}

.ok-container,
.ok-section {
	width: var(--ok-container);
	margin: 0 auto;
}

.ok-breadcrumb {
	width: 100%;
	padding: 154px max(20px, calc((100vw - 1180px) / 2)) 0;
	background: #ffffff;
	border-bottom: 1px solid rgba(8, 8, 8, 0.06);
}

.ok-breadcrumb + .ok-page-hero {
	margin-top: 0;
	padding-top: 82px;
}

.ok-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	width: min(1180px, 100%);
	padding: 13px 0;
	margin: 0 auto;
	color: var(--ok-muted);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	list-style: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ok-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ok-breadcrumb li + li::before {
	width: 5px;
	height: 5px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	content: "";
	opacity: 0.52;
	transform: rotate(45deg);
}

.ok-breadcrumb a {
	color: var(--ok-muted);
	transition: color 160ms ease;
}

.ok-breadcrumb a:hover,
.ok-breadcrumb a:focus-visible {
	color: var(--ok-orange-dark);
}

.ok-breadcrumb span {
	color: var(--ok-text);
}

.ok-header {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	color: var(--ok-text);
	background: rgba(255, 255, 255, 0.98);
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	border-bottom: 1px solid rgba(20, 20, 20, 0.08);
	box-shadow: 0 14px 40px rgba(8, 8, 8, 0.08);
}

.ok-header.is-scrolled,
body:not(.home) .ok-header {
	background: rgba(255, 255, 255, 0.96);
	border-color: rgba(20, 20, 20, 0.1);
	box-shadow: 0 18px 48px rgba(8, 8, 8, 0.1);
	backdrop-filter: blur(18px);
}

.ok-topbar {
	display: flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 0;
	overflow: hidden;
	background: linear-gradient(90deg, var(--ok-accent-warm, #f15a24) 0%, var(--ok-accent-bright, #ff8a00) 54%, var(--ok-accent-warm, #ef6a00) 100%);
	color: var(--ok-white);
	font-family: var(--ok-font-display);
	font-size: clamp(9px, 0.75vw, 12px);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	white-space: nowrap;
}

.ok-topbar-track {
	display: flex;
	width: max-content;
	animation: okMarquee 32s linear infinite;
	will-change: transform;
}

.ok-topbar-group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	min-width: 100vw;
}

.ok-topbar-group span {
	display: block;
	padding: 0 42px;
}

.ok-header-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 24px;
	align-items: center;
	width: min(1320px, calc(100vw - 32px));
	min-height: 96px;
	margin: 0 auto;
}

.ok-brand img,
.custom-logo {
	width: 238px;
	max-height: 62px;
	object-fit: contain;
}

.ok-nav-list {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: flex-end;
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: clamp(14px, 1vw, 16px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
}

.ok-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	color: var(--ok-text);
	opacity: 0.9;
	transition: opacity 160ms ease, color 160ms ease;
}

.ok-nav a[href*="hizmet"]::after,
.ok-nav-branches > a::after,
.ok-nav a[href="#subeler"]::after {
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	transform: translateY(-2px) rotate(45deg);
	transition: transform 160ms ease;
}

.ok-nav a:hover,
.ok-nav a:focus {
	color: var(--ok-orange);
	opacity: 1;
}

.ok-header.is-mega-open .ok-nav a[href*="hizmet"],
.ok-header.is-branches-mega-open .ok-nav-branches > a,
.ok-header.is-branches-mega-open .ok-nav a[href="#subeler"] {
	color: var(--ok-orange);
	opacity: 1;
}

.ok-header.is-mega-open .ok-nav a[href*="hizmet"]::after,
.ok-header.is-branches-mega-open .ok-nav-branches > a::after,
.ok-header.is-branches-mega-open .ok-nav a[href="#subeler"]::after {
	transform: translateY(1px) rotate(225deg);
}

.ok-mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 110;
	width: min(1280px, calc(100vw - 48px));
	padding-top: 10px;
	color: var(--ok-text);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -10px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
	visibility: hidden;
}

.ok-header.is-mega-open .ok-mega-menu[data-mega-menu="services"],
.ok-header.is-branches-mega-open .ok-mega-menu[data-mega-menu="branches"],
.ok-mega-menu:focus-within {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
	visibility: visible;
}

.ok-mega-menu-inner {
	display: grid;
	grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
	gap: 1px;
	overflow: hidden;
	border: 1px solid rgba(20, 20, 20, 0.1);
	border-radius: var(--ok-radius);
	background:
		radial-gradient(circle at 12% 0%, rgba(var(--ok-accent-rgb), 0.13), transparent 30%),
		rgba(255, 255, 255, 0.98);
	box-shadow: 0 30px 80px rgba(8, 8, 8, 0.16);
	backdrop-filter: blur(18px);
}

.ok-mega-intro {
	display: grid;
	align-content: center;
	padding: 38px;
	background: linear-gradient(145deg, rgba(var(--ok-accent-rgb), 0.13), rgba(20, 20, 20, 0.03));
}

.ok-mega-intro span {
	color: var(--ok-orange);
	font-family: var(--ok-font-display);
	font-size: 34px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.ok-mega-intro p {
	max-width: 330px;
	margin: 16px 0 24px;
	color: var(--ok-muted);
	font-size: 17px;
	line-height: 1.45;
}

.ok-mega-intro a {
	display: inline-flex;
	width: fit-content;
	color: var(--ok-text);
	font-family: var(--ok-font-display);
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
}

.ok-mega-intro a::after {
	margin-left: 8px;
	color: var(--ok-orange);
	content: "→";
}

.ok-mega-services {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: rgba(20, 20, 20, 0.08);
}

.ok-mega-service {
	display: grid;
	align-content: start;
	min-height: 285px;
	padding: 22px;
	background: rgba(255, 255, 255, 0.9);
	transition: background 180ms ease, transform 180ms ease;
}

.ok-mega-service:hover,
.ok-mega-service:focus {
	background: var(--ok-accent-soft, #fff6ef);
	transform: translateY(-2px);
}

.ok-mega-service img {
	width: 100%;
	height: 112px;
	margin-bottom: 18px;
	object-fit: cover;
	border-radius: var(--ok-radius);
	filter: saturate(1.08) contrast(1.04);
}

.ok-mega-service span {
	display: block;
	color: var(--ok-text);
	font-family: var(--ok-font-display);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.05;
}

.ok-mega-service small {
	display: block;
	margin-top: 10px;
	color: var(--ok-muted);
	font-size: 14px;
	line-height: 1.45;
}

.ok-mega-menu-branches .ok-mega-menu-inner {
	grid-template-columns: minmax(320px, 0.42fr) minmax(0, 1fr);
}

.ok-mega-branches {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ok-mega-branch {
	min-height: 310px;
	padding: 26px;
}

.ok-mega-branch img {
	height: 142px;
}

.ok-header-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: flex-end;
	white-space: nowrap;
}

.ok-header-cta,
.ok-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0;
	transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ok-header-cta,
.ok-button-primary {
	background: linear-gradient(135deg, var(--ok-accent-bright, #ff8a00), var(--ok-accent-warm, #ff5225));
	color: var(--ok-white);
	box-shadow: 0 16px 34px rgba(var(--ok-accent-rgb), 0.24);
}

.ok-header-cta {
	min-height: 42px;
	padding: 0 18px;
	background: linear-gradient(135deg, var(--ok-accent-bright, #ff8a00), var(--ok-accent-warm, #ff5225));
	box-shadow: 0 14px 28px rgba(var(--ok-accent-rgb), 0.22);
	color: var(--ok-white);
	font-size: 13px;
}

.ok-header-phone {
	color: var(--ok-orange);
	font-family: var(--ok-font-display);
	font-size: 16px;
	font-weight: 900;
}

.ok-button-ghost {
	border: 1px solid rgba(255, 255, 255, 0.42);
	color: var(--ok-white);
}

.ok-button-ghost-dark {
	border: 1px solid var(--ok-soft-line);
	color: var(--ok-text);
}

.ok-header-cta:hover,
.ok-button:hover {
	transform: translateY(-2px);
}

.ok-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: transparent;
}

.ok-menu-toggle span:not(.screen-reader-text) {
	display: block;
	height: 2px;
	margin: 5px 0;
	background: var(--ok-text);
}

.ok-hero,
.ok-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding: 180px max(24px, calc((100vw - 1180px) / 2)) 44px;
	overflow: hidden;
	color: var(--ok-white);
	background: #080808;
	text-align: center;
}

.ok-page-hero {
	background-image:
		radial-gradient(circle at 50% 42%, rgba(var(--ok-accent-rgb), 0.16), transparent 34%),
		linear-gradient(180deg, rgba(8, 8, 8, 0.32) 0%, rgba(8, 8, 8, 0.82) 74%, #080808 100%),
		linear-gradient(90deg, rgba(8, 8, 8, 0.8), rgba(8, 8, 8, 0.34), rgba(8, 8, 8, 0.8)),
		var(--hero-image);
	background-position: center;
	background-size: cover;
}

.ok-hero::after {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(ellipse at center bottom, transparent 0%, rgba(8, 8, 8, 0.28) 48%, rgba(8, 8, 8, 0.72) 100%);
	content: "";
	pointer-events: none;
}

.ok-page-hero {
	min-height: 58svh;
	padding-bottom: 80px;
}

.ok-hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #080808;
}

.ok-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-image:
		radial-gradient(circle at 50% 42%, rgba(var(--ok-accent-rgb), 0.16), transparent 34%),
		linear-gradient(180deg, rgba(8, 8, 8, 0.28) 0%, rgba(8, 8, 8, 0.82) 74%, #080808 100%),
		linear-gradient(90deg, rgba(8, 8, 8, 0.84), rgba(8, 8, 8, 0.36), rgba(8, 8, 8, 0.82)),
		var(--slide-image);
	background-position: center;
	background-size: cover;
	transform: scale(1.035);
	transition: opacity 720ms ease, transform 5200ms ease;
}

.ok-hero-slide.is-active {
	opacity: 1;
	transform: scale(1);
}

.ok-hero-content,
.ok-page-hero .ok-container {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	animation: okRise 620ms ease both;
}

.ok-hero-slider .ok-hero-content {
	margin-top: -56px;
}

.ok-eyebrow {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(12px, 1.35vw, 22px);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-hero .ok-eyebrow::after {
	display: block;
	width: 210px;
	max-width: 44vw;
	height: 3px;
	margin: 22px auto 0;
	background: var(--ok-orange);
	content: "";
}

.ok-hero h1,
.ok-page-hero h1 {
	margin: 0;
	font-size: clamp(42px, 5.7vw, 82px);
	font-style: italic;
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: 0;
	text-transform: uppercase;
	text-shadow: 0 22px 60px rgba(0, 0, 0, 0.48);
}

.ok-page-hero h1 {
	font-size: clamp(34px, 4.2vw, 58px);
	font-style: normal;
	line-height: 1.02;
	text-transform: none;
}

.ok-hero-lead,
.ok-page-hero p:not(.ok-eyebrow) {
	max-width: 620px;
	margin: 22px auto 0;
	font-size: clamp(20px, 2.2vw, 31px);
	font-weight: 800;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
}

.ok-hero-lead {
	font-size: clamp(16px, 1.45vw, 22px);
	letter-spacing: 0.08em;
}

.ok-hero-slider.is-copy-changing .ok-hero-content .ok-eyebrow,
.ok-hero-slider.is-copy-changing .ok-hero-content h1,
.ok-hero-slider.is-copy-changing .ok-hero-lead {
	animation: okHeroCopyIn 520ms ease both;
}

@keyframes okHeroCopyIn {
	from {
		opacity: 0.24;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ok-page-hero p:not(.ok-eyebrow) {
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 500;
	text-transform: none;
}

.ok-page-hero .ok-eyebrow {
	font-size: clamp(11px, 0.85vw, 13px);
}

.ok-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.ok-hero-tabs {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	justify-content: center;
	width: min(860px, calc(100vw - 48px));
	transform: translateX(-50%);
}

.ok-hero-tabs button {
	position: relative;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 38px;
	padding: 0 0 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--ok-font-display);
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: color 180ms ease, transform 180ms ease;
}

.ok-hero-tabs button::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--ok-orange);
	content: "";
	opacity: 0;
	transform: scaleX(0.42);
	transform-origin: center;
	transition: opacity 180ms ease, transform 180ms ease;
}

.ok-hero-tabs button span {
	color: var(--ok-orange);
	font-size: 11px;
}

.ok-hero-tabs button:hover,
.ok-hero-tabs button.is-active {
	color: var(--ok-white);
	transform: translateY(-1px);
}

.ok-hero-tabs button.is-active::after {
	opacity: 1;
	transform: scaleX(1);
}

.ok-button {
	min-height: 60px;
	padding: 0 34px;
	font-size: 16px;
}

.ok-button-call {
	background: linear-gradient(135deg, var(--ok-accent-bright, #ff9b16), var(--ok-accent-warm, #f15a24));
}

.ok-hero-proof {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	width: min(840px, calc(100vw - 48px));
	padding: 0;
	border-left: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	transform: translateX(-50%);
}

.ok-hero-proof span {
	padding: 0 0 8px;
	border-bottom: 2px solid rgba(var(--ok-accent-rgb), 0.82);
}

.ok-section {
	padding: 90px 0;
}

.ok-split {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 72px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	overflow: hidden;
	color: var(--ok-text);
	background:
		radial-gradient(circle at 10% 12%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f5f6f7) 100%);
	border-top: 0;
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-split::before {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 8, 8, 0.04) 1px, transparent 1px),
		linear-gradient(180deg, rgba(8, 8, 8, 0.035) 1px, transparent 1px);
	background-size: 84px 84px;
	content: "";
	opacity: 0.44;
	pointer-events: none;
}

.ok-split > * {
	position: relative;
	z-index: 1;
}

.ok-split .ok-eyebrow {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	margin-bottom: 14px;
	padding: 7px 12px;
	border: 1px solid rgba(var(--ok-accent-rgb), 0.22);
	border-radius: 999px;
	background: rgba(var(--ok-accent-rgb), 0.08);
	color: var(--ok-orange-dark);
	font-size: 12px;
	letter-spacing: 0.08em;
}

.ok-section.ok-split h2 {
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-section-note {
	max-width: 480px;
	margin: 18px 0 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-split .ok-copy p,
.ok-split .ok-check-list li {
	color: var(--ok-muted);
}

.ok-inline-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-top: 22px;
	color: var(--ok-orange-dark);
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-inline-link::after {
	display: inline-block;
	margin-left: 12px;
	color: var(--ok-orange);
	content: "→";
	transition: transform 180ms ease;
}

.ok-inline-link:hover::after,
.ok-inline-link:focus-visible::after {
	transform: translateX(4px);
}

.ok-inline-link:focus-visible {
	outline: 2px solid rgba(var(--ok-accent-rgb), 0.42);
	outline-offset: 5px;
}


.ok-section h2 {
	margin: 0;
	font-size: clamp(26px, 3vw, 42px);
	line-height: 1.08;
	letter-spacing: 0;
}

.ok-section .ok-eyebrow {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #383838;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.ok-section .ok-eyebrow::before {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ok-orange), var(--ok-orange-dark));
	box-shadow: 0 0 0 6px rgba(var(--ok-accent-rgb), 0.12);
	content: "";
	flex: 0 0 18px;
	animation: okLivePulse 1800ms ease-in-out infinite;
}

.ok-section .ok-section-head h2,
.ok-section.ok-split h2,
.ok-package-band h2,
.ok-faq-preview h2,
.ok-process .ok-section-head h2,
.ok-showcase h2,
.ok-trust-head h2,
.ok-instagram-head h2,
.ok-final-cta h2 {
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-copy p,
.ok-section-head p,
.ok-showcase p,
.ok-contact-grid p {
	margin: 0;
	color: var(--ok-muted);
	font-size: 17px;
}

.ok-copy p + p {
	margin-top: 18px;
}

.ok-check-list {
	display: grid;
	gap: 12px;
	padding: 0;
	margin: 28px 0 0;
	list-style: none;
}

.ok-check-list li {
	position: relative;
	padding-left: 28px;
	font-weight: 700;
}

.ok-check-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--ok-orange);
	content: "✓";
}

.ok-section-head {
	display: grid;
	gap: 16px;
	max-width: 760px;
	margin-bottom: 42px;
}

.ok-service-strip {
	position: relative;
	width: 100%;
	scroll-margin-top: 154px;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	overflow: hidden;
	color: var(--ok-text);
	background:
		radial-gradient(circle at 86% 10%, rgba(var(--ok-accent-rgb), 0.13), transparent 28%),
		linear-gradient(135deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 56%, #eef0f2 100%);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-service-strip::before {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 8, 8, 0.035) 1px, transparent 1px),
		linear-gradient(180deg, rgba(8, 8, 8, 0.03) 1px, transparent 1px);
	background-size: 72px 72px;
	content: "";
	opacity: 0.42;
	pointer-events: none;
}

.ok-service-strip .ok-section-head,
.ok-service-strip .ok-services {
	position: relative;
	z-index: 1;
	width: min(1180px, 100%);
	margin-right: auto;
	margin-left: auto;
}

.ok-service-strip .ok-section-head {
	gap: 10px;
	max-width: none;
	margin-bottom: 30px;
}

.ok-service-strip .ok-service-heading {
	justify-items: center;
	text-align: center;
}

.ok-service-strip .ok-section-head h2 {
	color: var(--ok-accent-bright, #ff8a00);
	font-size: clamp(22px, 2.3vw, 34px);
	text-transform: uppercase;
	text-shadow: 0 18px 42px rgba(var(--ok-accent-rgb), 0.24);
}

.ok-service-strip .ok-section-head p {
	max-width: 560px;
	color: var(--ok-muted);
	font-size: 16px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
}

.ok-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	padding: 1px;
	background: rgba(8, 8, 8, 0.1);
}

.ok-services-large {
	grid-template-columns: 1fr;
}

.ok-service {
	display: grid;
	grid-template-columns: 72px minmax(160px, 0.42fr) minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	min-height: 170px;
	padding: 24px;
	background: rgba(255, 255, 255, 0.88);
	transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.ok-service:hover {
	z-index: 1;
	background: var(--ok-white);
	box-shadow: inset 4px 0 0 var(--ok-orange), 0 18px 44px rgba(8, 8, 8, 0.08);
	transform: translateX(6px);
}

.ok-service strong {
	color: rgba(var(--ok-accent-rgb), 0.9);
	font-family: var(--ok-font-display);
	font-size: 18px;
	font-weight: 900;
}

.ok-service img {
	width: 100%;
	height: 122px;
	object-fit: cover;
	border-radius: var(--ok-radius);
	filter: saturate(1.05) contrast(1.04);
}

.ok-service span {
	display: block;
	padding: 0 0 10px;
	color: var(--ok-text);
	font-size: clamp(20px, 2.2vw, 30px);
	font-weight: 900;
	line-height: 1.06;
}

.ok-service p {
	max-width: 520px;
	padding: 0;
	margin: 0;
	color: var(--ok-muted);
	font-size: 16px;
}

.ok-service em {
	display: inline-flex;
	margin-top: 14px;
	color: var(--ok-orange-dark);
	font-size: 12px;
	font-style: normal;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ok-content-panel {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
	gap: 54px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	color: var(--ok-text);
	background:
		radial-gradient(circle at 8% 8%, rgba(var(--ok-accent-rgb), 0.1), transparent 28%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 100%);
	border-top: 1px solid rgba(8, 8, 8, 0.08);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-content-panel > * {
	width: min(1180px, 100%);
}

.ok-content-panel h2 {
	max-width: 620px;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-content-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: rgba(8, 8, 8, 0.1);
}

.ok-content-columns p {
	margin: 0;
	padding: 28px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.72;
}

.ok-about-intro {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	color: var(--ok-text);
	background:
		radial-gradient(circle at 10% 0%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f6f7f8) 100%);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-about-intro h2,
.ok-about-standard h2,
.ok-about-cta h2 {
	max-width: 720px;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-about-proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	color: var(--ok-text);
	background: rgba(8, 8, 8, 0.1);
}

.ok-about-proof div {
	min-height: 260px;
	padding: 30px;
	background: #ffffff;
}

.ok-about-proof span,
.ok-about-points span::before {
	color: var(--ok-orange);
	font-weight: 900;
}

.ok-about-proof span {
	display: block;
	margin-bottom: 42px;
	font-size: 12px;
	letter-spacing: 0.1em;
}

.ok-about-proof strong {
	display: block;
	color: var(--ok-text);
	font-size: clamp(19px, 1.7vw, 25px);
	line-height: 1.12;
}

.ok-about-proof p,
.ok-about-standard p,
.ok-about-cta p {
	margin: 14px 0 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-about-standard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: 58px;
	align-items: center;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background: #ffffff;
}

.ok-about-standard img {
	width: 100%;
	min-height: 520px;
	object-fit: cover;
	border-radius: 0;
	filter: saturate(1.04) contrast(1.04);
}

.ok-about-points {
	display: grid;
	gap: 12px;
	margin-top: 26px;
}

.ok-about-points span {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 15px 0;
	border-bottom: 1px solid rgba(8, 8, 8, 0.1);
	color: var(--ok-text);
	font-size: 14px;
	font-weight: 900;
}

.ok-about-points span::before {
	content: "✓";
}

.ok-about-cta {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
	gap: 54px;
	align-items: center;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 92% 10%, rgba(var(--ok-accent-rgb), 0.16), transparent 28%),
		linear-gradient(135deg, #ffffff 0%, var(--ok-surface-soft, #f6f7f8) 100%);
	border-top: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-about-cta .ok-button {
	margin-top: 24px;
}

.ok-service-detail-intro {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: 58px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 10% 0%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 100%);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-service-detail-intro h2,
.ok-service-scope h2,
.ok-service-related h2 {
	max-width: 720px;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-service-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background: rgba(8, 8, 8, 0.1);
}

.ok-service-benefits div {
	min-height: 255px;
	padding: 32px;
	background: #ffffff;
}

.ok-service-benefits span,
.ok-service-scope li::before {
	color: var(--ok-orange);
	font-weight: 900;
}

.ok-service-benefits span {
	display: block;
	margin-bottom: 34px;
	font-size: 12px;
	letter-spacing: 0.1em;
}

.ok-service-benefits strong {
	display: block;
	color: var(--ok-text);
	font-size: clamp(19px, 1.7vw, 25px);
	line-height: 1.12;
}

.ok-service-benefits p,
.ok-service-scope p,
.ok-service-scope li,
.ok-service-related p {
	margin: 14px 0 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-service-scope {
	display: grid;
	grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 92% 10%, rgba(var(--ok-accent-rgb), 0.12), transparent 28%),
		linear-gradient(135deg, #ffffff 0%, var(--ok-surface-soft, #f6f7f8) 100%);
}

.ok-service-scope ul {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 1px;
	background: rgba(8, 8, 8, 0.1);
	list-style: none;
}

.ok-service-scope li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 20px;
	background: #ffffff;
}

.ok-service-scope li::before {
	content: "✓";
}

.ok-ppf-pricing {
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 8% 0%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 100%);
	border-top: 1px solid rgba(8, 8, 8, 0.08);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-ppf-pricing-head {
	display: grid;
	gap: 12px;
	max-width: 760px;
	margin-bottom: 32px;
}

.ok-ppf-pricing-head h2 {
	margin: 0;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-ppf-pricing-head p:not(.ok-eyebrow),
.ok-ppf-pricing-note {
	margin: 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-ppf-pricing-table {
	overflow: hidden;
	border: 1px solid rgba(8, 8, 8, 0.1);
	border-radius: var(--ok-radius);
	background: #ffffff;
	box-shadow: 0 20px 54px rgba(8, 8, 8, 0.06);
}

.ok-ppf-pricing-row {
	display: grid;
	grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.25fr) minmax(170px, 0.9fr) minmax(190px, 1fr);
	gap: 1px;
	background: rgba(8, 8, 8, 0.08);
}

.ok-ppf-pricing-row + .ok-ppf-pricing-row {
	border-top: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-ppf-pricing-row > * {
	display: flex;
	align-items: center;
	min-height: 78px;
	padding: 18px;
	background: #ffffff;
	color: var(--ok-muted);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.55;
}

.ok-ppf-pricing-row strong {
	color: var(--ok-text);
	font-size: 16px;
	font-weight: 900;
}

.ok-ppf-pricing-row em {
	color: var(--ok-orange-dark);
	font-style: normal;
	font-weight: 900;
}

.ok-ppf-pricing-row-head > * {
	min-height: 48px;
	background: var(--ok-black);
	color: var(--ok-white);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-ppf-pricing-note {
	margin-top: 18px;
	padding-left: 18px;
	border-left: 3px solid var(--ok-orange);
}

.ok-ppf-models {
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 88% 0%, rgba(var(--ok-accent-rgb), 0.13), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 100%);
	border-top: 1px solid rgba(8, 8, 8, 0.08);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-ppf-models-head {
	display: grid;
	gap: 12px;
	max-width: 780px;
	margin-bottom: 34px;
}

.ok-ppf-models-head h2,
.ok-ppf-model-focus h2 {
	margin: 0;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-ppf-models-head p:not(.ok-eyebrow),
.ok-ppf-model-focus p {
	margin: 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-ppf-model-groups {
	display: grid;
	gap: 10px;
}

.ok-ppf-model-groups details {
	overflow: hidden;
	border: 1px solid rgba(8, 8, 8, 0.1);
	border-radius: var(--ok-radius);
	background: rgba(255, 255, 255, 0.84);
	box-shadow: 0 16px 44px rgba(8, 8, 8, 0.04);
}

.ok-ppf-model-groups summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	color: var(--ok-text);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	list-style: none;
}

.ok-ppf-model-groups summary::-webkit-details-marker {
	display: none;
}

.ok-ppf-model-groups summary::after {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ok-orange);
	border-bottom: 2px solid var(--ok-orange);
	content: "";
	transform: rotate(45deg);
	transition: transform 180ms ease;
}

.ok-ppf-model-groups details[open] summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.ok-ppf-model-groups summary small {
	margin-left: auto;
	color: var(--ok-orange-dark);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
}

.ok-ppf-model-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	padding: 1px;
	background: rgba(8, 8, 8, 0.1);
}

.ok-ppf-model-grid a {
	display: grid;
	gap: 12px;
	min-height: 190px;
	padding: 22px;
	background: #ffffff;
	transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.ok-ppf-model-grid a:hover,
.ok-ppf-model-grid a:focus-visible,
.ok-ppf-model-grid a[aria-current="page"] {
	z-index: 1;
	background: var(--ok-accent-soft, #fffaf5);
	box-shadow: inset 0 4px 0 var(--ok-orange), 0 18px 42px rgba(8, 8, 8, 0.08);
	transform: translateY(-2px);
}

.ok-ppf-model-grid strong {
	color: var(--ok-text);
	font-size: 18px;
	line-height: 1.12;
}

.ok-ppf-model-grid p {
	margin: 0;
	color: var(--ok-muted);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.62;
}

.ok-ppf-model-grid span {
	align-self: end;
	color: var(--ok-orange-dark);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-ppf-model-focus {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background: #ffffff;
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-ppf-model-focus-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(8, 8, 8, 0.1);
}

.ok-ppf-model-focus-grid div {
	min-height: 230px;
	padding: 24px;
	background: #ffffff;
}

.ok-ppf-model-focus-grid span {
	display: block;
	margin-bottom: 28px;
	color: var(--ok-orange);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.ok-ppf-model-focus-grid strong {
	display: block;
	color: var(--ok-text);
	font-size: 19px;
	line-height: 1.14;
}

.ok-ppf-model-focus-grid p {
	margin-top: 14px;
}

.ok-branch-intro {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: 58px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 8% 0%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 100%);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-branch-intro h2,
.ok-branch-services h2,
.ok-branch-proof h2 {
	max-width: 720px;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-branch-services {
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 92% 8%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(135deg, #ffffff 0%, var(--ok-surface-soft, #f6f7f8) 100%);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-branch-service-grid,
.ok-branch-proof {
	display: grid;
	gap: 1px;
	width: 100%;
	background: rgba(8, 8, 8, 0.1);
}

.ok-branch-service-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ok-branch-proof {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
}

.ok-branch-service-grid div,
.ok-branch-proof div {
	min-height: 245px;
	padding: 28px;
	background: #ffffff;
}

.ok-branch-service-grid span {
	display: block;
	margin-bottom: 34px;
	color: var(--ok-orange);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.ok-branch-service-grid strong {
	display: block;
	color: var(--ok-text);
	font-size: 19px;
	line-height: 1.14;
}

.ok-branch-service-grid p,
.ok-branch-proof p {
	margin: 14px 0 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-service-related {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background: #ffffff;
	border-top: 1px solid rgba(8, 8, 8, 0.08);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-service-related-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ok-service-related-grid a {
	position: relative;
	display: grid;
	min-height: 210px;
	overflow: hidden;
	align-items: end;
	padding: 18px;
	color: var(--ok-white);
	text-decoration: none;
	background: #080808;
}

.ok-service-related-grid a::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 8, 8, 0.08), rgba(8, 8, 8, 0.82));
	content: "";
}

.ok-service-related-grid img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease;
}

.ok-service-related-grid a:hover img {
	transform: scale(1.05);
}

.ok-service-related-grid span {
	position: relative;
	z-index: 1;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.1;
}

.ok-proof-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background: rgba(8, 8, 8, 0.1);
	color: var(--ok-text);
}

.ok-proof-grid div {
	padding: 34px;
	background: #ffffff;
}

.ok-proof-grid span,
.ok-case-list span,
.ok-package-grid span {
	display: block;
	margin-bottom: 10px;
	color: var(--ok-orange);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-proof-grid strong {
	display: block;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.08;
}

.ok-proof-grid p,
.ok-case-list p,
.ok-package-grid p,
.ok-faq-list p {
	margin: 12px 0 0;
	color: var(--ok-muted);
}

.ok-use-cases,
.ok-package-band,
.ok-faq-preview {
	width: 100%;
	scroll-margin-top: 154px;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	color: var(--ok-text);
	background: #ffffff;
}

.ok-use-cases .ok-section-head,
.ok-use-cases .ok-case-list,
.ok-package-band > *,
.ok-faq-preview > * {
	width: min(1180px, 100%);
	margin-right: auto;
	margin-left: auto;
}

.ok-use-cases .ok-section-head {
	justify-items: start;
	max-width: none;
	text-align: left;
}

.ok-use-cases .ok-section-head h2,
.ok-package-band h2,
.ok-faq-preview h2 {
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-use-cases .ok-section-head h2 {
	max-width: 760px;
}

.ok-use-cases .ok-eyebrow,
.ok-package-band .ok-eyebrow,
.ok-faq-preview .ok-eyebrow {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #383838;
	font-size: 13px;
	letter-spacing: 0.2em;
}

.ok-case-list {
	display: grid;
	gap: 1px;
	background: rgba(8, 8, 8, 0.1);
}

.ok-case-list div {
	display: grid;
	grid-template-columns: minmax(150px, 0.35fr) minmax(220px, 0.55fr) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 26px 0;
	background: #ffffff;
}

.ok-case-list strong {
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 30px);
	line-height: 1.05;
}

.ok-case-list p {
	margin: 0;
}

.ok-package-band {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
	gap: 54px;
	align-items: start;
	background:
		radial-gradient(circle at 86% 0%, rgba(var(--ok-accent-rgb), 0.12), transparent 26%),
		linear-gradient(135deg, var(--ok-surface-soft, #f7f8f9), #ffffff);
}

.ok-package-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(8, 8, 8, 0.1);
}

.ok-package-grid div {
	padding: 28px;
	background: rgba(255, 255, 255, 0.9);
}

.ok-package-grid h3 {
	margin: 0;
	color: var(--ok-text);
	font-size: 24px;
	line-height: 1.1;
}

.ok-faq-preview {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: 54px;
	align-items: start;
}

.ok-faq-list {
	display: grid;
	gap: 12px;
}

.ok-faq-list details {
	padding: 20px 0;
	border-bottom: 1px solid rgba(8, 8, 8, 0.12);
}

.ok-faq-list summary {
	cursor: pointer;
	color: var(--ok-text);
	font-weight: 900;
	list-style: none;
}

.ok-faq-list summary::-webkit-details-marker {
	display: none;
}

.ok-faq-list summary::after {
	float: right;
	color: var(--ok-orange);
	content: "+";
}

.ok-faq-list details[open] summary::after {
	content: "−";
}

.ok-process {
	color: var(--ok-text);
	background: var(--ok-surface-soft, #f6f7f8);
	width: 100%;
	padding-inline: max(24px, calc((100vw - 1180px) / 2));
}

.ok-process .ok-section-head,
.ok-process .ok-steps {
	width: min(1180px, 100%);
	margin-right: auto;
	margin-left: auto;
}

.ok-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(8, 8, 8, 0.1);
}

.ok-steps div,
.ok-values div {
	padding: 34px;
	background: #ffffff;
}

.ok-steps span,
.ok-values span {
	color: var(--ok-orange);
	font-weight: 900;
}

.ok-steps h3,
.ok-values h2,
.ok-reference h2 {
	margin: 18px 0 10px;
	font-size: 24px;
	line-height: 1.16;
}

.ok-steps p,
.ok-values p,
.ok-reference p {
	margin: 0;
	color: var(--ok-muted);
}

.ok-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 54px;
	align-items: center;
}

.ok-showcase img {
	width: 100%;
	min-height: 540px;
	object-fit: cover;
}

.ok-text-link {
	display: inline-flex;
	margin-top: 28px;
	color: var(--ok-orange-dark);
	font-weight: 900;
}

.ok-trust-messages {
	width: 100%;
	overflow: hidden;
	color: var(--ok-text);
	background:
		radial-gradient(circle at 18% 12%, rgba(var(--ok-accent-rgb), 0.13), transparent 28%),
		linear-gradient(135deg, #ffffff 0%, var(--ok-surface-soft, #f5f6f7) 60%, var(--ok-accent-soft, #fff7ef) 100%);
	border-top: 1px solid rgba(8, 8, 8, 0.08);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-trust-head {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto 32px;
}

.ok-trust-head h2 {
	max-width: 720px;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-trust-head p:not(.ok-eyebrow) {
	max-width: 620px;
	margin: 14px 0 0;
	color: var(--ok-muted);
}

.ok-trust-marquee {
	width: 100%;
	overflow: hidden;
}

.ok-trust-track {
	display: flex;
	width: max-content;
	animation: okTrustMarquee 56s linear infinite;
	will-change: transform;
}

.ok-trust-group {
	display: flex;
	flex: 0 0 auto;
	gap: 14px;
	min-width: 100vw;
	padding-right: 14px;
}

.ok-trust-group article {
	position: relative;
	width: 360px;
	min-height: 214px;
	padding: 26px;
	border: 1px solid rgba(8, 8, 8, 0.1);
	border-radius: var(--ok-radius);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 14px 36px rgba(8, 8, 8, 0.06);
}

.ok-trust-group article::before {
	position: absolute;
	top: 18px;
	right: 22px;
	color: rgba(var(--ok-accent-rgb), 0.14);
	font-size: 54px;
	font-weight: 900;
	line-height: 1;
	content: "”";
}

.ok-trust-group span {
	display: inline-flex;
	margin-bottom: 16px;
	color: var(--ok-orange);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.ok-trust-group strong {
	display: block;
	margin-top: 18px;
	color: var(--ok-text);
	font-size: 16px;
	line-height: 1.18;
}

.ok-trust-group p {
	margin: 0;
	color: var(--ok-muted);
	font-size: 14px;
	line-height: 1.58;
}

.ok-trust-group small {
	display: block;
	margin-top: 4px;
	color: var(--ok-orange-dark);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ok-instagram-feed {
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 8% 0%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f6f7f8) 100%);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-instagram-head,
.ok-instagram-grid {
	width: min(1180px, 100%);
	margin-right: auto;
	margin-left: auto;
}

.ok-instagram-head {
	display: grid;
	grid-template-columns: minmax(340px, 0.9fr) minmax(340px, 1fr) auto;
	gap: 26px;
	align-items: center;
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-instagram-profile {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

.ok-instagram-profile img {
	width: 78px;
	height: 78px;
	object-fit: contain;
	padding: 9px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 14px 36px rgba(8, 8, 8, 0.12);
}

.ok-instagram-profile span {
	display: block;
	color: var(--ok-text);
	font-size: clamp(18px, 1.45vw, 23px);
	font-weight: 900;
	line-height: 1.08;
}

.ok-instagram-profile p {
	max-width: 480px;
	margin: 7px 0 0;
	color: var(--ok-orange-dark);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.45;
}

.ok-instagram-head h2 {
	max-width: 560px;
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-instagram-head p:not(.ok-eyebrow) {
	max-width: 560px;
	margin: 12px 0 0;
	color: var(--ok-muted);
}

.ok-instagram-head > .ok-text-link {
	align-self: center;
	white-space: nowrap;
}

.ok-instagram-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	padding: 10px;
	border: 1px solid rgba(8, 8, 8, 0.08);
	border-radius: var(--ok-radius);
	background: #ffffff;
	box-shadow: 0 18px 48px rgba(8, 8, 8, 0.06);
}

.ok-instagram-post {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 4px;
	background: var(--ok-surface-soft, #f6f7f8);
	transition: transform 220ms ease, filter 220ms ease;
}

.ok-instagram-post::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 8, 8, 0.04), rgba(8, 8, 8, 0.74)),
		linear-gradient(90deg, rgba(var(--ok-accent-rgb), 0.22), transparent 34%);
	content: "";
	opacity: 0.82;
	transition: opacity 220ms ease;
}

.ok-instagram-post:hover {
	filter: saturate(1.08) contrast(1.04);
	transform: translateY(-2px);
}

.ok-instagram-post:hover::after {
	opacity: 0.68;
}

.ok-instagram-post img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms ease;
}

.ok-instagram-post:hover img {
	transform: scale(1.05);
}

.ok-instagram-post span {
	position: absolute;
	z-index: 1;
	right: 18px;
	bottom: 16px;
	left: 18px;
	color: var(--ok-white);
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-instagram-post span::before {
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 10px;
	background: var(--ok-orange);
	content: "";
}

.ok-instagram-video::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	clip-path: polygon(34% 25%, 34% 75%, 76% 50%);
	content: "";
	transform: translate(-50%, -50%);
}

.ok-blog-preview {
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	color: var(--ok-text);
	background:
		radial-gradient(circle at 8% 8%, rgba(var(--ok-accent-rgb), 0.1), transparent 28%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f6f7f8) 100%);
	border-top: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-blog-head,
.ok-blog-grid {
	width: min(1180px, 100%);
	margin-right: auto;
	margin-left: auto;
}

.ok-blog-head {
	display: flex;
	gap: 28px;
	align-items: end;
	justify-content: space-between;
	margin-bottom: 30px;
}

.ok-blog-head h2 {
	max-width: 620px;
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-blog-head p:not(.ok-eyebrow) {
	max-width: 640px;
	margin: 12px 0 0;
	color: var(--ok-muted);
}

.ok-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.ok-blog-card {
	overflow: hidden;
	border: 1px solid rgba(8, 8, 8, 0.1);
	border-radius: var(--ok-radius);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 16px 42px rgba(8, 8, 8, 0.06);
	transition: box-shadow 220ms ease, transform 220ms ease;
}

.ok-blog-card:hover {
	box-shadow: 0 22px 54px rgba(8, 8, 8, 0.12);
	transform: translateY(-4px);
}

.ok-blog-card a {
	display: grid;
	min-height: 100%;
	color: inherit;
}

.ok-blog-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: saturate(1.04) contrast(1.03);
}

.ok-blog-card div {
	display: grid;
	align-content: start;
	padding: 22px;
}

.ok-blog-card span {
	margin-bottom: 12px;
	color: var(--ok-orange-dark);
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-blog-card h3 {
	margin: 0;
	color: var(--ok-text);
	font-size: 20px;
	line-height: 1.14;
}

.ok-blog-card p {
	margin: 12px 0 0;
	color: var(--ok-muted);
	font-size: 14px;
	line-height: 1.55;
}

.ok-blog-card strong {
	margin-top: 18px;
	color: var(--ok-orange-dark);
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ok-final-cta {
	display: grid;
	justify-items: start;
	gap: 22px;
	color: var(--ok-text);
	background:
		radial-gradient(circle at 90% 10%, rgba(var(--ok-accent-rgb), 0.16), transparent 28%),
		linear-gradient(135deg, #ffffff 0%, var(--ok-surface-soft, #f5f6f7) 100%);
	width: 100%;
	padding-inline: max(24px, calc((100vw - 1180px) / 2));
	border-top: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-final-cta h2 {
	max-width: 820px;
}

.ok-final-cta p:not(.ok-eyebrow) {
	max-width: 760px;
	margin: 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 520ms ease, transform 520ms ease;
}

.ok-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes okTrustMarquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes okLivePulse {
	0%,
	100% {
		box-shadow: 0 0 0 5px rgba(var(--ok-accent-rgb), 0.12);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(var(--ok-accent-rgb), 0.06);
	}
}

.ok-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--ok-soft-line);
}

.ok-values div {
	background: var(--ok-white);
	color: var(--ok-text);
}

.ok-reference-showcase {
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 92% 5%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 100%);
}

.ok-reference-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.ok-reference {
	border: 1px solid var(--ok-soft-line);
	border-radius: var(--ok-radius);
	overflow: hidden;
	background: var(--ok-white);
	box-shadow: 0 18px 50px rgba(8, 8, 8, 0.06);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.ok-reference:hover {
	box-shadow: 0 26px 64px rgba(8, 8, 8, 0.1);
	transform: translateY(-4px);
}

.ok-reference img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
}

.ok-reference span {
	display: inline-flex;
	margin: 20px 22px 0;
	color: var(--ok-orange-dark);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-reference h2,
.ok-reference p {
	padding-right: 22px;
	padding-left: 22px;
}

.ok-reference h2 {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.12;
}

.ok-reference p {
	padding-bottom: 24px;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.65;
}

.ok-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: 60px;
	align-items: start;
	width: 100%;
	padding-right: max(20px, calc((100vw - 1180px) / 2));
	padding-left: max(20px, calc((100vw - 1180px) / 2));
	background:
		radial-gradient(circle at 92% 0%, rgba(var(--ok-accent-rgb), 0.12), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, var(--ok-surface-soft, #f7f8f9) 100%);
	border-bottom: 1px solid rgba(8, 8, 8, 0.08);
}

.ok-contact-info h2,
.ok-contact-form-head h2 {
	margin: 0;
	color: var(--ok-text);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.14;
}

.ok-contact-info > p:not(.ok-eyebrow),
.ok-contact-form-head p {
	margin: 14px 0 0;
	color: var(--ok-muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.ok-contact-info-list {
	display: grid;
	gap: 1px;
	margin-top: 30px;
	border: 1px solid rgba(8, 8, 8, 0.1);
	border-radius: var(--ok-radius);
	overflow: hidden;
	background: rgba(8, 8, 8, 0.08);
}

.ok-contact-info-list a,
.ok-contact-info-list div {
	display: grid;
	gap: 8px;
	padding: 20px;
	background: #ffffff;
	transition: background 180ms ease, box-shadow 180ms ease;
}

.ok-contact-info-list a:hover {
	background: var(--ok-accent-soft, #fffaf5);
	box-shadow: inset 4px 0 0 var(--ok-orange);
}

.ok-contact-info-list span {
	color: var(--ok-orange-dark);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-contact-info-list strong {
	color: var(--ok-text);
	font-size: 17px;
	line-height: 1.25;
}

.ok-contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.ok-contact-form {
	display: grid;
	gap: 18px;
	padding: 28px;
	border: 1px solid rgba(8, 8, 8, 0.1);
	border-radius: var(--ok-radius);
	background: #ffffff;
	box-shadow: 0 22px 60px rgba(8, 8, 8, 0.08);
}

.ok-contact-form-head {
	display: grid;
	gap: 10px;
	padding-bottom: 8px;
}

.ok-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ok-contact-form label {
	display: grid;
	gap: 8px;
	color: var(--ok-muted);
	font-weight: 700;
}

.ok-contact-form input,
.ok-contact-form select,
.ok-contact-form textarea {
	width: 100%;
	border: 1px solid var(--ok-soft-line);
	border-radius: var(--ok-radius);
	padding: 15px 16px;
	background: #ffffff;
	color: var(--ok-text);
	font: inherit;
}

.ok-contact-form input:focus,
.ok-contact-form select:focus,
.ok-contact-form textarea:focus {
	border-color: rgba(var(--ok-accent-rgb), 0.72);
	box-shadow: 0 0 0 4px rgba(var(--ok-accent-rgb), 0.1);
	outline: none;
}

.ok-entry {
	max-width: 880px;
	padding-top: 150px;
}

.ok-mobile-branches { display: none; }
.ok-article { margin: 0 auto; padding-top: 40px; }
.ok-article-content { line-height: 1.8; overflow-wrap: anywhere; }
.ok-article-content h2 { margin: 36px 0 14px; font-size: clamp(21px, 2.2vw, 28px); }
.ok-article-content h3 { margin: 28px 0 12px; font-size: 20px; }
.ok-article-content img, .ok-article-image img { max-width: 100%; height: auto; }
.ok-article-image { margin-bottom: 30px; }
.ok-article-content table { display: block; max-width: 100%; overflow-x: auto; }
.ok-article-content th, .ok-article-content td { padding: 10px; border-bottom: 1px solid var(--ok-soft-line); }
.ok-article-content a { color: var(--ok-accent); text-decoration: underline; }
.ok-blog-card h2 { margin: 10px 0; font-size: 20px; line-height: 1.4; }
.ok-blog-pagination { margin: 36px auto 0; text-align: center; }
.ok-blog-pagination .page-numbers { display: inline-block; padding: 10px 14px; }
.ok-blog-pagination .current { background: var(--ok-accent); color: white; }
@media (max-width: 980px) {
	.ok-mobile-branches:not([hidden]) { display: grid; gap: 10px; padding: 14px; border-top: 1px solid var(--ok-soft-line); }
	.ok-mobile-branches a { padding: 8px; color: var(--ok-text); font-size: 15px; }
}

.ok-footer {
	position: relative;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.74);
	background:
		radial-gradient(circle at 78% 0%, rgba(var(--ok-accent-rgb), 0.2), transparent 28%),
		linear-gradient(135deg, #050505 0%, #101010 52%, #1e1a16 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ok-footer::before {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 84px 84px;
	content: "";
	opacity: 0.42;
	pointer-events: none;
}

.ok-footer-shell {
	position: relative;
	z-index: 1;
	width: var(--ok-container);
	margin: 0 auto;
	padding: 72px 0 0;
}

.ok-footer-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 36px;
	align-items: center;
	padding: 34px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--ok-radius);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
		radial-gradient(circle at 88% 50%, rgba(var(--ok-accent-rgb), 0.24), transparent 34%);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22);
}

.ok-footer-cta .ok-eyebrow {
	margin-bottom: 12px;
	color: var(--ok-orange);
}

.ok-footer-cta h2 {
	max-width: 620px;
	margin: 0;
	color: var(--ok-white);
	font-size: clamp(22px, 2.3vw, 34px);
	line-height: 1.08;
}

.ok-footer-cta-actions {
	display: grid;
	grid-template-rows: repeat(2, 52px);
	gap: 8px;
	width: min(100%, 340px);
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 32px;
	background: rgba(8, 8, 8, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(0, 0, 0, 0.18);
}

.ok-footer-phone {
	display: inline-flex;
	width: 100%;
	height: 52px;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border: 1px solid rgba(var(--ok-accent-rgb), 0.52);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.035);
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--ok-font-display);
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.ok-footer-main {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr));
	gap: 46px;
	padding: 58px 0 46px;
}

.ok-footer-logo {
	width: 280px;
	margin-bottom: 22px;
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--ok-white);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.ok-footer-brand p {
	max-width: 390px;
	margin: 0;
	font-size: 18px;
}

.ok-footer-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.ok-footer-badges span {
	padding: 8px 11px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.ok-footer-main h2 {
	margin: 0 0 20px;
	color: var(--ok-white);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-footer a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 700;
}

.ok-footer a:hover {
	color: var(--ok-orange);
}

.ok-footer .ok-footer-cta-actions .ok-button {
	display: inline-flex;
	width: 100%;
	height: 52px;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	color: var(--ok-white);
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.04em;
	box-shadow: 0 12px 30px rgba(var(--ok-accent-rgb), 0.22);
}

.ok-footer .ok-footer-phone {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.92);
}

.ok-footer .ok-footer-phone:hover {
	border-color: rgba(var(--ok-accent-rgb), 0.82);
	background: rgba(var(--ok-accent-rgb), 0.12);
	color: var(--ok-white);
	transform: translateY(-2px);
}

.ok-footer-links a {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ok-footer-links a::after {
	color: rgba(var(--ok-accent-rgb), 0.78);
	content: "→";
	transform: translateX(-4px);
	transition: transform 180ms ease;
}

.ok-footer-links a:hover::after {
	transform: translateX(0);
}

.ok-footer-contact {
	margin: 0;
	font-style: normal;
}

.ok-footer-contact a {
	display: grid;
	justify-content: start;
	min-height: 52px;
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ok-footer-contact a span {
	color: rgba(255, 255, 255, 0.43);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ok-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
}

.ok-footer-social {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
}

.ok-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.76);
	background: rgba(255, 255, 255, 0.055);
	transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.ok-footer-social a:hover,
.ok-footer-social a:focus {
	color: var(--ok-white);
	border-color: rgba(var(--ok-accent-rgb), 0.72);
	background: rgba(var(--ok-accent-rgb), 0.18);
	transform: translateY(-2px);
}

.ok-footer-social svg,
.ok-mobile-social svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ok-footer-social a[aria-label="Facebook"] svg,
.ok-mobile-social a[aria-label="Facebook"] svg,
.ok-footer-social a[aria-label="Pinterest"] svg,
.ok-footer-social a[aria-label="LinkedIn"] svg {
	fill: currentColor;
	stroke: none;
}

@keyframes okRise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes okMarquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 980px) {
	.ok-header-inner {
		grid-template-columns: auto auto;
		justify-content: space-between;
		min-height: 88px;
	}

	.ok-menu-toggle {
		display: block;
	}

	.ok-nav,
	.ok-header-actions {
		display: none;
	}

	.ok-header.is-open .ok-nav {
		position: absolute;
		top: 106px;
		left: 16px;
		right: 16px;
		display: block;
		padding: 22px;
		border: 1px solid rgba(20, 20, 20, 0.08);
		border-radius: var(--ok-radius);
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 24px 64px rgba(8, 8, 8, 0.16);
	}

	.ok-header.is-open .ok-nav-list {
		display: grid;
		gap: 18px;
		justify-content: stretch;
		font-size: 15px;
	}

	.ok-nav a {
		justify-content: space-between;
		min-height: 30px;
	}

	.ok-mega-menu {
		display: none;
	}

	.ok-header.is-open .ok-mega-menu {
		display: none;
	}

	.ok-mega-menu-inner {
		grid-template-columns: 1fr;
	}

	.ok-mega-intro {
		padding: 22px;
	}

	.ok-mega-intro span {
		font-size: 24px;
	}

	.ok-mega-intro p {
		max-width: none;
		margin-bottom: 16px;
		font-size: 14px;
	}

	.ok-mega-services {
		grid-template-columns: 1fr;
	}

	.ok-mega-service {
		grid-template-columns: 92px 1fr;
		gap: 14px;
		min-height: 0;
		padding: 14px;
	}

	.ok-mega-service img {
		height: 72px;
		margin: 0;
	}

	.ok-mega-service span,
	.ok-mega-service small {
		grid-column: 2;
	}

	.ok-mega-service span {
		align-self: end;
		font-size: 18px;
	}

	.ok-mega-service small {
		align-self: start;
		margin-top: 4px;
	}

	.ok-hero-proof {
		position: relative;
		left: auto;
		width: 100%;
		margin-top: 42px;
		transform: none;
	}

	.ok-hero {
		display: block;
		min-height: auto;
		padding-top: 172px;
		padding-bottom: 56px;
	}

	.ok-breadcrumb {
		padding-top: 144px;
	}

	.ok-hero-content {
		margin: 0 auto;
	}

	.ok-hero-slider .ok-hero-content {
		margin-top: -40px;
	}

	.ok-split,
	.ok-showcase,
	.ok-contact-grid,
	.ok-footer-cta,
	.ok-footer-main,
	.ok-proof-grid,
	.ok-content-panel,
	.ok-about-intro,
	.ok-about-standard,
	.ok-about-cta,
		.ok-service-detail-intro,
		.ok-service-scope,
		.ok-service-related,
		.ok-ppf-pricing,
		.ok-ppf-model-focus,
		.ok-branch-intro,
		.ok-package-band,
		.ok-faq-preview {
		grid-template-columns: 1fr;
	}

	.ok-about-proof,
	.ok-service-benefits,
	.ok-branch-service-grid,
	.ok-branch-proof {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ok-footer-cta-actions {
		min-width: 0;
	}

	.ok-services,
	.ok-services-large,
	.ok-steps,
	.ok-values,
	.ok-content-columns,
	.ok-package-grid,
	.ok-reference-grid,
	.ok-ppf-model-grid {
		grid-template-columns: 1fr;
	}

	.ok-case-list div {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.ok-service-strip .ok-section-head {
		grid-template-columns: 1fr;
	}

	.ok-instagram-head {
		display: grid;
		grid-template-columns: 1fr;
		align-items: start;
	}

	.ok-instagram-grid,
	.ok-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ok-service {
		grid-template-columns: 48px minmax(120px, 0.36fr) minmax(0, 1fr);
		gap: 18px;
	}

	.ok-showcase img {
		min-height: 360px;
	}

	.ok-about-standard img {
		min-height: 360px;
	}

	.ok-footer-bottom {
		display: grid;
	}
}

@media (max-width: 620px) {
	:root {
		--ok-container: min(100vw - 28px, 1180px);
	}

	.ok-brand img,
	.custom-logo {
		width: 230px;
	}

	.ok-topbar {
		font-size: 9px;
		letter-spacing: 0.11em;
	}

	.ok-topbar-track {
		animation-duration: 24s;
	}

	.ok-topbar-group span {
		padding: 0 28px;
	}

	.ok-hero,
	.ok-page-hero {
		padding-right: 16px;
		padding-left: 16px;
	}

	.ok-breadcrumb {
		padding: 140px 16px 0;
	}

	.ok-breadcrumb ol {
		font-size: 10px;
		letter-spacing: 0.04em;
	}

	/* Reserve space for wrapped slider tabs beneath the mobile CTAs. */
	.ok-hero-slider {
		padding-bottom: 140px;
	}

	.ok-hero-slider .ok-hero-content {
		margin-top: -26px;
	}

	.ok-hero h1 {
		font-size: clamp(34px, 10vw, 50px);
	}

	.ok-hero-lead {
		font-size: 15px;
	}

	.ok-hero-tabs {
		right: auto;
		bottom: 28px;
		left: 50%;
		width: calc(100vw - 32px);
		justify-content: center;
	}

	.ok-hero-tabs button {
		min-height: 34px;
		padding-bottom: 8px;
		font-size: 10px;
	}

	.ok-eyebrow {
		font-size: 11px;
	}

	.ok-section .ok-eyebrow {
		gap: 10px;
		font-size: 11px;
		letter-spacing: 0.14em;
	}

	.ok-section .ok-eyebrow::before {
		width: 14px;
		height: 14px;
		flex-basis: 14px;
	}

	.ok-section {
		padding: 66px 0;
	}

	.ok-split {
		padding-right: 20px;
		padding-left: 20px;
	}

	.ok-blog-head {
		display: grid;
		align-items: start;
	}

	.ok-instagram-profile {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.ok-instagram-profile img {
		width: 64px;
		height: 64px;
	}

	.ok-instagram-profile span {
		font-size: 18px;
	}

	.ok-instagram-profile p {
		font-size: 12px;
	}

	.ok-instagram-grid,
	.ok-blog-grid {
		grid-template-columns: 1fr;
	}

	.ok-about-proof {
		grid-template-columns: 1fr;
	}

	.ok-service-benefits,
	.ok-service-related-grid {
		grid-template-columns: 1fr;
	}

	.ok-about-proof div,
	.ok-service-benefits div {
		min-height: auto;
		padding: 24px;
	}

	.ok-about-proof span,
	.ok-service-benefits span {
		margin-bottom: 18px;
	}

	.ok-footer-shell {
		padding-top: 48px;
	}

	.ok-footer-cta {
		padding: 24px 20px;
	}

	.ok-footer-cta-actions .ok-button,
	.ok-footer-phone {
		width: 100%;
	}

	.ok-footer-main {
		gap: 34px;
		padding: 42px 0 34px;
	}

	.ok-footer-logo {
		width: 210px;
	}

	.ok-service-strip {
		padding-right: 20px;
		padding-left: 20px;
	}

	.ok-service-strip .ok-section-head h2 {
		color: var(--ok-accent-bright, #ff9a1f);
		text-shadow: 0 10px 28px rgba(var(--ok-accent-rgb), 0.2);
	}

	.ok-service-strip .ok-section-head p {
		color: var(--ok-muted);
	}

	.ok-proof-grid,
	.ok-use-cases,
	.ok-package-band,
	.ok-faq-preview,
	.ok-about-intro,
	.ok-about-proof,
	.ok-about-standard,
	.ok-about-cta,
	.ok-service-detail-intro,
		.ok-service-benefits,
		.ok-service-scope,
		.ok-service-related,
		.ok-ppf-pricing,
		.ok-ppf-models,
		.ok-ppf-model-focus,
		.ok-branch-intro,
		.ok-branch-services,
		.ok-branch-proof,
		.ok-reference-showcase,
		.ok-trust-messages,
		.ok-instagram-feed {
		padding-right: 20px;
		padding-left: 20px;
	}

	.ok-ppf-model-groups summary {
		padding: 16px;
		font-size: 13px;
		letter-spacing: 0.06em;
	}

	.ok-ppf-model-grid,
	.ok-ppf-model-focus-grid,
	.ok-branch-service-grid,
	.ok-branch-proof,
	.ok-form-grid {
		grid-template-columns: 1fr;
	}

	.ok-ppf-pricing-row {
		grid-template-columns: 1fr;
	}

	.ok-ppf-pricing-row-head {
		display: none;
	}

	.ok-ppf-pricing-row > * {
		min-height: 0;
		padding: 16px;
	}

	.ok-ppf-model-grid a,
	.ok-ppf-model-focus-grid div,
	.ok-branch-service-grid div,
	.ok-branch-proof div {
		min-height: auto;
		padding: 20px;
	}

	.ok-instagram-grid {
		grid-template-columns: 1fr;
	}

	.ok-service {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 20px;
	}

	.ok-service img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.ok-actions,
	.ok-contact-actions {
		display: grid;
	}

	.ok-button {
		width: 100%;
		min-height: 54px;
	}
}

/* One mobile gutter for all page sections and Elementor widgets. */
@media (max-width: 767px) {
	:root {
		--ok-mobile-gutter: 20px;
	}

	.ok-main .ok-section {
		width: 100%;
		max-width: 100%;
		padding-inline: var(--ok-mobile-gutter);
	}

	.ok-main .ok-section > * {
		min-width: 0;
	}

	.ok-main .ok-trust-head {
		width: 100%;
	}

	.ok-main .ok-trust-group article {
		width: min(360px, calc(100vw - 2 * var(--ok-mobile-gutter)));
	}

	.ok-hero,
	.ok-page-hero,
	.ok-breadcrumb {
		padding-inline: var(--ok-mobile-gutter);
	}

	.ok-hero-tabs {
		width: calc(100% - 2 * var(--ok-mobile-gutter));
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
	}

	.ok-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Account-specific Instagram feed layout. */
.ok-instagram-live .ok-instagram-grid { grid-template-columns: repeat(var(--ig-columns, 4), minmax(0, 1fr)); }
.ok-instagram-live .ok-instagram-head { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) auto; }
.ok-instagram-live .ok-instagram-avatar { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #202225; color: #fff; font-size: 23px; }
.ok-instagram-status { max-width: 1180px; margin: 0 auto; padding: 16px; border-left: 3px solid var(--ok-orange); background: #fff; font-size: 14px; }
@media (max-width: 980px) {
 .ok-instagram-live .ok-instagram-head { grid-template-columns: 1fr; }
 .ok-instagram-live .ok-instagram-grid { grid-template-columns: repeat(var(--ig-tablet, 3), minmax(0, 1fr)); }
}
@media (max-width: 620px) {
 .ok-instagram-live .ok-instagram-grid { grid-template-columns: repeat(var(--ig-mobile, 2), minmax(0, 1fr)); }
 .ok-instagram-live .ok-instagram-avatar { width: 62px; height: 62px; }
}

/* Shared Elementor footer: preserve the original grid and spacing around editor wrappers. */
.elementor .ok-footer-elementor.e-con {
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	--gap: 0; --width: 100%; --min-height: 0;
	display: block;
	max-width: none;
}
.elementor .ok-footer-elementor > .ok-footer-shell.e-con {
	--gap: 0; --padding-top: 72px; --padding-bottom: 0; --padding-left: 0; --padding-right: 0;
	display: block;
	width: var(--ok-container);
	max-width: none;
	margin-inline: auto;
}
.elementor .ok-footer-elementor .ok-footer-main.e-con {
	--gap: 46px; gap: 46px; --padding-top: 58px; --padding-bottom: 46px; --padding-left: 0; --padding-right: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, .8fr));
	width: 100%;
}
.ok-footer-elementor .elementor-widget {
	min-width: 0;
	--container-widget-width: 100%;
	--container-widget-flex-grow: 0;
	margin-bottom: 0;
}
.ok-footer-elementor .elementor-widget-container { height: auto; }
.webtures-footer-preview { margin: 0; }
@media (max-width: 980px) {
	.elementor .ok-footer-elementor .ok-footer-main.e-con { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.elementor .ok-footer-elementor > .ok-footer-shell.e-con { --padding-top: 48px; }
	.elementor .ok-footer-elementor .ok-footer-main.e-con { --gap: 34px; gap: 34px; --padding-top: 42px; --padding-bottom: 34px; }
}

.ok-footer-elementor .ok-footer-logo { border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.22); }
/* Keep the shared-footer shortcut reachable with keyboard focus as well as hover. */
#wpadminbar #wp-admin-bar-elementor_edit_page:focus-within > .ab-sub-wrapper { display: block; }

/* Quote entry in the mobile navigation; desktop uses the existing header CTA. */
.ok-nav-list .ok-nav-quote { display:none; }
@media (max-width:980px) { .ok-nav-list .ok-nav-quote { display:block; } .ok-nav-list .ok-nav-quote a { color:var(--ok-orange-dark); } }

/* Social profiles share the quote row in the expanded mobile menu. */
.ok-mobile-social { display: none; }
@media (max-width: 980px) {
	.ok-nav-quote-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
	.ok-mobile-social { display: flex; flex-shrink: 0; align-items: center; gap: 10px; margin: 0; }
	.ok-nav .ok-mobile-social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--ok-soft-line);
		border-radius: 50%;
		color: var(--ok-text);
		background: #f5f5f5;
	}
	.ok-nav .ok-mobile-social a:hover,
	.ok-nav .ok-mobile-social a:focus-visible {
		color: var(--ok-orange-dark);
		border-color: var(--ok-orange);
		background: rgba(var(--ok-accent-rgb), .08);
	}
	.ok-nav .ok-mobile-social a:focus-visible { outline: 2px solid var(--ok-orange); outline-offset: 3px; }
	.ok-header.is-open .ok-nav { max-height: calc(100dvh - 122px); overflow-y: auto; }
}