/* ==========================================================
   Visignature Motion — Design System
   ========================================================== */

:root{
	--bg:#06070d;
	--bg-alt:#0b0d18;
	--surface: rgba(255,255,255,.05);
	--surface-border: rgba(255,255,255,.09);
	--text:#eef0f6;
	--text-muted:#9aa1b8;
	--accent-1:#5b8cff;
	--accent-2:#8b5cff;
	--accent-3:#ff5ca8;
	--gradient: linear-gradient(120deg,var(--accent-1),var(--accent-2) 55%,var(--accent-3));
	--radius:20px;
	--radius-sm:12px;
	--container:1180px;
	--ease:cubic-bezier(.16,.84,.44,1);
}

/* ---------- Base ---------- */
body{
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	background:var(--bg);
	color:var(--text);
	line-height:1.6;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
	font-family:'Space Grotesk','Inter',sans-serif;
	line-height:1.15;
	margin:0 0 .6em;
	letter-spacing:-.01em;
}
p{margin:0 0 1em;color:var(--text-muted);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

::selection{background:var(--accent-2);color:#fff;}

/* subtle grain so flat dark backgrounds don't look cheap/banding */
.noise-overlay{
	position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.03;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex;align-items:center;gap:.5em;
	padding:.85em 1.6em;border-radius:100px;
	font-weight:600;font-size:.95rem;text-decoration:none;
	transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s;
	border:1px solid transparent;cursor:pointer;white-space:nowrap;
}
.btn-primary{
	background:var(--gradient);
	background-size:200% 200%;
	color:#fff;
	box-shadow:0 8px 30px -8px rgba(139,92,255,.6);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 40px -8px rgba(139,92,255,.8);background-position:100% 0;}
.btn-ghost{background:transparent;border-color:var(--surface-border);color:var(--text);}
.btn-ghost:hover{background:var(--surface);transform:translateY(-3px);}
.btn-lg{padding:1.05em 2.1em;font-size:1.02rem;}
.btn-header{display:none;}
@media(min-width:960px){.btn-header{display:inline-flex;}}

/* ---------- Header ---------- */
.site-header{
	position:sticky;top:0;z-index:50;
	backdrop-filter:blur(16px) saturate(140%);
	background:rgba(6,7,13,.55);
	border-bottom:1px solid rgba(255,255,255,.06);
	transition:background .3s;
}
.header-inner{
	display:flex;align-items:center;justify-content:space-between;
	height:76px;gap:24px;
}
.site-logo{display:flex;align-items:center;gap:.6em;text-decoration:none;flex-shrink:0;max-width:60%;overflow:hidden;}
.site-logo img{max-height:44px;width:auto;}
/* Logo — constrained everywhere the custom logo is output (header + footer),
   regardless of the original uploaded image resolution. Uses !important
   because WordPress core prints inline width/height attributes on the
   <img> tag itself, which otherwise compete with stylesheet rules. */
.site-header .custom-logo-link,
.site-footer .custom-logo-link{
	display:inline-flex;
	max-width:160px;
}
.site-logo img,
.custom-logo-link img,
.footer-brand img{
	max-height:44px !important;
	max-width:160px !important;
	width:auto !important;
	height:auto !important;
	object-fit:contain;
}
@media (max-width:600px){
	.site-logo img,
	.custom-logo-link img,
	.footer-brand img{
		max-height:36px !important;
		max-width:130px !important;
	}
}
.logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.site-nav{display:none;}
.nav-menu{list-style:none;display:flex;gap:2.2rem;margin:0;padding:0;}
.nav-menu a{text-decoration:none;color:var(--text-muted);font-weight:500;font-size:.95rem;position:relative;transition:color .25s;}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gradient);transition:width .3s var(--ease);}
.nav-menu a:hover{color:var(--text);}
.nav-menu a:hover::after{width:100%;}
@media(min-width:960px){.site-nav{display:block;}}

.menu-toggle{
	display:flex;flex-direction:column;justify-content:center;gap:5px;
	width:42px;height:42px;background:var(--surface);border:1px solid var(--surface-border);
	border-radius:10px;cursor:pointer;
}
.menu-toggle span{display:block;width:18px;height:2px;margin:0 auto;background:var(--text);transition:transform .3s,opacity .3s;}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(min-width:960px){.menu-toggle{display:none;}}

.mobile-nav{
	position:fixed;inset:0 0 0 auto;top:76px;width:min(320px,80vw);height:calc(100vh - 76px);
	background:rgba(8,9,18,.98);backdrop-filter:blur(20px);
	border-left:1px solid var(--surface-border);
	transform:translateX(100%);transition:transform .45s var(--ease);
	display:flex;flex-direction:column;padding:2.5rem 2rem;z-index:49;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.4rem;}
.mobile-nav-menu a{text-decoration:none;color:var(--text);font-size:1.15rem;font-weight:600;}

/* ---------- Hero ---------- */
.hero{
	position:relative;padding:9rem 0 7rem;overflow:hidden;
	min-height:92vh;display:flex;align-items:center;
}
@media (max-width:768px){
	.hero{
		padding:7.5rem 0 3rem;
		min-height:0;
	}
}
.hero-blobs{position:absolute;inset:0;z-index:0;}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:drift 18s ease-in-out infinite;}
.blob-1{width:520px;height:520px;background:var(--accent-1);top:-160px;left:-120px;}
.blob-2{width:460px;height:460px;background:var(--accent-2);bottom:-160px;right:-100px;animation-delay:-6s;}
.blob-3{width:340px;height:340px;background:var(--accent-3);top:30%;right:20%;animation-delay:-11s;}
.hero-blobs.subtle .blob{opacity:.28;}
@keyframes drift{
	0%,100%{transform:translate(0,0) scale(1);}
	33%{transform:translate(40px,-30px) scale(1.08);}
	66%{transform:translate(-30px,25px) scale(.95);}
}
.hero-inner{position:relative;z-index:1;max-width:820px;}
.eyebrow{
	display:inline-block;padding:.4em 1em;border-radius:100px;
	background:var(--surface);border:1px solid var(--surface-border);
	font-size:.85rem;color:var(--text-muted);margin-bottom:1.5rem;
}
.hero-heading{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:700;margin-bottom:1.1rem;}
.hero-heading .word{display:inline-block;opacity:0;transform:translateY(30px);animation:wordIn .8s var(--ease) forwards;animation-delay:var(--d,0s);}
@keyframes wordIn{to{opacity:1;transform:translateY(0);}}
.hero-sub{font-size:1.2rem;max-width:600px;color:var(--text-muted);margin-bottom:2.2rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}

.scroll-cue{position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);z-index:1;}
.scroll-cue span{display:block;width:22px;height:36px;border:2px solid var(--surface-border);border-radius:20px;position:relative;}
.scroll-cue span::before{content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;margin-left:-2px;background:var(--text-muted);border-radius:2px;animation:cue 1.8s ease infinite;}
@keyframes cue{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(12px);}}

/* ---------- Trust strip ---------- */
.trust-strip{padding:3.5rem 0;border-top:1px solid var(--surface-border);border-bottom:1px solid var(--surface-border);background:var(--bg-alt);}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;text-align:center;}
@media(min-width:800px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.stat-number{font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-suffix{font-size:1.4rem;font-weight:700;color:var(--accent-2);}
.stat p{margin-top:.4rem;font-size:.9rem;}

/* ---------- Section shared ---------- */
section{padding:6.5rem 0;}
.tag{display:inline-block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-1);font-weight:600;margin-bottom:.8rem;}
.section-head{max-width:640px;margin-bottom:3rem;}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}

/* ---------- About block ---------- */
.about-inner{display:grid;gap:3rem;align-items:center;}
@media(min-width:900px){.about-inner{grid-template-columns:1.1fr .9fr;}}
.about-copy h2{font-size:clamp(1.8rem,3.6vw,2.5rem);}
.lead-line{color:var(--text);font-weight:600;font-size:1.1rem;}
.glass-card{
	background:var(--surface);border:1px solid var(--surface-border);
	border-radius:var(--radius);padding:2rem;backdrop-filter:blur(10px);
}
.floaty{animation:floaty 6s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.glass-row{display:flex;align-items:center;gap:.8em;padding:.8em 0;border-bottom:1px solid var(--surface-border);font-weight:500;}
.glass-row:last-child{border-bottom:none;}
.dot{width:9px;height:9px;border-radius:50%;flex:none;}
.dot-green{background:#5be0a0;} .dot-blue{background:var(--accent-1);} .dot-purple{background:var(--accent-2);}

/* ---------- Cards / Why choose ---------- */
.cards-grid{display:grid;gap:1.6rem;grid-template-columns:1fr;}
@media(min-width:800px){.cards-grid{grid-template-columns:repeat(3,1fr);}}
.tilt-card{
	background:var(--surface);border:1px solid var(--surface-border);
	border-radius:var(--radius);padding:2.2rem;
	transition:transform .4s var(--ease),background .4s,border-color .4s;
}
.tilt-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.card-icon{font-size:2.2rem;margin-bottom:1rem;}
.tilt-card h3{font-size:1.25rem;}

/* ---------- Why website checklist ---------- */
.why-website{background:var(--bg-alt);}
.check-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;grid-template-columns:1fr;}
@media(min-width:700px){.check-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.check-grid{grid-template-columns:repeat(3,1fr);}}
.check-grid li{display:flex;gap:.8em;align-items:flex-start;font-weight:500;color:var(--text);}
.check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;}

/* ---------- Process ---------- */
.process-grid{display:grid;gap:2rem;grid-template-columns:1fr;}
@media(min-width:800px){.process-grid{grid-template-columns:repeat(3,1fr);}}
.process-step{position:relative;padding-top:1rem;}
.step-num{font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.25);display:block;margin-bottom:.6rem;}

/* ---------- Final CTA ---------- */
.final-cta{
	text-align:center;background:radial-gradient(ellipse at center, rgba(139,92,255,.18), transparent 70%);
	border-top:1px solid var(--surface-border);
}
.final-cta h2{font-size:clamp(1.9rem,4vw,2.8rem);}
.final-cta p{max-width:520px;margin:0 auto 2rem;}
.final-cta.compact{padding:4rem 0;}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;padding:7rem 0 3rem;overflow:hidden;}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);position:relative;z-index:1;}
.page-content{padding-top:1rem;}
.entry-thumb{border-radius:var(--radius);overflow:hidden;margin-bottom:2.5rem;}
.entry-body{max-width:760px;}
.entry-body h2,.entry-body h3{margin-top:1.6em;color:var(--text);}
.entry-body ul,.entry-body ol{color:var(--text-muted);padding-left:1.3em;}
.entry-body strong{color:var(--text);}
.entry-body img{border-radius:var(--radius-sm);margin:1.5rem 0;}
.entry-body hr{border:none;border-top:1px solid var(--surface-border);margin:2.2rem 0;}
.entry-body a{color:var(--accent-1);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;margin-bottom:3rem;}
@media(min-width:900px){.contact-grid{grid-template-columns:1.2fr .8fr;}}
.form-row{margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.5rem;}
.form-row label{font-weight:600;font-size:.9rem;color:var(--text) !important;}
.form-row input,.form-row textarea{
	background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-sm);
	padding:.9em 1em;color:var(--text);font-family:inherit;font-size:1rem;
	transition:border-color .25s,background .25s;
}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent-1);background:rgba(255,255,255,.08);}
.form-notice{padding:1em 1.2em;border-radius:var(--radius-sm);margin-bottom:1.5rem;font-weight:500;}
.form-notice.success{background:rgba(91,224,160,.12);border:1px solid rgba(91,224,160,.35);color:#8ff0c0;}
.form-notice.error{background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.35);color:#ff9b9b;}
.muted{color:var(--text-muted);font-size:.9rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--surface-border);padding:5rem 0 0;}
.footer-inner{display:grid;gap:2.5rem;grid-template-columns:1fr;padding-bottom:3rem;}
@media(min-width:800px){.footer-inner{grid-template-columns:1.3fr 1fr 1fr;}}
.footer-brand p{max-width:280px;}
.site-footer h4{font-size:1rem;margin-bottom:1rem;}
.footer-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.footer-menu a,.footer-col a{color:var(--text-muted);text-decoration:none;transition:color .25s;}
.footer-menu a:hover,.footer-col a:hover{color:var(--text);}
.footer-bottom{
	display:flex;align-items:center;justify-content:space-between;
	padding:1.6rem 0;border-top:1px solid var(--surface-border);font-size:.85rem;color:var(--text-muted);
}
.scroll-top{
	width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--surface-border);
	color:var(--text);cursor:pointer;transition:transform .3s,background .3s;
}
.scroll-top:hover{transform:translateY(-4px);background:var(--gradient);}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------- Mobile spacing pass ---------- */
@media (max-width:768px){
	section{padding:3.5rem 0;}
	.page-hero{padding:4.5rem 0 1.5rem;}
	.final-cta.compact{padding:2.5rem 0;}
	.site-footer{padding:2.5rem 0 0;}
	.hero-inner{max-width:100%;}
	.hero-actions{gap:.8rem;}
	.section-head{margin-bottom:2rem;}

	.hero{padding:6rem 0 3rem;}
	.eyebrow{margin-bottom:1rem;}
	.hero-heading{margin-bottom:.8rem;}
	.hero-sub{margin-bottom:1.6rem;}

	.trust-strip{padding:2.5rem 0;}
	.stats-grid{gap:1.75rem;}

	.about-inner{gap:2rem;}
	.glass-card{padding:1.5rem;}

	.cards-grid{gap:1.2rem;}
	.tilt-card{padding:1.75rem;}

	.process-grid{gap:1.5rem;}

	.footer-inner{gap:2rem;padding-bottom:2rem;}
	.site-footer h4{margin-bottom:.6rem;}

	.contact-grid{gap:1.75rem;margin-bottom:2rem;}

	.entry-thumb{margin-bottom:1.5rem;}

	.scroll-cue{display:none;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
	*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
	.reveal{opacity:1;transform:none;}
}