/* ==========================================================================
   8Web homepage — base styles, exactly as in the original static design.
   ========================================================================== */
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Helvetica, Arial, sans-serif; color: #1A2338; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: #007A3D; text-decoration: none; }
a:hover { color: #0E9C86; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

@keyframes mq-left { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes mq-right { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes ring-pulse { 0% { transform: scale(.75); opacity: .85; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes bar-grow { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes orbit-dot { 0% { transform: rotate(0deg) translateX(15px); } 100% { transform: rotate(360deg) translateX(15px); } }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (max-width: 1000px) {
	[data-two-col] { grid-template-columns: minmax(0, 1fr) !important; }
	[data-hero-form] { margin-bottom: 0 !important; }
}
@media (max-width: 900px) {
	[data-desktop-nav] { display: none !important; }
	[data-burger] { display: flex !important; }
	section { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 760px) {
	section { padding-top: 58px !important; padding-bottom: 58px !important; }
	#top { padding-top: 44px !important; }
	#pricing > div > div:last-of-type,
	#faq > div > div:last-of-type,
	#support-proof > div > div:nth-of-type(2),
	#revenue > div > div:nth-of-type(3),
	#platforms > div > div:last-of-type,
	#clients > div > div:last-of-type { grid-template-columns: minmax(0, 1fr) !important; }
	footer > div:first-of-type { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; }
	#soul a[style*="width: 340px"] { width: 80vw !important; margin-right: 14px !important; }
	.x8-support-card { width: calc(100vw - 48px) !important; margin-right: 14px !important; }
	.x8-header-cta { display: none !important; }
	.x8-hero-glow { display: none !important; }
	.x8-whatsapp-float { padding: 13px 16px !important; font-size: 13.5px !important; right: 14px !important; bottom: 14px !important; }
	[data-hero-form] { padding: 22px !important; }
	#contact > div > div:last-of-type { padding: 22px !important; }
}
@media (max-width: 480px) {
	section { padding-left: 16px !important; padding-right: 16px !important; }
	#top ul li { padding: 11px 12px !important; }
	a[style*="white-space: nowrap"]:not(.x8-whatsapp-float) { white-space: normal !important; text-align: center; }
	#soul a[style*="width: 340px"] { width: 86vw !important; }
	footer div[style*="justify-content: center"] { text-align: center !important; }
}

/* ==========================================================================
   Interactive states — replaces the design tool's runtime "style-hover"
   attributes with real CSS, and adds the header/drawer/FAQ/reviews
   behaviour that used to be driven by React state.
   ========================================================================== */

/* Header nav */
.x8-nav-link:hover,
.x8-nav-sublink:hover,
.x8-drawer a:hover { color: #007A3D !important; }
.x8-nav-sublink:hover { background: #E8F7EE !important; }

.x8-nav-dropdown { position: relative; }
.x8-nav-dropdown-panel { display: none; position: absolute; left: -14px; top: 100%; padding-top: 14px; z-index: 60; }
.x8-nav-dropdown:hover .x8-nav-dropdown-panel,
.x8-nav-dropdown.is-open .x8-nav-dropdown-panel { display: block; }

.x8-drawer { display: none; }
.x8-drawer.is-open { display: block !important; }
.x8-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.x8-burger.is-open span:nth-child(2) { opacity: 0; }
.x8-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.x8-burger span { transition: transform .2s ease, opacity .2s ease; }

/* Buttons */
.x8-btn-solid { display: inline-block; }
.x8-btn-solid:hover { background: #00602F !important; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,122,61,.28); }
.x8-btn-outline-light:hover { background: #FFFFFF !important; color: #00252E !important; transform: translateY(-2px); }
.x8-whatsapp-float:hover { background: #00602F !important; color: #FFFFFF !important; transform: translateY(-2px); }
.x8-social-icon:hover { background: #007A3D !important; border-color: #007A3D !important; color: #FFFFFF !important; transform: translateY(-2px); }
.x8-footer-link:hover { color: #0E9C86 !important; }

/* Cards */
.x8-card-lift-sm:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0,37,46,.09); border-color: #B5E3C6 !important; }
.x8-card-lift:hover { transform: translateY(-4px); border-color: #B5E3C6 !important; box-shadow: 0 18px 40px rgba(0,37,46,.1); }
.x8-card-dark-lift:hover { transform: translateY(-4px); border-color: rgba(95,227,192,.5) !important; background: rgba(255,255,255,.1) !important; }
.x8-package-card:hover { transform: translateY(-4px); border-color: rgba(95,227,192,.45) !important; box-shadow: 0 18px 40px rgba(0,12,16,.35); }
.x8-contact-method:hover { transform: translateX(4px); border-color: rgba(95,227,192,.5) !important; background: rgba(255,255,255,.09) !important; color: #fff !important; }
@media (max-width: 767px) {
	.x8-revenue-grid {
		grid-template-columns: 1fr !important;
	}
}
/* Marquees pause on hover/focus so visitors can read a logo or project card */
.x8-marquee:hover,
.x8-marquee:focus-within { animation-play-state: paused; }

/* FAQ accordion */
.x8-faq-toggle:hover { background: #EFF6F1; }
.x8-faq-item.is-open .x8-faq-answer { display: block !important; }
.x8-faq-item.is-open .x8-faq-sign { }

/* Gravity Forms embeds (hero + contact cards) — align with the card's input style */
.x8-gform-card .gfield_label,
.x8-gform-card .gform-field-label {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6B7689;
	font-weight: 600;
}
.x8-gform-card input[type="text"],
.x8-gform-card input[type="email"],
.x8-gform-card input[type="tel"],
.x8-gform-card input[type="number"],
.x8-gform-card select,
.x8-gform-card textarea {
	width: 100% !important;
	padding: 12px 13px !important;
	border: 1px solid #D7E2DA !important;
	border-radius: 9px !important;
	background: #FAFCFB !important;
	color: #1A2338 !important;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 15px;
}
.x8-gform-card input:focus,
.x8-gform-card select:focus,
.x8-gform-card textarea:focus {
	outline: none;
	border-color: #007A3D !important;
	background: #fff !important;
}
.x8-gform-card .gform_button {
	width: 100%;
	background: #007A3D !important;
	color: #FFFFFF !important;
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: -.01em;
	padding: 16px 28px !important;
	border: none !important;
	border-radius: 12px !important;
	cursor: pointer;
	transition: background .25s ease;
}
.x8-gform-card .gform_button:hover { background: #00602F !important; }
.x8-gform-card .validation_error,
.x8-gform-card .gfield_validation_message,
.x8-gform-card .gfield_description.validation_message { color: #A32E20 !important; font-size: 12.5px; }
.x8-gform-card .gform_confirmation_message {
	padding: 16px;
	border-radius: 12px;
	background: #E8F7EE;
	border: 1px solid #B5E3C6;
	color: #00602F;
	font-size: 14.5px;
	font-weight: 600;
}