/**
 * Grafline – Home Page Specific Styles
 * Enhanced three-panel hero with smoother animations and improved visual polish.
 */

/* ============================================
   THREE-PANEL HERO - Enhanced
   ============================================ */

.hero-panels {
	display: flex;
	width: 100%;
	height: 85vh;
	min-height: min(560px, 100dvh);
	max-height: 900px;
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

/* Each panel — force white text to override GP link/heading colors */
.hero-panel,
.hero-panel:visited,
.hero-panel:hover,
.hero-panel h2,
.hero-panel span,
.hero-panel p {
	color: #ffffff !important;
}

.hero-panel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	flex: var(--panel-flex);
	transition: flex 0.75s cubic-bezier(0.32, 0.72, 0, 1);
	contain: layout;
}

/* Default proportions: 45% / 38% / 17% */
.hero-panel--b2b   { --panel-flex: 45; }
.hero-panel--b2c   { --panel-flex: 38; }
.hero-panel--about { --panel-flex: 17; }

/* On hover: siblings shrink */
.hero-panels:hover .hero-panel { 
	flex: 10;
	filter: brightness(0.8);
	transition: flex 0.75s cubic-bezier(0.32, 0.72, 0, 1), filter 0.5s ease;
}

/* Hovered panel expands */
.hero-panels:hover .hero-panel:hover { 
	flex: 80;
	filter: brightness(1);
}

/* ---- ENHANCED COLOR SCHEME with better contrast ---- */

/* B2B: Dark charcoal tinted overlay over image */
.hero-panel--b2b {
	background:
		linear-gradient(180deg, rgba(29, 29, 31, 0.75) 0%, rgba(44, 44, 46, 0.6) 100%),
		url('../../images/hero-b2b.jpg') center / cover no-repeat;
	background-color: #1d1d1f;
}

/* B2C: Red tinted overlay — hero brand color over image */
.hero-panel--b2c {
	background:
		linear-gradient(180deg, rgba(212, 42, 42, 0.7) 0%, rgba(192, 57, 43, 0.6) 100%),
		url('../../images/hero-b2c.jpg') center / cover no-repeat;
	background-color: #d42a2a;
}

/* About: Deep black overlay over image */
.hero-panel--about {
	background:
		linear-gradient(180deg, rgba(10, 10, 10, 0.75) 0%, rgba(26, 26, 28, 0.65) 100%),
		url('../../images/hero-about.jpg') center / cover no-repeat;
	background-color: #0a0a0a;
}

/* Enhanced overlay with smooth transitions */
.hero-panel__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.48) 0%,
		rgba(0, 0, 0, 0.16) 38%,
		rgba(0, 0, 0, 0.05) 70%,
		transparent 100%
	);
	transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1);
	opacity: 1;
	z-index: 1;
}

.hero-panel:hover .hero-panel__overlay {
	opacity: 0.3;
}

/* ---- Content: VERTICAL by default, HORIZONTAL on hover ---- */

.hero-panel__content {
	position: absolute;
	z-index: 2;
	inset: 0;
	/* Reserve space for fixed header so titles don’t sit under the nav */
	padding: clamp(4.25rem, calc(2.75rem + 4.5vw), 7.25rem) clamp(1.5rem, 3vw, 3rem) 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 20px;
}

/*
 * Vertical wrapper — writing-mode: vertical-rl + rotate(180deg)
 * gives bottom-to-top reading direction.
 */
.hero-panel__vertical {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	transform-origin: center center;
	margin-bottom: 20px;
	transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

/* When hovered: switch to horizontal layout (writing-mode changes instantly; transform animates) */
.hero-panel:hover .hero-panel__vertical {
	writing-mode: horizontal-tb;
	transform: none;
}

/* Badge pill — enhanced with backdrop blur */
.hero-panel__badge {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border-radius: 100px;
	white-space: nowrap;
	flex-shrink: 0;
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.35s ease;
}

/* Enhanced badge colors with better contrast */
.hero-panel--b2b .hero-panel__badge   { 
	background: rgba(255, 255, 255, 0.2); 
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-panel--b2c .hero-panel__badge   { 
	background: rgba(255, 255, 255, 0.25); 
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero-panel--about .hero-panel__badge { 
	background: rgba(255, 255, 255, 0.2); 
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-panel:hover .hero-panel__badge {
	transform: scale(1.05);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Title with enhanced shadow for better readability */
.hero-panel__title {
	font-size: clamp(2.2rem, 4vw, 3.8rem);
	font-weight: 900;
	line-height: 0.95;
	margin: 0;
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: normal;
	word-break: break-word;
	transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), font-size 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Larger title when panel is expanded */
.hero-panel:hover .hero-panel__title {
	font-size: clamp(2.6rem, 4.5vw, 4.2rem);
	transform: translateX(4px);
}

/* Subtitle — hidden by default, smooth fade-in on hover (no max-height animation for smoother GPU-only transition) */
.hero-panel__text {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9) !important;
	margin: 0;
	max-width: 520px;
	max-height: 150px;
	opacity: 0;
	overflow: hidden;
	transform: translateY(10px);
	transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.2s, 
	            transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.2s;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.hero-panel:hover .hero-panel__text {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0s;
}

/* CTA button — smooth GPU-friendly transitions */
.hero-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 100px;
	text-decoration: none;
	backdrop-filter: blur(8px);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1) 0.25s, 
	            transform 0.45s cubic-bezier(0.32, 0.72, 0, 1) 0.25s,
	            background 0.25s ease, 
	            color 0.25s ease, 
	            border-color 0.25s ease, 
	            box-shadow 0.25s ease,
	            gap 0.25s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.hero-panel:hover .hero-panel__cta {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0s;
}

.hero-panel__cta:hover {
	background: #ffffff;
	color: var(--grafline-primary) !important;
	border-color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
	gap: 0.75rem;
}

.hero-panel__cta:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero-panel__cta svg {
	transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.hero-panel__cta:hover svg {
	transform: translateX(4px);
}

/* Subtle dividers between panels */
.hero-panel + .hero-panel {
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	transition: border-color 0.3s ease;
}

.hero-panels:hover .hero-panel + .hero-panel {
	border-left-color: rgba(255, 255, 255, 0.05);
}

/* ============================================
   THREE-PANEL HERO – RESPONSIVE
   ============================================ */

@media (max-width: 960px) {
	.hero-panels {
		flex-direction: column;
		height: auto;
		min-height: unset;
		max-height: unset;
		overflow-x: clip;
	}

	.hero-panel {
		flex: none !important;
		height: auto;
		min-height: 300px;
		align-items: stretch;
		transition: min-height 0.6s cubic-bezier(0.32, 0.72, 0, 1), filter 0.3s ease;
	}

	.hero-panels:hover .hero-panel { 
		flex: none !important;
		filter: brightness(0.85);
	}
	.hero-panels:hover .hero-panel:hover { 
		flex: none !important; 
		min-height: 420px;
		filter: brightness(1);
	}

	.hero-panel + .hero-panel {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.hero-panel__vertical {
		writing-mode: horizontal-tb;
		transform: none;
	}
	.hero-panel__content {
		min-width: unset;
		justify-content: flex-start;
		align-items: flex-start;
		/* Clear fixed pill header on every stacked panel when scrolled to top */
		padding-top: calc(env(safe-area-inset-top, 0px) + 5.5rem);
		padding-bottom: 1.35rem;
		padding-left: clamp(1rem, 4vw, 1.35rem);
		padding-right: clamp(1rem, 4vw, 1.35rem);
		gap: 0.65rem;
		box-sizing: border-box;
	}
	.hero-panel__title {
		white-space: normal;
		margin: 0;
		line-height: 1.08;
		font-size: clamp(1.3rem, 5.2vw, 1.85rem);
	}
	.hero-panel__text { 
		opacity: 1; 
		max-height: none; 
		transform: translateY(0); 
	}
	.hero-panel__cta { 
		opacity: 1; 
		transform: translateY(0); 
	}
}

@media (max-width: 600px) {
	.hero-panel {
		min-height: 260px;
	}
	.hero-panels:hover .hero-panel:hover {
		min-height: 380px;
	}
	.hero-panel__content {
		padding-top: calc(env(safe-area-inset-top, 0px) + 5.85rem);
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 1.25rem;
		gap: 0.5rem;
	}
	.hero-panel__title {
		font-size: clamp(1.15rem, 6.5vw, 1.55rem);
	}
	.hero-panel__text {
		font-size: 0.875rem;
		max-height: none;
	}
	.hero-panel__cta {
		padding: 0.6rem 1.35rem;
		font-size: 0.78rem;
	}

	/* Darken overlay on mobile for text readability */
	.hero-panel__overlay {
		background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.1) 100%);
	}
}

/* Touch devices: do not wash out the overlay on :hover (sticky hover hurts contrast) */
@media (hover: none) {
	.hero-panel:hover .hero-panel__overlay {
		opacity: 1;
	}
}

/* ============================================
   FULL-WIDTH SECTIONS
   ============================================ */

.grafline-home-page .section {
	padding-left: clamp(1rem, 4vw, 4rem);
	padding-right: clamp(1rem, 4vw, 4rem);
	max-width: 100%;
	box-sizing: border-box;
}

.grafline-home-page .grafline-hero {
	padding: var(--spacing-2xl) var(--spacing-sm) calc(var(--spacing-2xl) + 1rem);
}

.grafline-home-page .grafline-hero h1 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
}

/* ============================================
   SOCIAL PROOF / CLIENT LOGOS - Enhanced
   ============================================ */

.grafline-social-proof {
	padding: var(--spacing-2xl) 0 var(--spacing-xl);
	background: transparent;
	text-align: center;
	overflow: hidden;
}

.social-proof__title {
	font-size: clamp(1.25rem, 3vw, 2.25rem);
	font-weight: 800;
	color: var(--grafline-text);
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
	word-break: break-word;
}

.social-proof__label {
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--grafline-text-light);
	margin-bottom: var(--spacing-xl);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Carousel wrapper with arrows */
.social-proof__carousel {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	padding: 0 clamp(2rem, 5vw, 4rem);
}

/* Enhanced arrow buttons with better hover states */
.social-proof__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--grafline-border);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	color: var(--grafline-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.social-proof__arrow:hover {
	background: var(--grafline-primary);
	color: #fff;
	border-color: var(--grafline-primary);
	box-shadow: 0 6px 20px rgba(255, 42, 19, 0.3);
	transform: translateY(-50%) scale(1.1);
}

.social-proof__arrow:active {
	transform: translateY(-50%) scale(1.05);
}

.social-proof__arrow--left  { left: 0; }
.social-proof__arrow--right { right: 0; }

/* Scrolling track – spacing for larger logos; draggable */
.social-proof__track {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 3.5rem);
	width: max-content;
	padding: 0 1rem;
	animation: logoScroll 220s linear infinite;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.social-proof__track:active {
	cursor: grabbing;
}

.social-proof__track.is-dragging {
	cursor: grabbing;
	animation-play-state: paused;
}

.social-proof__track:hover {
	animation-play-state: paused;
}

@keyframes logoScroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Uniform logo boxes with enhanced hover – larger for readability */
.social-proof__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 72px;
	padding: 10px 16px;
	transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.social-proof__logo:hover {
	transform: scale(1.05);
}

.social-proof__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.4;
	filter: grayscale(100%);
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.social-proof__logo:hover img {
	opacity: 1;
	filter: grayscale(0%);
}

@media (max-width: 768px) {
	.social-proof__carousel { padding: 0 2rem; }
	.social-proof__arrow { width: 36px; height: 36px; }
	.social-proof__track { gap: 1.75rem; padding: 0 0.5rem; }
	.social-proof__logo { width: 150px; height: 54px; }
}

/* Pricing teaser (for future use) */
.grafline-pricing-teaser {
	padding: var(--spacing-2xl) var(--spacing-sm);
	text-align: center;
}

.grafline-pricing-teaser .price-highlight {
	font-size: var(--font-size-4xl);
	font-weight: 800;
	color: var(--grafline-primary);
	margin: var(--spacing-md) 0;
	letter-spacing: -0.03em;
}

/* ============================================
   HOMEPAGE RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
	.hero-panels {
		height: 70vh;
		min-height: 500px;
	}
	
	.hero-panel__title {
		font-size: clamp(1.125rem, 2vw, 1.75rem);
	}
	
	.social-proof__carousel {
		padding: 0 2rem;
	}
	
	.social-proof__track {
		gap: 2rem;
	}
	
	.social-proof__logo {
		width: 170px;
		height: 60px;
	}
}

/* Mobile: < 768px - CRITICAL FIXES */
@media (max-width: 768px) {
	/* THREE-PANEL HERO - Stack vertically */
	.hero-panels {
		flex-direction: column;
		height: auto;
		min-height: unset;
		max-height: unset;
	}

	.hero-panel {
		flex: none !important;
		height: 320px;
		transition: height 0.6s cubic-bezier(0.32, 0.72, 0, 1), filter 0.3s ease;
	}

	.hero-panels:hover .hero-panel { 
		flex: none !important;
		filter: brightness(0.85);
	}
	
	.hero-panels:hover .hero-panel:hover { 
		flex: none !important; 
		height: 420px;
		filter: brightness(1);
	}

	.hero-panel + .hero-panel {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Content always horizontal on mobile */
	.hero-panel__vertical {
		writing-mode: horizontal-tb;
		transform: none;
	}
	
	.hero-panel__content { 
		min-width: unset;
		padding: 1.5rem 1.25rem;
	}
	
	.hero-panel__badge {
		padding: 0.3rem 0.85rem;
		font-size: 0.65rem;
	}
	
	.hero-panel__title { 
		white-space: normal;
		font-size: clamp(1.125rem, 4vw, 1.5rem);
	}
	
	.hero-panel:hover .hero-panel__title {
		font-size: clamp(1.25rem, 4.5vw, 1.75rem);
	}
	
	/* Show subtitle and CTA by default on mobile */
	.hero-panel__text { 
		opacity: 1; 
		max-height: 150px; 
		transform: translateY(0);
		font-size: 0.875rem;
		line-height: 1.6;
	}
	
	.hero-panel__cta { 
		opacity: 1; 
		transform: translateY(0);
		padding: 0.75rem 1.5rem;
		font-size: 0.8rem;
		min-height: 44px;
	}
	
	/* SOCIAL PROOF / LOGOS */
	.grafline-social-proof {
		padding: var(--spacing-xl) 0 var(--spacing-lg);
	}
	
	.social-proof__title {
		font-size: clamp(1.25rem, 5vw, 1.875rem);
		margin-bottom: 0.5rem;
	}
	
	.social-proof__label {
		font-size: 0.75rem;
		margin-bottom: var(--spacing-lg);
	}
	
	.social-proof__carousel {
		padding: 0 2rem;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
	}
	
	.social-proof__arrow {
		width: 40px;
		height: 40px;
	}
	
	.social-proof__track {
		gap: 2rem;
		animation: logoScroll 200s linear infinite;
	}
	
	.social-proof__logo {
		width: 150px;
		height: 54px;
		padding: 8px 12px;
	}
	
	/* HOME SECTIONS */
	.grafline-home-page .section {
		padding: var(--spacing-xl) 1rem;
	}
	
	.grafline-home-page .grafline-hero {
		padding: var(--spacing-xl) 1rem;
	}

	.grafline-home-page .grafline-hero h1 {
		font-size: clamp(1.5rem, 6vw, 2rem);
		line-height: 1.2;
	}
}

/* Small mobile: < 480px */
@media (max-width: 480px) {
	.hero-panel { 
		height: 280px;
	}
	
	.hero-panels:hover .hero-panel:hover { 
		height: 380px;
	}
	
	.hero-panel__content { 
		padding: 1.25rem 1rem;
	}
	
	.hero-panel__title { 
		font-size: 1.125rem;
	}
	
	.hero-panel:hover .hero-panel__title {
		font-size: 1.375rem;
	}
	
	.hero-panel__text { 
		font-size: 0.8rem;
		max-height: 120px;
	}
	
	.hero-panel__cta { 
		padding: 0.65rem 1.25rem;
		font-size: 0.75rem;
	}
	
	.social-proof__carousel {
		padding: 0 1.5rem;
	}
	
	.social-proof__arrow {
		width: 36px;
		height: 36px;
	}
	
	.social-proof__track {
		gap: 1.5rem;
	}
	
	.social-proof__logo {
		width: 130px;
		height: 48px;
		padding: 6px 10px;
	}
	
	.social-proof__title {
		font-size: 1.25rem;
	}
	
	.grafline-home-page .grafline-hero h1 {
		font-size: 1.5rem;
	}
}

/* Landscape mobile phones */
@media (max-width: 768px) and (orientation: landscape) {
	.hero-panel {
		height: 260px;
	}
	
	.hero-panels:hover .hero-panel:hover {
		height: 340px;
	}
	
	.hero-panel__content {
		padding: 1rem 1.25rem;
	}
}

/* ============================================
   MODERN CATEGORY CARDS WITH PHOTO BACKGROUNDS
   ============================================ */

.categories-showcase {
	padding: var(--spacing-2xl) var(--spacing-sm) var(--spacing-3xl);
	background: var(--grafline-bg);
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.section__subtitle {
	font-size: var(--font-size-lg);
	color: var(--grafline-text-light);
	max-width: 700px;
	margin: var(--spacing-sm) auto 0;
	line-height: 1.6;
}

.category-cards-modern {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-xl);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.category-row {
	display: flex;
	min-height: 480px;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.category-row:hover {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.category-row--left {
	flex-direction: row;
}

.category-row--right {
	flex-direction: row-reverse;
}

.category-card-photo__image {
	display: block;
	flex: 1 1 50%;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.category-row:hover .category-card-photo__image {
	transform: scale(1.03);
}

.category-card-photo__content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--spacing-xl) var(--spacing-2xl);
	background: var(--grafline-bg-light);
	color: var(--grafline-text);
	text-decoration: none;
	transition: background 0.3s ease;
}

.category-card-photo__content:hover {
	background: #f0f0f0;
}

.category-card-photo__title {
	font-size: clamp(1.5rem, 3vw, 1.75rem);
	font-weight: 800;
	margin: 0 0 var(--spacing-xs);
	color: var(--grafline-text) !important;
	letter-spacing: -0.02em;
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.category-card-photo__content:hover .category-card-photo__title {
	transform: translateX(8px);
}

.category-card-photo__desc {
	font-size: var(--font-size-base);
	margin: 0 0 var(--spacing-md);
	color: var(--grafline-text-light);
	line-height: 1.5;
}

.category-card-photo__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--grafline-primary);
	padding: 0.5rem 1.25rem;
	background: transparent;
	border: 2px solid var(--grafline-primary);
	border-radius: var(--radius-full);
	width: fit-content;
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.category-card-photo__content:hover .category-card-photo__cta {
	background: var(--grafline-primary);
	color: #fff;
	gap: 0.75rem;
}

.category-card-photo__cta svg {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card-photo__content:hover .category-card-photo__cta svg {
	transform: translateX(4px);
}

@media (max-width: 768px) {
	.category-row {
		flex-direction: column !important;
		min-height: 0;
	}

	.category-card-photo__image {
		flex: 0 0 auto;
		min-height: 280px;
		width: 100%;
	}

	.category-card-photo__content {
		padding: var(--spacing-lg) var(--spacing-xl);
	}
}

/* ============================================
   MODERN BENEFITS SPLIT LAYOUT
   ============================================ */

.benefits-modern {
	padding: var(--spacing-3xl) var(--spacing-sm);
	background: var(--grafline-bg-light);
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.benefits-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-3xl);
	align-items: center;
	max-width: min(1200px, 100%);
	margin: 0 auto;
	overflow: hidden;
}

.section__title--left {
	text-align: left;
}

.section__title--left h2 {
	margin-bottom: var(--spacing-sm);
}

.section__title--left .section__subtitle {
	margin: 0;
	max-width: none;
	text-align: left;
}

/* Photo Stack – squared container, image fills correctly */
.benefits-split__photo {
	position: relative;
}

.benefits-photo-stack {
	position: relative;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	aspect-ratio: 1;
	min-height: 380px;
	background: var(--grafline-bg);
}

.benefits-photo-stack__main {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-2xl);
}

.benefits-photo-stack__badge {
	position: absolute;
	bottom: var(--spacing-lg);
	right: var(--spacing-lg);
}

.benefits-badge {
	background: linear-gradient(135deg, var(--grafline-primary), var(--grafline-primary-dark));
	color: #fff;
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-xl);
	box-shadow: 0 12px 32px rgba(255, 42, 19, 0.4);
	text-align: center;
	animation: float 3s ease-in-out infinite;
}

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

.benefits-badge__number {
	display: block;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.25rem;
}

.benefits-badge__text {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	opacity: 0.95;
}

/* Benefits List */
.benefits-list-modern {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-xl);
}

.benefit-item-modern {
	display: flex;
	gap: var(--spacing-md);
	align-items: flex-start;
	padding: var(--spacing-lg);
	background: var(--grafline-bg);
	border-radius: var(--radius-xl);
	border: 1px solid var(--grafline-border);
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.benefit-item-modern:hover {
	transform: translateX(8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-color: rgba(255, 42, 19, 0.3);
}

.benefit-item-modern__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--grafline-primary-light), rgba(255, 42, 19, 0.15));
	border-radius: var(--radius-lg);
	color: var(--grafline-primary);
}

.benefit-item-modern__icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--grafline-primary);
}

.benefit-item-modern__text h3 {
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin: 0 0 var(--spacing-xs);
	color: var(--grafline-text);
}

.benefit-item-modern__text p {
	font-size: var(--font-size-base);
	line-height: 1.7;
	margin: 0;
	color: var(--grafline-text-light);
}

@media (max-width: 968px) {
	.benefits-split {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}
	
	.benefits-split__photo {
		order: -1;
	}
	
	.benefits-photo-stack {
		min-height: 320px;
		max-height: 420px;
	}
	
	.benefits-photo-stack__main {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.section__title--left {
		text-align: center;
	}
	
	.section__title--left .section__subtitle {
		text-align: center;
		margin: 0 auto;
	}
	
	.benefits-photo-stack__badge {
		bottom: var(--spacing-md);
		right: var(--spacing-md);
	}
}

/* ============================================
   MODERN HOW IT WORKS TIMELINE
   ============================================ */

.how-it-works-modern {
	padding: var(--spacing-3xl) var(--spacing-sm);
	padding-top: calc(var(--spacing-3xl) + 2.5rem);
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.steps-timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: var(--spacing-2xl);
	position: relative;
	max-width: 100%;
	overflow: hidden;
}

.step-timeline {
	position: relative;
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-md);
}

.step-timeline__visual {
	position: relative;
	margin-bottom: var(--spacing-lg);
}

.step-timeline__number {
	width: 80px;
	height: 80px;
	margin: 0 auto var(--spacing-md);
	background: linear-gradient(135deg, var(--grafline-primary), var(--grafline-primary-dark));
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 800;
	box-shadow: 0 8px 24px rgba(255, 42, 19, 0.35);
	position: relative;
	z-index: 2;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.step-timeline:hover .step-timeline__number {
	transform: scale(1.1) rotate(5deg);
}

.step-timeline__connector {
	position: absolute;
	top: 40px;
	left: 50%;
	width: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-timeline__connector svg {
	position: absolute;
	left: 0;
	width: 100%;
}

.step-timeline__arrow {
	position: absolute;
	right: -10%;
	font-size: 2rem;
	color: var(--grafline-primary);
	font-weight: 700;
	animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
	0%, 100% { transform: translateX(0); opacity: 0.6; }
	50% { transform: translateX(8px); opacity: 1; }
}

.step-timeline__icon {
	display: none;
}

.step-timeline__title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	margin: 0 0 var(--spacing-sm);
	color: var(--grafline-text);
}

.step-timeline__desc {
	font-size: var(--font-size-base);
	line-height: 1.7;
	margin: 0;
	color: var(--grafline-text-light);
}

@media (max-width: 968px) {
	.steps-timeline {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}
	
	.step-timeline__connector {
		top: auto;
		bottom: -50px;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
		width: 60px;
	}
	
	.step-timeline__arrow {
		transform: rotate(90deg);
		right: -20px;
	}
	
	.step-timeline:last-child .step-timeline__connector {
		display: none;
	}
}

/* ============================================
   MODERN FAQ ACCORDION
   ============================================ */

.faq-modern {
	padding: var(--spacing-3xl) var(--spacing-sm);
	background: var(--grafline-bg);
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.faq-list-modern {
	max-width: min(900px, 100%);
	margin: var(--spacing-2xl) auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.faq-item-modern {
	background: var(--grafline-bg-light);
	border: 2px solid var(--grafline-border);
	border-radius: var(--radius-xl);
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	overflow: hidden;
}

.faq-item-modern:hover {
	border-color: rgba(255, 42, 19, 0.3);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.faq-item-modern[open] {
	border-color: var(--grafline-primary);
	box-shadow: 0 8px 24px rgba(255, 42, 19, 0.15);
}

.faq-item-modern__question {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-lg) var(--spacing-xl);
	cursor: pointer;
	user-select: none;
	list-style: none;
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--grafline-text);
	transition: color 0.3s ease;
}

.faq-item-modern__question::-webkit-details-marker {
	display: none;
}

.faq-item-modern__question:hover {
	color: var(--grafline-primary);
}

.faq-item-modern__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--grafline-primary);
	border-radius: 50%;
	color: #fff;
	position: relative;
}

.faq-icon-minus {
	display: none;
}

.faq-item-modern[open] .faq-icon-plus {
	display: none;
}

.faq-item-modern[open] .faq-icon-minus {
	display: block;
}

.faq-item-modern__text {
	flex: 1;
}

.faq-item-modern__answer {
	padding: 0 var(--spacing-xl) var(--spacing-lg) calc(32px + var(--spacing-md) + var(--spacing-xl));
	animation: fadeIn 0.4s ease;
}

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

.faq-item-modern__answer p {
	font-size: var(--font-size-base);
	line-height: 1.7;
	margin: 0;
	color: var(--grafline-text-light);
}

.faq-cta {
	text-align: center;
	margin-top: var(--spacing-2xl);
	padding: var(--spacing-xl);
	background: var(--grafline-bg-light);
	border-radius: var(--radius-xl);
	border: 2px dashed var(--grafline-border);
}

.faq-cta p {
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0 0 var(--spacing-md);
	color: var(--grafline-text);
}

/* ============================================
   MODERN CTA BANNER WITH PHOTO
   ============================================ */

.cta-banner-modern {
	padding: var(--spacing-3xl) var(--spacing-sm);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	text-align: center;
	max-width: 100%;
	box-sizing: border-box;
}

.cta-banner-modern::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	z-index: 1;
}

.cta-banner-modern__content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
}

.cta-banner-modern__title {
	font-size: clamp(1.5rem, 5vw, 3.5rem);
	font-weight: 800;
	margin: 0 0 var(--spacing-md);
	color: #fff;
	letter-spacing: -0.03em;
	line-height: 1.15;
	word-break: break-word;
}

.cta-banner-modern__subtitle {
	font-size: var(--font-size-lg);
	margin: 0 0 var(--spacing-xl);
	color: rgba(255, 255, 255, 0.95);
	line-height: 1.6;
}

.cta-banner-modern__actions {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.cta-banner-modern__actions {
		flex-direction: column;
	}
	
	.cta-banner-modern__actions .btn {
		width: 100%;
	}
}