/* ════════════════════════════════════════════════════════════════════
   tw-hover.css  —  thelaywala.com
   Sirf hover. Koi JavaScript nahi, koi markup nahi badalta.

   Install: header.php ki pehli line
       <link rel="stylesheet" href="/assets/tw-hover.css">
   Hatana ho to bas wahi line delete kar dein.

   ── Ek hi gesture, poore page par ──────────────────────────────────
   Blogs page ke card ka hover pehle se acha hai, is liye naya kuch
   nahi gharha — wahi gesture har section par utha liya hai:

       card 8px uthta hai
       border #8FB6D8 ho jata hai
       neeche shadow parti hai
       upar 3px ki gradient lakeer BAAYEIN se aa kar bhar jati hai

   Lakeer ka rukh badalna asal cheez hai: idle mein `transform-origin`
   dayein hai aur hover par baayein — is liye aate waqt wo baayein se
   khulti hai aur jaate waqt baayein hi ki taraf simat ti hai, aage
   peeche nahi phisalti.

   Easing bhi blogs wali hi hai: cubic-bezier(.2,.7,.3,1)
   ════════════════════════════════════════════════════════════════════ */

:root {
	--tw-h-navy: #243A5E;
	--tw-h-slate: #415678;
	--tw-h-mid: #5F86A6;
	--tw-h-sky: #8FB6D8;
	--tw-h-green: #2E9E6B;

	/* blogs page ka easing — poore page mein wahi */
	--tw-h-pop: cubic-bezier(.2, .7, .3, 1);
	--tw-h-wipe: cubic-bezier(.4, 0, .2, 1);

	--tw-h-shadow: 0 22px 44px rgba(36, 58, 94, .16);
	--tw-h-rule: linear-gradient(90deg, #8FB6D8 0%, #2E9E6B 100%);
}


/* ════════════ 1. TRANSCRIPT CARDS  (#ai-agent) ═════════════════════ */

#ai-agent .tw-thread {
	position: relative;
	overflow: hidden;
	transition:
		transform .35s var(--tw-h-pop),
		box-shadow .35s ease,
		border-color .3s ease;
}

#ai-agent .tw-thread::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--tw-h-rule);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--tw-h-wipe);
	z-index: 2;
}

#ai-agent .tw-thread:hover {
	transform: translateY(-8px);
	border-color: var(--tw-h-sky);
	box-shadow: var(--tw-h-shadow);
}

#ai-agent .tw-thread:hover::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Bheetar ke bubbles halka sa khulte hain — navy baayein, safed dayein.
   Sirf card uthe aur andar sab jama rahe, wo bejaan lagta hai.        */
#ai-agent .tw-msg {
	transition: transform .4s var(--tw-h-pop), box-shadow .4s ease;
}

#ai-agent .tw-thread:hover .tw-msg-out {
	transform: translateX(-3px);
	box-shadow: 0 10px 22px -12px rgba(36, 58, 94, .5);
}

#ai-agent .tw-thread:hover .tw-msg-in {
	transform: translateX(3px);
}

#ai-agent .tw-msg-meta i {
	display: inline-block;
	transition: transform .4s var(--tw-h-pop);
}

#ai-agent .tw-thread:hover .tw-msg-meta i {
	transform: scale(1.22);
}

/* neeche wali capability list */
#ai-agent .tw-cap li {
	transition: transform .3s var(--tw-h-pop), color .3s ease;
}

#ai-agent .tw-cap li:hover {
	transform: translateX(4px);
	color: var(--tw-h-navy);
}

#ai-agent .tw-cap li i {
	transition: transform .3s var(--tw-h-pop);
}

#ai-agent .tw-cap li:hover i {
	transform: scale(1.2);
}


/* ════════════ 2. SERVICE CARDS ═════════════════════════════════════
   Yahan upar wali lakeer nahi lagayi — card ka apna background hover
   par #f8f8fc se #415678 ho jata hai, aur us ke upar lakeer kho jati
   hai. Is liye in ka apna nishaan: chaaron taraf gradient hairline.  */

.services .content {
	position: relative;
	transition:
		background .35s ease,
		transform .35s var(--tw-h-pop),
		box-shadow .35s ease;
}

.services .content:hover {
	transform: translateY(-8px);
	box-shadow:
		0 22px 44px rgba(36, 58, 94, .22),
		0 0 54px -26px rgba(46, 158, 107, .4);
}

/* Do masks ko `exclude` se composite karke 1.5px ka ring bachta hai —
   card ka apna background chhirta nahi, is liye purana hover chalta
   rehta hai.                                                          */
.services .content::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(137deg, var(--tw-g1, #5F86A6) 0%, var(--tw-g2, #8FB6D8) 45%, var(--tw-g3, #2E9E6B) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.services .content:hover::after {
	opacity: 1;
}

/* Chhe cards, chhe alag gradients — warna chhe copies lagti hain. */
.services .row:nth-child(1) .col-md-4:nth-child(1) .content { --tw-g1: #5F86A6; --tw-g2: #8FB6D8; --tw-g3: #2E9E6B }
.services .row:nth-child(1) .col-md-4:nth-child(2) .content { --tw-g1: #2E9E6B; --tw-g2: #8FD8C0; --tw-g3: #5F86A6 }
.services .row:nth-child(1) .col-md-4:nth-child(3) .content { --tw-g1: #415678; --tw-g2: #8FB6D8; --tw-g3: #5F86A6 }
.services .row:nth-child(2) .col-md-4:nth-child(1) .content { --tw-g1: #5F86A6; --tw-g2: #B8D4EA; --tw-g3: #243A5E }
.services .row:nth-child(2) .col-md-4:nth-child(2) .content { --tw-g1: #243A5E; --tw-g2: #8FB6D8; --tw-g3: #2E9E6B }
.services .row:nth-child(2) .col-md-4:nth-child(3) .content { --tw-g1: #2E9E6B; --tw-g2: #B8D4EA; --tw-g3: #415678 }

.services .content .tw-svc-icon {
	transition: transform .35s var(--tw-h-pop);
}

.services .content:hover .tw-svc-icon {
	transform: translateY(-5px) scale(1.08);
}


/* ════════════ 3. PROCESS STEPS ═════════════════════════════════════ */

/* Yahan lakeer NEECHE hai, baaki cards se ulta. Do wajah:

   1. Card ke upar beech mein .tw-step-num ka gol badge baitha hai
      (top: -16px). Lakeer uske dono taraf se nikalti thi aur lagta tha
      jaise toot gayi ho.
   2. Wahi badge card ke bahar hai, is liye `overflow: hidden` bhi nahi
      lag sakta — wo badge ko aadha kaat deta hai.

   Neeche kuch nahi baitha, is liye lakeer poori saaf chalti hai. Dono
   taraf 14px andar rakhi hai (jitna card ka radius hai) taake gol
   kinaron se bahar na nikle — clip ki zaroorat hi nahi parti.          */
#process-work .tw-step {
	position: relative;
	transition:
		transform .35s var(--tw-h-pop),
		box-shadow .35s ease,
		border-color .3s ease;
}

#process-work .tw-step::before {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--tw-h-rule);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--tw-h-wipe);
	z-index: 2;
}

#process-work .tw-step:hover {
	transform: translateY(-8px);
	border-color: var(--tw-h-sky);
	box-shadow: var(--tw-h-shadow);
}

#process-work .tw-step:hover::before {
	transform: scaleX(1);
	transform-origin: left center;
}

#process-work .tw-step-num {
	transition: transform .35s var(--tw-h-pop), box-shadow .35s ease;
}

#process-work .tw-step:hover .tw-step-num {
	transform: translateX(-50%) scale(1.18);
	box-shadow: 0 0 0 6px rgba(95, 134, 166, .18);
}

#process-work .tw-step > i {
	display: inline-block;
	transition: transform .35s var(--tw-h-pop), color .3s ease;
}

#process-work .tw-step:hover > i {
	transform: scale(1.14) rotate(-4deg);
	color: var(--tw-h-navy);
}


/* ════════════ 4. PRICING ═══════════════════════════════════════════ */

#pricing .tw-included {
	position: relative;
	overflow: hidden;
	transition:
		transform .35s var(--tw-h-pop),
		box-shadow .35s ease,
		border-color .3s ease;
}

#pricing .tw-included::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--tw-h-rule);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--tw-h-wipe);
	z-index: 2;
}

#pricing .tw-included:hover {
	transform: translateY(-6px);
	border-color: var(--tw-h-sky);
	box-shadow: var(--tw-h-shadow);
}

#pricing .tw-included:hover::before {
	transform: scaleX(1);
	transform-origin: left center;
}

#pricing .tw-included li {
	transition: transform .3s var(--tw-h-pop), color .3s ease;
}

#pricing .tw-included li:hover {
	transform: translateX(4px);
	color: var(--tw-h-navy);
}

#pricing .tw-included li i {
	transition: transform .3s var(--tw-h-pop);
}

#pricing .tw-included li:hover i {
	transform: scale(1.25);
}

/* Quote card navy hai. Iska ::before pehle se istemaal mein hai (baayein
   taraf 4px ka bar), is liye lakeer ::after par gayi hai. Gradient bhi
   halka safed, warna navy par #243A5E nazar hi nahi aata.            */
#pricing .tw-quote {
	transition: transform .35s var(--tw-h-pop), box-shadow .4s ease;
}

#pricing .tw-quote::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, rgba(143, 182, 216, .9) 0%, rgba(46, 158, 107, 1) 100%);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--tw-h-wipe);
	z-index: 2;
}

#pricing .tw-quote:hover {
	transform: translateY(-5px);
	box-shadow: 0 30px 64px -26px rgba(36, 58, 94, .62);
}

#pricing .tw-quote:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}


/* ════════════ 5. ABOUT CARD ════════════════════════════════════════
   Andar inline SVG hai, is liye lift wrapper par lagta hai. Radius
   aur overflow yahan khud lagane parte hain — wrapper ke paas apna
   koi nahi tha.                                                       */

#about .content-image {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	transition: transform .35s var(--tw-h-pop), box-shadow .35s ease;
}

#about .content-image::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--tw-h-rule);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--tw-h-wipe);
	z-index: 2;
}

#about .content-image:hover {
	transform: translateY(-8px);
	box-shadow: var(--tw-h-shadow);
}

#about .content-image:hover::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* daayein taraf ki bullet list */
#about .content ul li,
#about .content p + ul li {
	transition: transform .3s var(--tw-h-pop);
}

#about .content ul li:hover {
	transform: translateX(4px);
}


/* ════════════ 6. FAQ ═══════════════════════════════════════════════
   `:hover` par border pehle se #8FB6D8 hota tha. Ab lift aur lakeer
   bhi. Khula hua item lift nahi karta — jawab parhte waqt card ka
   hilna khalal daalta hai.                                            */

#faq-home .tw-hfaq-item {
	position: relative;
	overflow: hidden;
	transition:
		transform .35s var(--tw-h-pop),
		box-shadow .35s ease,
		border-color .3s ease;
}

#faq-home .tw-hfaq-item::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--tw-h-rule);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--tw-h-wipe);
	z-index: 2;
}

#faq-home .tw-hfaq-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--tw-h-shadow);
}

#faq-home .tw-hfaq-item:hover::before,
#faq-home .tw-hfaq-item[open]::before {
	transform: scaleX(1);
	transform-origin: left center;
}

#faq-home .tw-hfaq-item[open]:hover {
	transform: none;
}

/* + ka nishaan hover par ghoomta hai */
#faq-home .tw-hfaq-mark {
	transition: transform .35s var(--tw-h-pop), background .3s ease;
}

#faq-home .tw-hfaq-item:hover .tw-hfaq-mark {
	transform: rotate(90deg);
}

#faq-home .tw-hfaq-item[open]:hover .tw-hfaq-mark {
	transform: none;
}

#faq-home .tw-hfaq-item > summary h4 {
	transition: color .25s ease;
}

#faq-home .tw-hfaq-item:hover > summary h4 {
	color: #16263F;
}


/* ════════════ 7. BUTTONS ═══════════════════════════════════════════
   Purana .button:hover sirf opacity .5 karta tha — lagta tha button
   disable ho gaya. Ab uthta hai aur glow karta hai, aur roshni ka ek
   tukra aar paar guzarta hai.                                         */

.button {
	position: relative;
	overflow: hidden;
	transition:
		transform .35s var(--tw-h-pop),
		box-shadow .35s ease,
		background .35s ease;
}

.button:hover,
.button:focus-visible {
	opacity: 1;
	background: var(--tw-h-navy);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 18px 32px -14px rgba(36, 58, 94, .72);
}

.button.button-secondary:hover {
	background: var(--tw-h-slate);
	border-color: var(--tw-h-slate);
	color: #fff;
}

.button::after,
#pricing .tw-call::after,
#pricing .tw-book::after,
.tw-nav-cta::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
	transform: skewX(-18deg);
	transition: left .75s var(--tw-h-pop);
	pointer-events: none;
}

.button:hover::after,
#pricing .tw-call:hover::after,
#pricing .tw-book:hover::after,
.tw-nav-cta:hover::after {
	left: 140%;
}

/* phone number — sabse bara CTA, sabse zyada react karta hai */
#pricing .tw-call {
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--tw-h-pop), box-shadow .3s ease;
}

#pricing .tw-call:hover {
	transform: translateY(-4px) scale(1.015);
	box-shadow: 0 18px 38px rgba(0, 0, 0, .3);
}

/* safed button par safed sheen nazar nahi aati — yahan navy rakhi hai */
#pricing .tw-call::after {
	background: linear-gradient(100deg, transparent, rgba(36, 58, 94, .14), transparent);
}

#pricing .tw-call i {
	display: inline-block;
	transition: transform .35s var(--tw-h-pop);
}

#pricing .tw-call:hover i {
	transform: rotate(-12deg) scale(1.15);
}

#pricing .tw-book {
	position: relative;
	overflow: hidden;
	transition: background .3s ease, border-color .3s ease, transform .3s var(--tw-h-pop);
}

#pricing .tw-book:hover {
	transform: translateY(-3px);
}


/* ════════════ 8. NAVBAR + OFFER STRIP ══════════════════════════════ */

.navbar .navbar-nav li .nav-link {
	position: relative;
}

.navbar .navbar-nav li .nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--tw-h-mid);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .35s var(--tw-h-wipe);
}

.navbar .navbar-nav li:hover .nav-link::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.tw-nav-cta {
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--tw-h-pop), box-shadow .3s ease;
}

.tw-nav-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(36, 58, 94, .7);
}

.tw-offer a {
	display: inline-block;
	transition: transform .3s var(--tw-h-pop);
}

.tw-offer a:hover {
	transform: translateX(3px);
}


/* ════════════ 9. LOGO MARQUEE ══════════════════════════════════════ */

.tw-chip {
	transition: transform .35s var(--tw-h-pop), box-shadow .35s ease;
}

.tw-chip:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45);
}


/* ════════════ 10. TOUCH SCREENS ════════════════════════════════════
   Phone par hover hota hi nahi. Sticky-hover se card chhoone ke baad
   utha hi reh jata hai, is liye wahan sab band.                       */

@media (hover: none) {

	#ai-agent .tw-thread:hover,
	.services .content:hover,
	#process-work .tw-step:hover,
	#pricing .tw-included:hover,
	#pricing .tw-quote:hover,
	#about .content-image:hover,
	#faq-home .tw-hfaq-item:hover,
	.button:hover,
	.tw-nav-cta:hover,
	.tw-chip:hover {
		transform: none;
		box-shadow: none;
	}

	#ai-agent .tw-thread:hover::before,
	#process-work .tw-step:hover::before,
	#pricing .tw-included:hover::before,
	#pricing .tw-quote:hover::after,
	#about .content-image:hover::before,
	#faq-home .tw-hfaq-item:hover::before {
		transform: scaleX(0);
	}

	/* khula hua FAQ item phir bhi apni lakeer rakhta hai */
	#faq-home .tw-hfaq-item[open]::before {
		transform: scaleX(1);
	}
}


/* ════════════ 11. REDUCED MOTION ═══════════════════════════════════
   Jis banday ne OS mein motion band ki hai: rang aur border rehte
   hain, harkat khatam. Kuch chhupta nahi.                             */

@media (prefers-reduced-motion: reduce) {

	#ai-agent .tw-thread,
	#ai-agent .tw-msg,
	#ai-agent .tw-cap li,
	.services .content,
	.services .content .tw-svc-icon,
	#process-work .tw-step,
	#process-work .tw-step-num,
	#process-work .tw-step > i,
	#pricing .tw-included,
	#pricing .tw-included li,
	#pricing .tw-quote,
	#pricing .tw-call,
	#pricing .tw-book,
	#about .content-image,
	#faq-home .tw-hfaq-item,
	#faq-home .tw-hfaq-mark,
	.button,
	.tw-nav-cta,
	.tw-chip {
		transition: background .2s ease, color .2s ease,
			border-color .2s ease, box-shadow .2s ease !important;
	}

	#ai-agent .tw-thread:hover,
	#ai-agent .tw-thread:hover .tw-msg-out,
	#ai-agent .tw-thread:hover .tw-msg-in,
	#ai-agent .tw-cap li:hover,
	.services .content:hover,
	.services .content:hover .tw-svc-icon,
	#process-work .tw-step:hover,
	#process-work .tw-step:hover > i,
	#pricing .tw-included:hover,
	#pricing .tw-included li:hover,
	#pricing .tw-quote:hover,
	#pricing .tw-call:hover,
	#pricing .tw-book:hover,
	#about .content-image:hover,
	#about .content ul li:hover,
	#faq-home .tw-hfaq-item:hover,
	#faq-home .tw-hfaq-item:hover .tw-hfaq-mark,
	.button:hover,
	.tw-nav-cta:hover,
	.tw-offer a:hover,
	.tw-chip:hover {
		transform: none !important;
	}

	#process-work .tw-step:hover .tw-step-num {
		transform: translateX(-50%) !important;
	}

	/* lakeeren turant, bina wipe ke */
	#ai-agent .tw-thread::before,
	#process-work .tw-step::before,
	#pricing .tw-included::before,
	#pricing .tw-quote::after,
	#about .content-image::before,
	#faq-home .tw-hfaq-item::before,
	.navbar .navbar-nav li .nav-link::after {
		transition: none !important;
	}

	.button::after,
	#pricing .tw-call::after,
	#pricing .tw-book::after,
	.tw-nav-cta::after {
		display: none;
	}
}