/* ============================================
   FRONT PAGE STYLES - LJDev Wizytówka
   Premium dark navy + neon cyan theme
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
	--navy-deep: #050816;
	--navy-dark: #0a0e27;
	--navy-mid: #0d1137;
	--navy-light: #131842;
	--navy-card: #0f1535;
	--cyan-neon: #00f0ff;
	--cyan-bright: #22d3ee;
	--cyan-mid: #06b6d4;
	--cyan-dim: #0891b2;
	--blue-accent: #3b82f6;
	--gradient-cyan: linear-gradient(135deg, #00f0ff, #06b6d4, #3b82f6);
	--gradient-hero: linear-gradient(135deg, #050816 0%, #0a1628 25%, #0d1137 50%, #0a0e27 100%);
	--glass-bg: rgba(13, 17, 55, 0.6);
	--glass-border: rgba(0, 240, 255, 0.08);
	--glow-cyan: 0 0 40px rgba(0, 240, 255, 0.15);
}

/* ============================================
   GLOBAL / BODY
   ============================================ */
html,
body {
	overflow-x: hidden !important;
	width: 100%;
	position: relative;
	background-color: var(--navy-deep) !important;
	color: #e2e8f0;
}

/* Text gradient utility */
.text-gradient {
	background: var(--gradient-cyan);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
	min-height: 100vh;
	background: var(--gradient-hero);
	position: relative;
}

/* Animated grid background */
.hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
}

/* Gradient overlay */
.hero-gradient {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 240, 255, 0.06) 0%, transparent 70%);
}

/* Floating orbs */
.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.4;
	animation: orbFloat 10s ease-in-out infinite;
}

.hero-orb-1 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(0, 240, 255, 0.15), transparent 70%);
	top: 10%;
	left: 10%;
	animation-delay: 0s;
}

.hero-orb-2 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 70%);
	bottom: 15%;
	right: 15%;
	animation-delay: -3s;
}

.hero-orb-3 {
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.1), transparent 70%);
	top: 50%;
	right: 30%;
	animation-delay: -6s;
}

@keyframes orbFloat {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	25% {
		transform: translate(20px, -30px) scale(1.05);
	}
	50% {
		transform: translate(-15px, 20px) scale(0.95);
	}
	75% {
		transform: translate(25px, 10px) scale(1.02);
	}
}

/* Hero badge */
.hero-badge {
	opacity: 0;
	animation: fadeInDown 0.8s ease forwards 0.2s;
}

/* Hero title */
.hero-title {
	letter-spacing: -0.02em;
}

/* CTA Primary - Cyan gradient button */
.cta-primary {
	background: linear-gradient(135deg, var(--cyan-neon), var(--cyan-mid), var(--blue-accent));
	color: var(--navy-deep) !important;
	font-weight: 700;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 0 30px rgba(0, 240, 255, 0.3),
		0 4px 15px rgba(0, 240, 255, 0.2);
}

.cta-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--blue-accent), var(--cyan-neon));
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cta-primary:hover {
	box-shadow:
		0 0 50px rgba(0, 240, 255, 0.5),
		0 8px 25px rgba(0, 240, 255, 0.3);
	transform: translateY(-2px);
	color: var(--navy-deep) !important;
}

.cta-primary:hover::before {
	opacity: 1;
}

/* CTA Secondary - Glass button */
.cta-secondary {
	color: #e2e8f0 !important;
	border: 1px solid rgba(0, 240, 255, 0.2);
	background: rgba(0, 240, 255, 0.05);
	backdrop-filter: blur(10px);
}

.cta-secondary:hover {
	border-color: rgba(0, 240, 255, 0.5);
	background: rgba(0, 240, 255, 0.1);
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.15);
	transform: translateY(-2px);
	color: #fff !important;
}

/* Scroll indicator */
.scroll-dot {
	animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
	0%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(12px);
		opacity: 0.3;
	}
}

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

/* ============================================
   SECTION SHARED STYLES
   ============================================ */
.about-section,
.services-section,
.portfolio-section,
.process-section,
.testimonials-section,
.contact-section {
	background: var(--navy-deep);
	position: relative;
}

/* Alternating subtle background */
.services-section,
.process-section,
.contact-section {
	background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-dark) 50%, var(--navy-deep) 100%);
}

/* Section glowing orbs */
.section-glow {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.08;
	pointer-events: none;
}

.section-glow-left {
	background: radial-gradient(circle, var(--cyan-neon), transparent 70%);
	top: 20%;
	left: -10%;
}

.section-glow-right {
	background: radial-gradient(circle, var(--blue-accent), transparent 70%);
	top: 30%;
	right: -10%;
}

.section-glow-center {
	background: radial-gradient(circle, var(--cyan-mid), transparent 70%);
	top: 40%;
	left: 50%;
	transform: translateX(-50%);
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-card:hover {
	border-color: rgba(0, 240, 255, 0.2);
	box-shadow: var(--glow-cyan);
	transform: translateY(-2px);
}

.stat-card-v2 {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-v2:hover {
	border-color: rgba(0, 240, 255, 0.2);
	box-shadow: var(--glow-cyan);
	transform: translateY(-4px);
}

.tech-pill {
	background: rgba(0, 240, 255, 0.08);
	border: 1px solid rgba(0, 240, 255, 0.12);
	color: var(--cyan-bright);
	transition: all 0.3s ease;
}

.tech-pill:hover {
	background: rgba(0, 240, 255, 0.15);
	border-color: rgba(0, 240, 255, 0.3);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
	transform: translateY(-1px);
}

/* ============================================
   SERVICES SECTION
   ============================================ */
.service-card-v2 {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.service-card-v2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gradient-cyan);
	transform: scaleX(0);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: left;
}

.service-card-v2::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.06) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.service-card-v2:hover {
	border-color: rgba(0, 240, 255, 0.15);
	transform: translateY(-8px);
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(0, 240, 255, 0.08);
}

.service-card-v2:hover::before {
	transform: scaleX(1);
}

.service-card-v2:hover::after {
	opacity: 1;
}

.service-icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(0, 240, 255, 0.08);
	border: 1px solid rgba(0, 240, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cyan-neon);
	transition: all 0.4s ease;
}

.service-card-v2:hover .service-icon-wrap {
	background: rgba(0, 240, 255, 0.15);
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
	transform: scale(1.05);
}

/* ============================================
   PORTFOLIO / CASE STUDIES
   ============================================ */
.case-study-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.case-study-card:hover {
	border-color: rgba(0, 240, 255, 0.2);
	transform: translateY(-8px);
	box-shadow:
		0 25px 50px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(0, 240, 255, 0.08);
}

.case-study-image {
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-study-card:hover .case-study-image {
	transform: scale(1.05);
}

/* ============================================
   PROCESS SECTION
   ============================================ */
.process-line {
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(0, 240, 255, 0.15) 10%,
		rgba(0, 240, 255, 0.3) 50%,
		rgba(0, 240, 255, 0.15) 90%,
		transparent 100%
	);
}

.process-dot {
	background: linear-gradient(135deg, var(--cyan-neon), var(--cyan-mid));
	color: var(--navy-deep);
	box-shadow:
		0 0 20px rgba(0, 240, 255, 0.3),
		0 0 40px rgba(0, 240, 255, 0.1);
	transition: all 0.4s ease;
}

.process-step:hover .process-dot {
	box-shadow:
		0 0 30px rgba(0, 240, 255, 0.5),
		0 0 60px rgba(0, 240, 255, 0.2);
	transform: scale(1.1);
}

.process-step-content {
	transition: all 0.3s ease;
}

.process-step:hover .process-step-content h3 {
	color: var(--cyan-bright);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.testimonial-card::before {
	content: '\201C';
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 4rem;
	line-height: 1;
	color: rgba(0, 240, 255, 0.06);
	font-family: Georgia, serif;
	pointer-events: none;
}

.testimonial-card:hover {
	border-color: rgba(0, 240, 255, 0.2);
	transform: translateY(-6px);
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.4),
		0 0 30px rgba(0, 240, 255, 0.06);
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-cta-card {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(59, 130, 246, 0.04));
	border: 1px solid rgba(0, 240, 255, 0.1);
	backdrop-filter: blur(10px);
}

.contact-detail-item {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	transition: all 0.3s ease;
	text-decoration: none;
}

.contact-detail-item:hover {
	border-color: rgba(0, 240, 255, 0.2);
	background: rgba(0, 240, 255, 0.05);
}

.contact-form {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(10px);
}

.contact-input {
	background: rgba(5, 8, 22, 0.6);
	border: 1px solid rgba(0, 240, 255, 0.08);
	transition: all 0.3s ease;
}

.contact-input:focus {
	border-color: rgba(0, 240, 255, 0.4);
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.08);
	background: rgba(5, 8, 22, 0.8);
}

.contact-input::placeholder {
	color: #475569;
}

/* Select styling */
select.contact-input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2306b6d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
}

/* ============================================
   FINAL CTA SECTION
   ============================================ */
.final-cta-section {
	background: var(--navy-dark);
	position: relative;
}

.final-cta-bg {
	background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 70%);
}

.final-cta-section::before,
.final-cta-section::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
}

.final-cta-section::before {
	top: 0;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.15), transparent);
}

.final-cta-section::after {
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
}

/* ============================================
   PROGRESS BAR (top of page)
   ============================================ */
.progress-bar {
	background: var(--gradient-cyan);
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 640px) {
	.hero-section {
		min-height: 100svh;
	}

	.hero-orb {
		opacity: 0.2;
	}

	.hero-orb-1 {
		width: 200px;
		height: 200px;
	}

	.hero-orb-2 {
		width: 150px;
		height: 150px;
	}

	.hero-orb-3 {
		display: none;
	}
}

@media (max-width: 768px) {
	.section-glow {
		width: 300px;
		height: 300px;
		opacity: 0.05;
	}
}

@media (min-width: 1024px) {
	.process-timeline {
		padding: 0 2rem;
	}
}

/* ============================================
   SMOOTH SECTION SEPARATORS
   ============================================ */
.about-section::before,
.services-section::before,
.portfolio-section::before,
.process-section::before,
.testimonials-section::before,
.contact-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.08), transparent);
}

/* ============================================
   SELECTION COLOR
   ============================================ */
::selection {
	background: rgba(0, 240, 255, 0.25);
	color: #fff;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: var(--navy-deep);
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.2);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.4);
}

/* ============================================
   UTILITY ANIMATIONS
   ============================================ */
@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes pulse-glow {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
	}
	50% {
		box-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.hero-orb,
	.scroll-dot {
		animation: none;
	}
}