/* OnkoPass Custom Styles */

:root {
	/* Brand Colors */
	--blue: #41597D;
	--blue-700: #394C6B;
	--blue-light: #EAEDF4;
	--pink: #E88E82;
	--pink-100: #FBE8E5;
	--pink-950: #3E1611;
	--grey-50: #F8F8F8;
	--grey-100: #F0F0F0;
	--grey-500: #A4A3A3;
	--grey-700: #6B6A6A;
	--grey-950: #282727;
	--red-700: #B91C1C;
	--yellow-600: #CA8A04;
	--shadow: 0px 1px 2px rgba(0,0,0,0.1);
	--shadow-md: 0 4px 16px rgba(65,89,125,0.12);
	--shadow-lg: 0 12px 40px rgba(65,89,125,0.16);

	/* Spacing */
	--spacing-xxs: 4px;
	--spacing-xs: 8px;
	--spacing-ts: 12px;
	--spacing-s: 16px;
	--spacing-m: 24px;
	--spacing-l: 32px;
	--spacing-3x: 64px;

	/* Radius */
	--radius-xs: 8px;
	--radius-s: 12px;

	/* Typography */
	--font-family: 'Inter', sans-serif;
	--font-feature: 'lnum' 1, 'tnum' 1;
}

/* Global typography */
body {
	font-family: var(--font-family);
	font-feature-settings: var(--font-feature);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Focus indicators for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* ─── HERO ────────────────────────────────────── */
.onkopass-hero {
	background: var(--blue);
	position: relative;
	min-height: 720px;
	overflow: hidden;
}

.onkopass-hero .hero-dot-grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
	background-size: 30px 30px;
	pointer-events: none;
	z-index: 0;
}

.onkopass-hero .hero-bg-blob {
	position: absolute;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232,142,130,0.18) 0%, transparent 70%);
	top: -300px;
	right: -200px;
	pointer-events: none;
}

.onkopass-hero .hero-bg-blob-2 {
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
	bottom: -100px;
	left: 100px;
	pointer-events: none;
}

.onkopass-hero .hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 720px;
	position: relative;
	z-index: 1;
}

.onkopass-hero .hero-left {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 0 80px 64px;
}

.onkopass-hero .hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.8);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 64px;
	margin-bottom: 28px;
	width: fit-content;
}

.onkopass-hero .hero-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pink);
	animation: pulse-dot 2.5s ease-in-out infinite;
}

.onkopass-hero h1 {
	font-size: 64px;
	font-weight: 700;
	color: white;
	line-height: 1.05;
	letter-spacing: -2.5px;
	margin: 0 0 4px;
}

.onkopass-hero .hero-rotate-line {
	font-size: 52px;
	font-weight: 700;
	color: white;
	letter-spacing: -2px;
	line-height: 1.1;
	height: 1.1em;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 24px;
}

.onkopass-hero h1 em,
.onkopass-hero #hero-rotate {
	font-style: normal;
	color: var(--pink);
	display: inline-block;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.onkopass-hero #hero-rotate.fading {
	opacity: 0;
	transform: translateY(-8px);
}

.onkopass-hero .hero-sub {
	font-size: 15px;
	font-weight: 500;
	color: rgba(255,255,255,0.65);
	line-height: 1.7;
	max-width: 480px;
	margin-bottom: 40px;
}

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

.onkopass-hero .btn-pink {
	background: var(--pink);
	color: white;
	font-size: 14px;
	font-weight: 600;
	border-radius: 64px;
	padding: 14px 28px;
	text-decoration: none;
	transition: opacity 150ms, transform 150ms;
	display: inline-block;
}

.onkopass-hero .btn-pink:hover { opacity: 0.9; transform: translateY(-1px); }

.onkopass-hero .btn-ghost {
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.85);
	font-size: 14px;
	font-weight: 600;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 64px;
	padding: 14px 28px;
	text-decoration: none;
	transition: background 150ms;
}

.onkopass-hero .btn-ghost:hover { background: rgba(255,255,255,0.14); }

.onkopass-hero .hero-right {
	display: flex;
	align-items: flex-end;
	padding: 80px 56px 0 8px;
}

.onkopass-hero .hero-screen-float {
	width: 100%;
	animation: heroFloat 6s ease-in-out infinite;
	will-change: transform;
}

.onkopass-hero .hero-screen-float img {
	width: 100%;
	display: block;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -4px 0 rgba(255,255,255,0.12), 0 28px 80px rgba(0,0,0,0.45);
	transition: transform 0.12s ease-out, box-shadow 0.25s ease;
	will-change: transform;
}

.hero-fade {
	height: 60px;
	margin-top: -60px;
	background: linear-gradient(to bottom, transparent, white);
	position: relative;
	z-index: 10;
	pointer-events: none;
}

@keyframes heroFloat {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-18px); }
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232,142,130,0); }
	50%       { opacity: 0.7; box-shadow: 0 0 0 4px rgba(232,142,130,0.3); }
}

/* ─── TICKER ─────────────────────────────────── */
.onkopass-ticker {
	background: white;
	border-bottom: 1px solid var(--grey-100);
	padding: 48px 0;
}

.onkopass-ticker .ticker-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--grey-500);
	text-align: center;
	margin-bottom: 28px;
}

.onkopass-ticker .ticker-outer {
	position: relative;
	overflow: hidden;
}

.onkopass-ticker .ticker-fade-l,
.onkopass-ticker .ticker-fade-r {
	position: absolute;
	top: 0; bottom: 0;
	width: 160px;
	z-index: 2;
	pointer-events: none;
}

.onkopass-ticker .ticker-fade-l {
	left: 0;
	background: linear-gradient(to right, white 30%, transparent);
}

.onkopass-ticker .ticker-fade-r {
	right: 0;
	background: linear-gradient(to left, white 30%, transparent);
}

.onkopass-ticker .ticker-track {
	display: flex;
	width: max-content;
	animation: ticker-scroll 32s linear infinite;
	align-items: center;
	gap: 56px;
	padding: 8px 0;
}

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

.onkopass-ticker .ticker-item {
	font-size: 14px;
	font-weight: 700;
	color: var(--grey-500);
	white-space: nowrap;
	letter-spacing: 0.3px;
}

.onkopass-ticker .ticker-sep {
	color: var(--pink);
	font-size: 20px;
	line-height: 1;
	opacity: 0.4;
	flex-shrink: 0;
}

/* ─── SECTION COMMON ─────────────────────────── */
.onkopass-section {
	padding: 128px 64px;
}

.onkopass-section.white { background: white; }
.onkopass-section.grey  { background: var(--grey-50); }
.onkopass-section.blue  { background: var(--blue); }
.onkopass-section.center { text-align: center; }

.section-pill {
	display: inline-block;
	background: var(--pink-100);
	color: var(--pink);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 64px;
	margin-bottom: 16px;
}

.section-pill.blue-pill {
	background: var(--blue-light);
	color: var(--blue);
}

.section-pill.ghost {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.18);
	color: rgba(255,255,255,0.75);
}

.section-pill.dark-pink {
	background: rgba(232,142,130,0.18);
	color: var(--pink);
	border: 1px solid rgba(232,142,130,0.25);
}

h2.section-h {
	font-size: 44px;
	font-weight: 700;
	color: var(--grey-950);
	letter-spacing: -1.8px;
	line-height: 1.15;
	margin-bottom: 10px;
}

h2.section-h.white { color: white; }

p.section-sub {
	font-size: 14px;
	font-weight: 500;
	color: var(--grey-700);
	line-height: 1.65;
	max-width: 500px;
	margin-bottom: 52px;
}

p.section-sub.light { color: rgba(255,255,255,0.55); }

/* ─── INTRO ──────────────────────────────────── */
.onkopass-intro {
	background: white;
	padding: 128px 64px;
	text-align: center;
}

.onkopass-intro .intro-pill {
	display: inline-block;
	background: var(--blue-light);
	color: var(--blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 64px;
	margin-bottom: 20px;
}

.onkopass-intro h2 {
	font-size: 52px;
	font-weight: 700;
	color: var(--grey-950);
	letter-spacing: -2px;
	line-height: 1.08;
	max-width: 760px;
	margin: 0 auto 20px;
}

.onkopass-intro > p {
	font-size: 15px;
	font-weight: 500;
	color: var(--grey-700);
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto;
}

/* Compliance badges */
.compliance-strip {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 48px;
}

.compliance-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: white;
	border: 1px solid var(--grey-100);
	border-radius: 64px;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--grey-700);
	box-shadow: var(--shadow);
}

.compliance-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16A34A;
	flex-shrink: 0;
}

/* Benefits row */
.benefits-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 52px;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.benefit-card {
	background: white;
	border-radius: 12px;
	padding: 20px 20px 22px;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--grey-100);
	text-align: left;
	transition: transform 200ms, box-shadow 200ms;
}

.benefit-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

.benefit-icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.benefit-icon.blue  { background: var(--blue-light); }
.benefit-icon.pink  { background: var(--pink-100); }
.benefit-icon.green { background: #DCFCE7; }

.benefit-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--grey-950);
	margin-bottom: 5px;
	letter-spacing: -0.2px;
}

.benefit-desc {
	font-size: 12px;
	font-weight: 500;
	color: var(--grey-700);
	line-height: 1.6;
}

/* ─── DIFFERENTIATION ────────────────────────── */
.onkopass-diff {
	padding: 96px 64px;
	background: var(--blue);
	text-align: center;
}

.diff-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1120px;
	margin: 52px auto 0;
	text-align: left;
}

.diff-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 28px 24px;
	position: relative;
	overflow: hidden;
	transition: background 200ms;
}

.diff-card:hover { background: rgba(255,255,255,0.1); }

.diff-icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.diff-card-num {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pink);
	margin-bottom: 20px;
}

.diff-card h3 {
	font-size: 15px;
	font-weight: 700;
	color: white;
	margin-bottom: 10px;
	line-height: 1.35;
	letter-spacing: -0.3px;
}

.diff-card p {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255,0.55);
	line-height: 1.7;
}

/* ─── FEATURE SPLIT ──────────────────────────── */
.feat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	align-items: center;
}

.feat-grid.flip .feat-visual { order: -1; }

.feat-items {
	display: flex;
	flex-direction: column;
}

.feat-item {
	display: flex;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--grey-100);
	transition: background 200ms, padding 200ms;
	border-radius: 10px;
}

.feat-item:first-child { padding-top: 0; }
.feat-item:last-child { border-bottom: none; padding-bottom: 0; }

.feat-item:hover {
	background: var(--grey-50);
	padding-left: 10px;
	padding-right: 10px;
	margin-left: -10px;
	margin-right: -10px;
}

.feat-num {
	width: 28px;
	height: 28px;
	min-width: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	flex-shrink: 0;
}

.onkopass-section.white .feat-num {
	background: var(--blue-light);
	color: var(--blue);
}

.onkopass-section.grey .feat-num {
	background: var(--pink-100);
	color: var(--pink);
}

.feat-item h4 {
	font-size: 14px;
	font-weight: 600;
	color: var(--grey-950);
	margin-bottom: 4px;
	line-height: 1.4;
}

.feat-item p {
	font-size: 12px;
	font-weight: 500;
	color: var(--grey-700);
	line-height: 1.65;
}

.feat-visual img {
	width: 100%;
	display: block;
}

/* ─── TESTIMONIAL ────────────────────────────── */
.onkopass-testimonial {
	background: white;
	padding: 128px 64px;
}

.testimonial-inner {
	max-width: 920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.testimonial-kicker {
	display: inline-block;
	background: var(--pink-100);
	color: var(--pink);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 64px;
	margin-bottom: 24px;
}

.testimonial-left h2 {
	font-size: 40px;
	font-weight: 700;
	color: var(--grey-950);
	letter-spacing: -1.5px;
	line-height: 1.15;
	margin-bottom: 16px;
}

.testimonial-left p {
	font-size: 14px;
	font-weight: 500;
	color: var(--grey-700);
	line-height: 1.7;
}

.testimonial-quote {
	font-size: 18px;
	font-weight: 600;
	color: var(--grey-950);
	line-height: 1.6;
	letter-spacing: -0.3px;
	border-left: 3px solid var(--pink);
	padding-left: 24px;
	margin-bottom: 28px;
	font-style: italic;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 40px;
}

.testimonial-avatar {
	width: 44px;
	height: 44px;
	border-radius: 44px;
	background: var(--blue-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--blue);
	flex-shrink: 0;
}

.testimonial-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--grey-950);
	margin-bottom: 2px;
}

.testimonial-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--grey-500);
}

.testimonial-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding-top: 32px;
	border-top: 1px solid var(--grey-100);
}

.t-metric-num {
	font-size: 44px;
	font-weight: 700;
	color: var(--grey-950);
	letter-spacing: -2px;
	line-height: 1;
	margin-bottom: 6px;
}

.t-metric-num em { font-style: normal; color: var(--pink); }

.t-metric-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--grey-500);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
}

/* ─── STATS ──────────────────────────────────── */
.onkopass-stats {
	background: var(--blue);
	padding: 80px 64px;
	position: relative;
	overflow: hidden;
}

.onkopass-stats::before {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232,142,130,0.15) 0%, transparent 70%);
	top: -200px;
	right: -100px;
	pointer-events: none;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	position: relative;
	z-index: 1;
}

.stat-item {
	text-align: center;
	padding: 0 40px;
}

.stat-item + .stat-item {
	border-left: 1px solid rgba(255,255,255,0.1);
}

.stat-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	border: 1px solid rgba(255,255,255,0.08);
}

.stat-number {
	font-size: 56px;
	font-weight: 700;
	color: white;
	letter-spacing: -3px;
	line-height: 1;
	margin-bottom: 10px;
}

.stat-number em { font-style: normal; color: var(--pink); }

.stat-label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255,255,255,0.5);
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.4;
}

.stat-sublabel {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255,255,255,0.32);
	margin-top: 8px;
}

/* ─── CONCLUSION ─────────────────────────────── */
.onkopass-conclusion {
	background: white;
	padding: 100px 64px;
}

.conclusion-inner {
	max-width: 860px;
}

.quote-decor {
	font-size: 100px;
	font-weight: 700;
	color: var(--grey-100);
	line-height: 0.8;
	display: block;
	margin-bottom: -16px;
	letter-spacing: -4px;
	font-family: Georgia, serif;
}

.conclusion-inner blockquote {
	font-size: 38px;
	font-weight: 700;
	color: var(--grey-950);
	letter-spacing: -1.5px;
	line-height: 1.15;
	margin-bottom: 48px;
	border-left: 4px solid var(--pink);
	padding-left: 32px;
}

.conclusion-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding-left: 36px;
}

.conclusion-cols p {
	font-size: 14px;
	font-weight: 500;
	color: var(--grey-700);
	line-height: 1.75;
}

/* ─── CTA ────────────────────────────────────── */
.onkopass-cta {
	background: linear-gradient(150deg, #2A3A54 0%, var(--blue-700) 60%, #1E2D42 100%);
	padding: 100px 64px;
}

.cta-inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.cta-inner h2 {
	font-size: 40px;
	font-weight: 700;
	color: white;
	letter-spacing: -1.5px;
	line-height: 1.12;
	margin-bottom: 16px;
}

.cta-inner p {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,0.55);
	line-height: 1.7;
	margin-bottom: 40px;
}

.cta-btns {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 48px;
}

.btn-white {
	background: white;
	color: var(--blue-700);
	font-size: 14px;
	font-weight: 700;
	border-radius: 64px;
	padding: 14px 28px;
	text-decoration: none;
	transition: opacity 150ms, transform 150ms;
	display: inline-block;
}

.btn-white:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-ghost-dark {
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.9);
	font-size: 14px;
	font-weight: 600;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 64px;
	padding: 14px 28px;
	text-decoration: none;
	transition: background 150ms;
	display: inline-block;
}

.btn-ghost-dark:hover { background: rgba(255,255,255,0.16); }

.contact-card {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 20px 28px;
	text-decoration: none;
	transition: box-shadow 150ms, transform 150ms, background 150ms;
}

.contact-card:hover {
	background: rgba(255,255,255,0.12);
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
	transform: translateY(-2px);
}

.contact-card .contact-name {
	font-size: 14px;
	font-weight: 600;
	color: white;
	margin-bottom: 3px;
	text-align: left;
}

.contact-card .contact-role {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255,255,255,0.45);
	text-align: left;
}

.contact-card .contact-email {
	font-size: 12px;
	font-weight: 600;
	color: var(--pink);
	text-align: left;
	margin-top: 1px;
}

/* ─── FOOTER ─────────────────────────────────── */
.onkopass-footer {
	background: var(--blue-700);
	padding: 48px 64px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
}

.footer-left { display: flex; flex-direction: column; gap: 6px; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-name { font-size: 14px; font-weight: 700; color: white; }
.footer-tag { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.4); }

.footer-links {
	display: flex;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links a {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255,255,255,0.45);
	text-decoration: none;
	transition: color 150ms;
}

.footer-links a:hover { color: rgba(255,255,255,0.85); }

.footer-copy { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.28); }

/* ─── NAV ────────────────────────────────────── */
.onkopass-nav {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--grey-100);
	padding: 0 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.onkopass-nav .logo {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.onkopass-nav .nav-links {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.onkopass-nav .nav-links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--grey-700);
	text-decoration: none;
	transition: color 150ms;
}

.onkopass-nav .nav-links a:hover { color: var(--blue); }

.onkopass-nav .btn-nav {
	background: var(--blue);
	color: white !important;
	font-size: 12px;
	font-weight: 600;
	border-radius: 64px;
	padding: 10px 20px;
	text-decoration: none;
	transition: background 150ms, transform 150ms;
}

.onkopass-nav .btn-nav:hover { background: var(--blue-700) !important; transform: translateY(-1px); }

/* ─── SCROLL REVEAL ──────────────────────────── */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }

/* ─── WP BUTTON OVERRIDES ────────────────────── */
.wp-block-button .wp-block-button__link {
	border-radius: 64px;
	font-weight: 600;
	font-size: 12px;
	padding: 8px 16px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: #FFFFFF;
	border: 1px solid var(--grey-100);
	color: var(--grey-950);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--grey-50);
}

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1024px) {
	.onkopass-hero .hero-inner { grid-template-columns: 1fr; min-height: auto; }
	.onkopass-hero .hero-left { padding: 80px 32px 48px; }
	.onkopass-hero .hero-right { display: none; }
	.onkopass-hero h1 { font-size: 40px; }
	.onkopass-hero .hero-rotate-line { font-size: 32px; }
	.feat-grid { grid-template-columns: 1fr; gap: 48px; }
	.feat-grid.flip .feat-visual { order: 0; }
	.diff-grid { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: 1fr; gap: 48px; }
	.stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 48px; }
	.testimonial-inner { grid-template-columns: 1fr; }
	.benefits-row { grid-template-columns: 1fr; }
	.conclusion-cols { grid-template-columns: 1fr; }
	.onkopass-section,
	.onkopass-intro,
	.onkopass-diff,
	.onkopass-testimonial,
	.onkopass-stats,
	.onkopass-conclusion,
	.onkopass-cta { padding-left: 24px; padding-right: 24px; }
	.onkopass-nav { padding: 0 24px; }
	.onkopass-footer { flex-direction: column; text-align: center; padding: 32px 24px; }
	.cta-btns { flex-direction: column; align-items: center; }
}