/* ==========================================================================
   Web CircleZ Pro — WOW Premium Experience Layer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animated hero — aurora, spotlight, premium badge
   -------------------------------------------------------------------------- */
.wcz-hero-live {
	position: relative;
	overflow: hidden;
}

.wcz-hero-aurora {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.wcz-hero-aurora-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	animation: wcz-aurora-drift 14s ease-in-out infinite alternate;
}

.wcz-hero-aurora-blob-1 {
	width: 420px;
	height: 420px;
	top: -80px;
	left: -60px;
	background: rgba(0, 194, 229, 0.35);
}

.wcz-hero-aurora-blob-2 {
	width: 360px;
	height: 360px;
	bottom: 10%;
	right: -40px;
	background: rgba(94, 234, 212, 0.25);
	animation-delay: -5s;
}

.wcz-hero-aurora-blob-3 {
	width: 280px;
	height: 280px;
	top: 40%;
	left: 45%;
	background: rgba(0, 153, 184, 0.2);
	animation-delay: -9s;
}

@keyframes wcz-aurora-drift {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(24px, -18px) scale(1.1); }
}

.wcz-hero-spotlight {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	background: radial-gradient(
		600px circle at var(--wcz-spot-x, 50%) var(--wcz-spot-y, 40%),
		rgba(0, 194, 229, 0.18) 0%,
		transparent 55%
	);
}

.wcz-hero-live-overlay {
	z-index: 3;
	background:
		linear-gradient(180deg, rgba(8, 15, 30, 0.55) 0%, rgba(8, 15, 30, 0.65) 45%, rgba(8, 15, 30, 0.82) 100%),
		radial-gradient(ellipse 90% 70% at 50% 20%, rgba(0, 194, 229, 0.12) 0%, transparent 60%);
}

.wcz-hero-live-stage > .wcz-container {
	position: relative;
	z-index: 4;
}

.wcz-hero-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto 20px;
	padding: 8px 18px 8px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--wcz-radius-full, 9999px);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.wcz-hero-live-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wcz-primary, #00b8d9);
	box-shadow: 0 0 12px rgba(0, 194, 229, 0.8);
	animation: wcz-pulse-dot 2s ease-in-out infinite;
}

@keyframes wcz-pulse-dot {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.25); opacity: 0.75; }
}

.wcz-hero-live-title {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
	max-width: 820px;
}

.wcz-hero-live-title .wcz-gradient-text {
	display: inline;
	background: linear-gradient(135deg, #5eead4 0%, #00c2e5 45%, #ffffff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.wcz-hero-live-subtitle {
	max-width: 640px;
	margin: 18px auto 28px;
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
	text-align: center;
}

.wcz-hero-live-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 36px;
}

.wcz-hero-live-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--wcz-radius-lg, 16px);
	transition: transform 0.4s var(--wcz-ease-out-expo, ease), border-color 0.3s ease, box-shadow 0.4s ease;
}

.wcz-hero-live-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(280px circle at var(--wcz-shine-x, 50%) var(--wcz-shine-y, 50%), rgba(255, 255, 255, 0.14), transparent 55%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.wcz-hero-live-item.is-shining::after,
.wcz-hero-live-item:hover::after {
	opacity: 1;
}

.wcz-hero-live-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	border-color: rgba(0, 194, 229, 0.5);
}

/* --------------------------------------------------------------------------
   Premium sections — glow orbs + reveal transitions
   -------------------------------------------------------------------------- */
.wcz-section-premium {
	position: relative;
	overflow: hidden;
}

html.wcz-wow-ready .wcz-section-premium {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.8s var(--wcz-ease-out-expo, ease), transform 0.8s var(--wcz-ease-out-expo, ease);
}

html.wcz-wow-ready .wcz-section-premium.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

.wcz-section-glow {
	position: absolute;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.35;
	pointer-events: none;
}

.wcz-section-glow--cyan {
	top: -120px;
	right: -80px;
	background: rgba(0, 194, 229, 0.25);
}

.wcz-section-glow--left {
	left: -120px;
	bottom: -80px;
	background: rgba(94, 234, 212, 0.2);
}

.wcz-section-divider {
	position: relative;
	height: 1px;
	max-width: var(--wcz-container, 1200px);
	margin: 0 auto;
	background: linear-gradient(90deg, transparent, rgba(0, 194, 229, 0.35), transparent);
}

/* --------------------------------------------------------------------------
   Glass cards with shine
   -------------------------------------------------------------------------- */
.wcz-service-card,
.wcz-quick-card,
.wcz-feature-showcase,
.wcz-testimonial-card,
.wcz-spec-card {
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
}

.wcz-pricing-card {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
}

.wcz-service-card::before,
.wcz-quick-card::before,
.wcz-feature-showcase::before,
.wcz-testimonial-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(400px circle at var(--wcz-shine-x, 50%) var(--wcz-shine-y, 0%), rgba(0, 194, 229, 0.1), transparent 50%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.wcz-service-card.is-shining::before,
.wcz-quick-card.is-shining::before,
.wcz-feature-showcase.is-shining::before,
.wcz-testimonial-card.is-shining::before,
.wcz-service-card:hover::before,
.wcz-quick-card:hover::before,
.wcz-feature-showcase:hover::before {
	opacity: 1;
}

.wcz-service-card.featured,
.wcz-pricing-card.featured,
.wcz-quick-card.featured {
	border-color: rgba(0, 194, 229, 0.4);
	box-shadow: var(--wcz-shadow-md, 0 8px 32px rgba(15, 23, 42, 0.08)), 0 0 0 1px rgba(0, 194, 229, 0.1);
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.wcz-faq-list {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wcz-faq-item {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--wcz-border, rgba(15, 23, 42, 0.08));
	border-radius: var(--wcz-radius-lg, 16px);
	box-shadow: var(--wcz-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wcz-faq-item[open] {
	border-color: rgba(0, 194, 229, 0.35);
	box-shadow: var(--wcz-shadow-glow, 0 8px 40px rgba(0, 184, 217, 0.15));
}

.wcz-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-family: var(--wcz-font-display);
	font-size: var(--wcz-text-md, 1rem);
	font-weight: 600;
	color: var(--wcz-text-heading, #0b1220);
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}

.wcz-faq-question::-webkit-details-marker {
	display: none;
}

.wcz-faq-question:hover {
	color: var(--wcz-primary, #00b8d9);
}

.wcz-faq-icon {
	flex-shrink: 0;
	color: var(--wcz-text-dim, #64748b);
	transition: transform 0.35s var(--wcz-ease-out-expo, ease), color 0.2s ease;
}

.wcz-faq-item[open] .wcz-faq-icon {
	transform: rotate(180deg);
	color: var(--wcz-primary, #00b8d9);
}

.wcz-faq-answer {
	padding: 0 22px 18px;
}

.wcz-faq-answer p {
	margin: 0;
	font-size: var(--wcz-text-base, 0.9375rem);
	line-height: 1.7;
	color: var(--wcz-text-muted, #475569);
}

/* --------------------------------------------------------------------------
   Premium CTA banner
   -------------------------------------------------------------------------- */
.wcz-cta-creative,
.wcz-cta-inner {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 6vw, 64px);
	border-radius: var(--wcz-radius-xl, 24px);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 251, 254, 0.95) 100%);
	border: 1px solid rgba(0, 194, 229, 0.2);
	box-shadow: var(--wcz-shadow-xl, 0 20px 60px rgba(15, 23, 42, 0.1));
	text-align: center;
}

.wcz-cta-creative::before,
.wcz-cta-inner::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(0, 194, 229, 0.15) 0%, transparent 70%);
	pointer-events: none;
	animation: wcz-cta-glow 8s ease-in-out infinite alternate;
}

@keyframes wcz-cta-glow {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-30px, 20px); }
}

.wcz-cta-creative h2,
.wcz-cta-inner h2 {
	position: relative;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: 12px;
}

.wcz-cta-actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Navbar premium polish
   -------------------------------------------------------------------------- */
.wcz-header {
	transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

body.wcz-header-scrolled .wcz-header {
	box-shadow: 0 4px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 194, 229, 0.06);
}

.wcz-nav-list > li > a {
	position: relative;
}

.wcz-nav-list > li > a::before {
	content: '';
	position: absolute;
	inset: 6px 10px;
	border-radius: 8px;
	background: rgba(0, 194, 229, 0.08);
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: -1;
}

.wcz-nav-list > li > a:hover::before,
.wcz-nav-list > li.current-menu-item > a::before,
.wcz-nav-list > li.current_page_item > a::before {
	opacity: 1;
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   Footer premium
   -------------------------------------------------------------------------- */
.wcz-footer-cta-card {
	position: relative;
	overflow: hidden;
}

.wcz-footer-cta-mesh {
	animation: wcz-mesh-pan 20s linear infinite;
}

@keyframes wcz-mesh-pan {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-20px, -10px); }
}

/* --------------------------------------------------------------------------
   Buttons — shimmer + loading
   -------------------------------------------------------------------------- */
.wcz-btn-primary {
	position: relative;
	overflow: hidden;
}

.wcz-btn-primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -120%;
	width: 80%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
	transition: left 0.55s ease;
}

.wcz-btn-primary:hover::after {
	left: 140%;
}

.wcz-btn.is-loading {
	pointer-events: none;
	opacity: 0.75;
}

.wcz-btn.is-loading::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wcz-spin 0.7s linear infinite;
	vertical-align: middle;
}

@keyframes wcz-spin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Stats — premium glow numbers
   -------------------------------------------------------------------------- */
.wcz-stat-item {
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--wcz-border);
	border-radius: var(--wcz-radius-lg);
	padding: 28px 20px;
	backdrop-filter: blur(6px);
}

.wcz-stat-item strong {
	font-size: clamp(2rem, 4vw, 2.75rem);
	text-shadow: 0 0 40px rgba(0, 194, 229, 0.2);
}

/* --------------------------------------------------------------------------
   Tech chips — animated border on hover
   -------------------------------------------------------------------------- */
.wcz-tech-chip,
.wcz-service-tag {
	position: relative;
}

.wcz-tech-chip:hover,
.wcz-service-tag:hover {
	box-shadow: 0 0 20px rgba(0, 194, 229, 0.15);
}

/* --------------------------------------------------------------------------
   Page hero banners
   -------------------------------------------------------------------------- */
.wcz-page-hero-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(11, 18, 32, 0.4) 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Forms & modals — polished states
   -------------------------------------------------------------------------- */
.wcz-form input,
.wcz-form textarea,
.wcz-form select,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.wcz-form input:focus,
.wcz-form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	border-color: rgba(0, 194, 229, 0.5);
	box-shadow: 0 0 0 3px rgba(0, 194, 229, 0.12);
}

.wcz-form-empty,
.wcz-empty-state {
	padding: 48px 24px;
	text-align: center;
	border-radius: var(--wcz-radius-lg);
	background: rgba(255, 255, 255, 0.7);
	border: 1px dashed rgba(0, 194, 229, 0.25);
	color: var(--wcz-text-muted);
}

.wcz-portfolio-lightbox {
	backdrop-filter: blur(8px);
}

.wcz-portfolio-lightbox-dialog {
	box-shadow: 0 25px 80px rgba(15, 23, 42, 0.25);
	animation: wcz-modal-in 0.35s var(--wcz-ease-out-expo, ease);
}

@keyframes wcz-modal-in {
	from { opacity: 0; transform: scale(0.96) translateY(12px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.wcz-cta-banner--geometric .wcz-cta-creative {
	background:
		linear-gradient(135deg, rgba(11, 18, 32, 0.96) 0%, rgba(15, 30, 48, 0.96) 100%);
	border-color: rgba(0, 194, 229, 0.25);
	color: #fff;
}

.wcz-cta-banner--geometric .wcz-cta-creative h2,
.wcz-cta-banner--geometric .wcz-cta-creative p {
	color: #fff;
}

.wcz-cta-banner--geometric .wcz-cta-creative p {
	opacity: 0.82;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.wcz-hero-live-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wcz-hero-live-actions .wcz-btn {
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}

	.wcz-hero-aurora-blob {
		opacity: 0.3;
	}

	.wcz-section-glow {
		width: 280px;
		height: 280px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcz-hero-aurora-blob,
	.wcz-hero-live-badge-dot,
	.wcz-footer-cta-mesh,
	.wcz-cta-creative::before {
		animation: none;
	}

	.wcz-section-premium,
	html.wcz-wow-ready .wcz-section-premium {
		opacity: 1;
		transform: none;
	}
}