/* =========================================================
   Webdazy — Custom styles & animations
   Brand palette from DG Matrix logo
   ========================================================= */
:root {
	--navy: #021F41;
	--navy-700: #082E52;
	--purple: #29095C;
	--purple-500: #6d28d9;
	--magenta: #F536C2;
	--pink: #FE4A7A;
	--orange: #ED6C11;
	--amber: #FFA808;
}

html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, sans-serif; }
h1,h2,h3,h4,h5,h6,.font-display { font-family: "Poppins", sans-serif; }

/* ---------- Brand gradient text helper ---------- */
.text-gradient {
	background-image: linear-gradient(100deg, var(--purple-500), var(--magenta) 45%, var(--orange));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Gradient button ---------- */
.btn-gradient {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	padding: .7rem 1.5rem;
	border-radius: .85rem;
	color: #fff;
	background-image: linear-gradient(100deg, var(--purple-500), var(--magenta) 50%, var(--orange));
	background-size: 180% 100%;
	background-position: 0% 0%;
	box-shadow: 0 10px 25px -8px rgba(245,54,194,.5);
	transition: background-position .5s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-gradient:hover {
	background-position: 100% 0%;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -10px rgba(237,108,17,.55);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	padding: .7rem 1.5rem;
	border-radius: .85rem;
	color: var(--navy);
	border: 2px solid var(--navy);
	transition: all .25s ease;
}
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* ---------- Navigation links ---------- */
.nav-link,
.nav-list a {
	display: block;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: .95rem;
	color: var(--navy);
	padding: .6rem .9rem;
	border-radius: .65rem;
	position: relative;
	transition: color .25s ease, background .25s ease;
}
.nav-list a:hover,
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
	color: var(--magenta);
}
@media (min-width:1024px){
	.nav-list a::after {
		content:"";
		position:absolute;
		left:50%; bottom:.35rem;
		width:0; height:2px;
		background-image:linear-gradient(90deg,var(--magenta),var(--orange));
		transition:width .3s ease,left .3s ease;
	}
	.nav-list a:hover::after,
	.nav-list .current-menu-item > a::after,
	.nav-list .current_page_item > a::after { width:60%; left:20%; }
}
/* Mobile nav links get a tinted background on hover */
@media (max-width:1023px){
	.nav-list a:hover { background: rgba(245,54,194,.08); }
}

/* ---------- Header scrolled state ---------- */
#site-header.is-scrolled {
	box-shadow: 0 8px 40px rgba(2,31,65,.14);
}

/* ---------- Animated gradient background ---------- */
.animated-gradient {
	background: linear-gradient(115deg, var(--navy), var(--purple) 30%, var(--magenta) 60%, var(--orange));
	background-size: 280% 280%;
	animation: gradientShift 14s ease infinite;
}
@keyframes gradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Floating blurred blobs for hero depth */
.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	animation: floatBlob 12s ease-in-out infinite;
}
.blob-1 { width: 380px; height: 380px; background: var(--magenta); top: -80px; left: -60px; }
.blob-2 { width: 320px; height: 320px; background: var(--orange); bottom: -90px; right: -40px; animation-delay: -4s; }
.blob-3 { width: 280px; height: 280px; background: var(--purple-500); top: 40%; right: 30%; animation-delay: -8s; }
@keyframes floatBlob {
	0%,100% { transform: translate(0,0) scale(1); }
	33%     { transform: translate(30px,-40px) scale(1.08); }
	66%     { transform: translate(-25px,25px) scale(.95); }
}

/* Subtle grid pattern overlay */
.grid-overlay {
	background-image:
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 44px 44px;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Cards ---------- */
.feature-card {
	background:#fff;
	border:1px solid rgba(2,31,65,.07);
	border-radius:1.25rem;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 40px -22px rgba(2,31,65,.35);
	border-color: rgba(245,54,194,.35);
}
.icon-badge {
	display:inline-flex; align-items:center; justify-content:center;
	width:3.75rem; height:3.75rem; border-radius:1rem; color:#fff;
	background-image:linear-gradient(135deg,var(--purple-500),var(--magenta) 55%,var(--orange));
	box-shadow:0 12px 22px -10px rgba(245,54,194,.6);
}

/* Marquee for industries */
.marquee { overflow:hidden; }
.marquee__track { display:flex; gap:1rem; width:max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* WordPress core */
.sr-only:not(:focus):not(:focus-within){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link:focus{position:fixed;top:1rem;left:1rem;z-index:100;background:var(--navy);color:#fff;padding:.6rem 1rem;border-radius:.5rem;}
.wp-caption{max-width:100%;}
.aligncenter{margin-left:auto;margin-right:auto;display:block;}
.alignleft{float:left;margin-right:1.5rem;}
.alignright{float:right;margin-left:1.5rem;}

/* Prose for blog/page content */
.entry-content{line-height:1.8;color:#1f2937;}
.entry-content p{margin-bottom:1.1rem;}
.entry-content h2{font-size:1.6rem;font-weight:700;margin:1.8rem 0 .8rem;color:var(--navy);}
.entry-content h3{font-size:1.3rem;font-weight:700;margin:1.4rem 0 .6rem;color:var(--navy);}
.entry-content a{color:var(--magenta);text-decoration:underline;}
.entry-content ul{list-style:disc;padding-left:1.4rem;margin-bottom:1.1rem;}
.entry-content ol{list-style:decimal;padding-left:1.4rem;margin-bottom:1.1rem;}
.entry-content blockquote{border-left:4px solid var(--magenta);padding-left:1rem;font-style:italic;color:#475569;margin:1.2rem 0;}

@media (prefers-reduced-motion: reduce){
	.animated-gradient,.blob,.marquee__track{animation:none;}
	.reveal{opacity:1;transform:none;}
}