<script>
	// Svelte 5 Runes for Language selection and Interactive ROI Calculator
	let currentLang = $state('EN'); // 'EN' or 'AR'
	
	// Svelte 5 Runes for Language selection

	// Translation Dictionary
	/** @type {Record<string, any>} */
	const i18n = {
		EN: {
			title: "Nabd Solutions | Smart Poultry Climate & Automation Systems",
			navHome: "Home",
			navAbout: "About Us",
			navSolutions: "Solutions",
			navProducts: "Products",
			navProjects: "Projects",
			navContact: "Contact",
			navPortal: "MyFarm Portal",
			heroTag: "Smart Control & Software Solutions for Poultry Operations",
			heroTitleLine1: "Autonomous Automation",
			heroTitleLine2: "Connected to the Cloud",
			heroDesc: "Nabd Solutions bridges zero-latency edge automation with secure enterprise cloud fleet management. Optimize feed conversion ratios, reduce mortality, and command your facilities remotely with absolute confidence.",
			btnSolutions: "Our Solutions",
			btnContact: "Contact Us",
			aboutTitle: "About Nabd Solutions",
			aboutSubtitle: "Pioneering industrial intelligence for high-stakes operational environments.",
			vision: "Vision",
			visionDesc: "To lead the global transition toward autonomous operational technology by building failsafe, energy-efficient control loops.",
			mission: "Mission",
			missionDesc: "To deliver resilient edge hardware and high-availability cloud frameworks that maximize operational uptime and efficiency.",
			values: "Core Values",
			valuesDesc: "Precision Engineering, Offline Autonomy, and Zero-Trust Enterprise Security.",
			solTitle: "Our Solutions & Services",
			solSubtitle: "State-of-the-art climate and automation systems engineered for modern poultry operations.",
			sol1: "Poultry Barn Automation",
			sol1Desc: "Custom PLC panel assemblies, automatic feeding/watering systems, and failsafe physical overrides for high-stakes poultry operations.",
			sol2: "Climate Control Systems",
			sol2Desc: "Multi-stage ventilation, smart fan controllers, heaters, misters, and static pressure sensors dynamically tuned for bird health.",
			sol3: "Enterprise Cloud Portals",
			sol3Desc: "Custom farm portals, real-time telemetry dashboards, centralized database records, and microclimate analytics.",
			sol4: "IoT Edge Telemetry",
			sol4Desc: "Secure MQTT telemetry stream for 14+ environmental sensors including Temperature, Humidity, CO2, NH3, and Dust.",
			sol5: "Zero-Trust VPN Support",
			sol5Desc: "Dedicated WireGuard/NetBird support tunnels allowing operators to securely request diagnostic logs and remote troubleshooting.",
			prodTitle: "Core Product Catalog",
			prodSubtitle: "Explore our modular hardware & software platforms designed to optimize your operations.",
			prod1: "Poultry Farm Control System",
			prod1Desc: "A complete autonomous environment control panel linking climate sensors, fan controllers, and automatic feeding scales with real-time cloud synchronization.",
			statsDepl: "120+ Systems Deployed",
			statsMon: "24/7 Active Monitoring",
			statsInd: "Poultry Farming Industry",
			contactTitle: "Initiate Your System Upgrade",
			contactSubtitle: "Request a custom product demonstration or engineering sales consultation today.",
			formName: "Full Name",
			formEmail: "Business Email",
			formCompany: "Company Name",
			formScope: "Scope / Requirements",
			formSubmit: "Request Sales Consultation",
			langBtn: "العربية"
		},
		AR: {
			title: "نبض للحلول | الأتمتة الصناعية وأنظمة التحكم في المناخ",
			navHome: "الرئيسية",
			navAbout: "من نحن",
			navSolutions: "حلولنا",
			navProducts: "المنتجات",
			navProjects: "المشاريع",
			navPricing: "الأسعار",
			navContact: "اتصل بنا",
			navPortal: "مزرعتي",
			heroTag: "أنظمة التحكم الذكي والحلول البرمجية للعمليات الحديثة",
			heroTitleLine1: "أتمتة ذاتية متكاملة",
			heroTitleLine2: "متصلة بالسحابة مباشرة",
			heroDesc: "تربط حلول نبض (Nabd Solutions) بين الأتمتة الطرفية ذات الاستجابة اللحظية وإدارة الأسطول السحابي للمؤسسات بأمان تام. حسّن معدلات تحويل الأعلاف، وقلل النفوق، وتحكم في منشآتك عن بُعد بثقة مطلقة.",
			btnSolutions: "حلولنا الذكية",
			btnContact: "اتصل بنا الآن",
			btnCalculator: "احسب عائد الاستثمار",
			aboutTitle: "عن شركة نبض للحلول",
			aboutSubtitle: "رائدون في الذكاء الصناعي للبيئات التشغيلية عالية المخاطر.",
			vision: "رؤيتنا",
			visionDesc: "قيادة التحول العالمي نحو التكنولوجيا التشغيلية الذاتية من خلال بناء حلقات تحكم موثوقة وموفرة للطاقة.",
			mission: "رسالتنا",
			missionDesc: "تقديم أجهزة طرفية مرنة وإطارات سحابية عالية الموثوقية تضمن استمرارية التشغيل والكفاءة القصوى.",
			values: "قيمنا الأساسية",
			valuesDesc: "الهندسة الدقيقة، الاستقلالية الكاملة دون اتصال بالإنترنت، والأمن السحابي الخالي من الثغرات.",
			solTitle: "حلولنا وخدماتنا التشغيلية",
			solSubtitle: "أحدث تكاملات التكنولوجيا التشغيلية وتكنولوجيا المعلومات المصممة للنطاقات الصناعية.",
			sol1: "الأتمتة الصناعية",
			sol1Desc: "لوحات التحكم PLC المخصصة، تصميم أنظمة SCADA، وتكامل خطوط الإنتاج والسيور في المصانع.",
			sol2: "أنظمة التحكم في المناخ",
			sol2Desc: "أتمتة مناخ مزارع الدواجن الذكية، وأنظمة التهوية متعددة المراحل، وتكامل التدفئة والتكييف.",
			sol3: "الحلول البرمجية للمؤسسات",
			sol3Desc: "بوابات الويب المخصصة، قواعد البيانات المؤسسية، لوحات التحكم الفورية، ومحركات التحليلات.",
			sol4: "إنترنت الأشياء والمراقبة عن بعد",
			sol4Desc: "استقبال بيانات الاستشعار الآمنة عبر بروتوكول MQTT، المحركات الطرفية، وتنبيهات التخطي التلقائية.",
			sol5: "الدعم الفني والصيانة",
			sol5Desc: "قنوات الدعم الفني الآمنة عبر NetBird VPN، فهرسة التقارير التشخيصية، ومساعدة فنية على مدار الساعة.",
			prodTitle: "كتالوج المنتجات الرئيسي",
			prodSubtitle: "اكتشف منصات الأجهزة والبرامج المعيارية المصممة لتحسين عملياتك بالكامل.",
			prod1: "نظام التحكم في مزارع الدواجن",
			prod1Desc: "لوحة تحكم بيئية ذاتية متكاملة تربط مستشعرات المناخ، وأجهزة التحكم في المراوح، وموازين التغذية التلقائية مع مزامنة سحابية فورية.",
			prod2: "أتمتة خطوط الإنتاج في المصانع",
			prod2Desc: "مزامنة السيور الناقلة من الجيل التالي، وتكامل خلايا التجميع الروبوتية، ولوحات مراقبة SCADA.",
			prod3: "أنظمة مراقبة الطاقة والأداء (ERP)",
			prod3Desc: "أنظمة ERP المتقدمة لمراقبة الأداء والقدرة الكهربائية، التي تدمج تصحيح معامل القدرة مع تحليلات استغلال الموارد.",
			prod4: "نظام إدارة المدارس الرقمي (DSMS)",
			prod4Desc: "جناح تعليمي رقمي متكامل يدير تسجيل الطلاب، الجداول الدراسية، رصد الدرجات، وبوابات تنبيهات أولياء الأمور.",
			comingSoon: "قريباً جداً",
			statsDepl: "أكثر من 120 نظاماً تم نشره",
			statsMon: "مراقبة نشطة على مدار الساعة",
			statsInd: "نخدم أكثر من 15 قطاعاً صناعياً",
			calcTitle: "حاسبة عائد الاستثمار التفاعلية",
			calcSubtitle: "قم بتعديل مقاييس مزارع الدواجن لحساب وفوراتك السنوية المخصصة مع أتمتة نبض.",
			calcFlock: "إجمالي حجم القطيع (في الدورة الواحدة)",
			calcEnergy: "تكلفة الطاقة المحلية ($ / كيلوواط ساعة)",
			calcCycles: "عدد دورات القطيع السنوية",
			calcSavings: "الوفورات السنوية المتوقعة",
			calcFeed: "وفر تحويل الأعلاف",
			calcMort: "تقليل معدل النفوق",
			calcElec: "تحسين استهلاك الكهرباء",
			calcPayback: "فترة استرداد المعدات المتوقعة",
			pricingTitle: "خطط تجارية واضحة ومعيارية",
			pricingSubtitle: "حزم تكامل مرنة تتناسب مع دورة حياة البنية التحتية التشغيلية ونموها.",
			price1: "الحزمة التجريبية (Pilot)",
			price1Desc: "مثالية لتقييم أنظمة الأتمتة في عنبر دواجن واحد أو محطة مصنع تجريبية.",
			price1Val: "$1,450",
			price2: "التوسع التجاري الشامل",
			price2Desc: "حزمة الأتمتة التجارية الكاملة مع قنوات VPN الآمنة المخصصة ومجموعات أجهزة التحكم.",
			price2Val: "$9,500",
			price3: "الخطة السحابية للمؤسسات",
			price3Desc: "تحليلات الأسطول الموحدة لجميع المزارع، تقارير Grafana المخصصة، وإدارة تحديثات OTA بالكامل.",
			price3Val: "$120",
			contactTitle: "ابدأ ترقية نظامك الآن",
			contactSubtitle: "اطلب عرضاً تجريبياً للمنتج أو استشارة هندسية وفنية مع فريق المبيعات اليوم.",
			formName: "الاسم الكامل",
			formEmail: "البريد الإلكتروني للعمل",
			formCompany: "اسم الشركة",
			formScope: "نطاق المشروع / المتطلبات التشغيلية",
			formSubmit: "طلب استشارة هندسية",
			langBtn: "English"
		}
	};
</script>

<svelte:head>
	<title>{i18n[currentLang].title}</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</svelte:head>

<div class="app-container" dir={currentLang === 'AR' ? 'rtl' : 'ltr'}>
	<!-- Navigation -->
	<nav class="navbar">
		<div class="logo">
			<img src="/company_logo.png" alt="Nabd Solutions" class="company-logo-img" />
		</div>
		<div class="nav-links">
			<a href="#about">{i18n[currentLang].navAbout}</a>
			<a href="#solutions">{i18n[currentLang].navSolutions}</a>
			
			<div class="dropdown">
				<button class="dropdown-btn">
					{i18n[currentLang].navProducts} <span class="dropdown-chevron">▼</span>
				</button>
				<div class="dropdown-content">
					<a href="/products/poultry-smart-control">
						{currentLang === 'AR' ? 'التحكم الذكي للدواجن' : 'Poultry Smart Control'}
					</a>
				</div>
			</div>
			
			<button class="lang-toggle" onclick={() => currentLang = currentLang === 'EN' ? 'AR' : 'EN'}>
				{i18n[currentLang].langBtn}
			</button>
			<a href="https://myfarm.nabd-co.com" class="portal-btn" target="_blank">
				{i18n[currentLang].navPortal}
			</a>
		</div>
	</nav>

	<!-- Hero Section with Background Video -->
	<header class="hero">
		<!-- Blurred decorative backglows -->
		<div class="glow-orb orb-1"></div>
		<div class="glow-orb orb-2"></div>

		<div class="hero-content">
			<div class="status-badge">
				<span class="status-dot animate-pulse"></span>
				{i18n[currentLang].heroTag}
			</div>
			<h1>{i18n[currentLang].heroTitleLine1} <br/><span class="gradient-text">{i18n[currentLang].heroTitleLine2}</span></h1>
			<p class="subtitle">{i18n[currentLang].heroDesc}</p>
			<div class="hero-actions">
				<a href="#solutions" class="primary-btn">{i18n[currentLang].btnSolutions}</a>
				<a href="#contact" class="secondary-btn">{i18n[currentLang].btnContact}</a>
			</div>
		</div>
		<div class="hero-visual">
			<div class="video-container glass-card">
				<video class="hero-video-element" src="/animation_onw.mp4" autoplay loop muted playsinline></video>
			</div>
		</div>
	</header>

	<!-- Operational Statistics -->
	<section class="stats-counter-section">
		<div class="stats-grid">
			<div class="stat-card glass-card">
				<span class="stat-icon">⚙️</span>
				<p>{i18n[currentLang].statsDepl}</p>
			</div>
			<div class="stat-card glass-card">
				<span class="stat-icon">📡</span>
				<p>{i18n[currentLang].statsMon}</p>
			</div>
			<div class="stat-card glass-card">
				<span class="stat-icon">🏭</span>
				<p>{i18n[currentLang].statsInd}</p>
			</div>
		</div>
	</section>

	<!-- About Us Section -->
	<section id="about" class="about-section">
		<h2 class="section-title">{i18n[currentLang].aboutTitle}</h2>
		<p class="section-subtitle">{i18n[currentLang].aboutSubtitle}</p>

		<div class="grid-3">
			<div class="glass-card about-card">
				<div class="about-icon gold-accent">👁️</div>
				<h3>{i18n[currentLang].vision}</h3>
				<p>{i18n[currentLang].visionDesc}</p>
			</div>
			<div class="glass-card about-card">
				<div class="about-icon gold-accent">🎯</div>
				<h3>{i18n[currentLang].mission}</h3>
				<p>{i18n[currentLang].missionDesc}</p>
			</div>
			<div class="glass-card about-card">
				<div class="about-icon gold-accent">🛡️</div>
				<h3>{i18n[currentLang].values}</h3>
				<p>{i18n[currentLang].valuesDesc}</p>
			</div>
		</div>
	</section>

	<!-- Solutions / Services -->
	<section id="solutions" class="solutions-section">
		<h2 class="section-title">{i18n[currentLang].solTitle}</h2>
		<p class="section-subtitle">{i18n[currentLang].solSubtitle}</p>

		<div class="solutions-grid">
			<div class="glass-card sol-card">
				<div class="sol-card-icon">⚡</div>
				<h3>{i18n[currentLang].sol1}</h3>
				<p>{i18n[currentLang].sol1Desc}</p>
			</div>
			<div class="glass-card sol-card">
				<div class="sol-card-icon">🌡️</div>
				<h3>{i18n[currentLang].sol2}</h3>
				<p>{i18n[currentLang].sol2Desc}</p>
			</div>
			<div class="glass-card sol-card">
				<div class="sol-card-icon">💻</div>
				<h3>{i18n[currentLang].sol3}</h3>
				<p>{i18n[currentLang].sol3Desc}</p>
			</div>
			<div class="glass-card sol-card">
				<div class="sol-card-icon">📡</div>
				<h3>{i18n[currentLang].sol4}</h3>
				<p>{i18n[currentLang].sol4Desc}</p>
			</div>
			<div class="glass-card sol-card">
				<div class="sol-card-icon">🛠️</div>
				<h3>{i18n[currentLang].sol5}</h3>
				<p>{i18n[currentLang].sol5Desc}</p>
			</div>
		</div>
	</section>

	<!-- Products Catalog -->
	<section id="products" class="products-section">
		<h2 class="section-title">{i18n[currentLang].prodTitle}</h2>
		<p class="section-subtitle">{i18n[currentLang].prodSubtitle}</p>

		<div class="products-container">
			<!-- Featured Product: Poultry Farm Control System -->
			<div class="featured-product-card glass-card">
				<div class="featured-img-panel">
					<img src="/Poultry_logo_with_text.png" alt="Nabd Poultry System" class="poultry-brand-img" />
					<div class="badge-featured">FULLY OPERATIONAL</div>
				</div>
				<div class="featured-info-panel">
					<h3>{i18n[currentLang].prod1}</h3>
					<p>{i18n[currentLang].prod1Desc}</p>
					
					<div class="product-features-grid">
						<div class="p-feat">🍽️ Feeding Systems</div>
						<div class="p-feat">⚠️ Instant Alerts</div>
						<div class="p-feat">📱 Mobile Access</div>
						<div class="p-feat">📊 Advanced Reports</div>
						<div class="p-feat">🎮 Remote Management</div>
					</div>

					<a href="https://myfarm.nabd-co.com" class="primary-btn featured-cta-btn" target="_blank">
						{i18n[currentLang].navPortal}
					</a>
				</div>
			</div>

			<!-- Focused on Poultry Farming only -->
		</div>
	</section>

	<!-- Pricing & ROI sections removed to focus strictly on Poultry Control Farming -->

	<!-- Contact Section -->
	<section id="contact" class="contact-section">
		<div class="glass-card contact-card">
			<h2>{i18n[currentLang].contactTitle}</h2>
			<p>{i18n[currentLang].contactSubtitle}</p>

			<form onsubmit={(e) => { e.preventDefault(); alert(currentLang === 'AR' ? 'شكراً لك! سيتواصل معك فريق الهندسة والمبيعات في غضون 24 ساعة.' : 'Thank you! Our engineering sales team will reach out to you within 24 hours.'); }} class="contact-form">
				<div class="form-row">
					<input type="text" placeholder={i18n[currentLang].formName} required />
					<input type="email" placeholder={i18n[currentLang].formEmail} required />
				</div>
				<div class="form-row">
					<input type="text" placeholder={i18n[currentLang].formCompany} required />
					<input type="text" placeholder={i18n[currentLang].formScope} required />
				</div>
				<textarea placeholder={currentLang === 'AR' ? 'أخبرنا عن أنظمتك الحالية ومتطلباتك التشغيلية...' : 'Tell us about your current systems and requirements...'} rows="5" required></textarea>
				<button type="submit" class="submit-btn">{i18n[currentLang].formSubmit}</button>
			</form>
		</div>
	</section>

	<!-- Footer -->
	<footer>
		<div class="footer-content">
			<p>&copy; 2026 Nabd Solutions Co. All Rights Reserved.</p>
			<p class="footer-links">
				<a href="https://myfarm.nabd-co.com" target="_blank">{i18n[currentLang].navPortal}</a>
			</p>
		</div>
	</footer>
</div>

<style>
	:root {
		--bg-color: #0B1220; /* Matching portal deep slate */
		--card-bg: #182235; /* Card container background */
		--border-color: rgba(255, 255, 255, 0.06); /* Soft border style */
		--text-primary: #F8FAFC;
		--text-secondary: #CBD5E1; /* Light Slate/Silver */
		--text-muted: #94A3B8;
		--accent-gold: #F59E0B; /* Bright brand Gold */
		--accent-cyan: #22D3EE; /* Accent Cyan */
		--glow-gold: rgba(245, 158, 11, 0.15);
		--font-family: 'Plus Jakarta Sans', sans-serif;
	}

	:global(html) {
		scroll-behavior: smooth;
		background-color: var(--bg-color);
	}

	:global(body) {
		margin: 0;
		font-family: var(--font-family);
		background-color: var(--bg-color);
		background-image: 
			radial-gradient(at 0% 0%, rgba(34, 211, 238, 0.03) 0px, transparent 55%),
			radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.02) 0px, transparent 55%);
		color: var(--text-primary);
		min-height: 100vh;
		overflow-x: hidden;
	}

	.app-container {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 1.5rem;
		box-sizing: border-box;
	}

	/* Navigation */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1.5rem 0;
		border-bottom: 1px solid var(--border-color);
	}

	.company-logo-img {
		height: 64px; /* Increased logo height */
		display: block;
		object-fit: contain;
	}

	.nav-links {
		display: flex;
		align-items: center;
		gap: 2.2rem; /* Increased menu items gap */
	}

	.nav-links a {
		color: var(--text-secondary);
		text-decoration: none;
		font-size: 1.15rem; /* Increased menu font size */
		font-weight: 600; /* Bolder menu items */
		transition: color 0.3s ease;
	}

	.nav-links a:hover {
		color: var(--accent-gold);
	}

	/* Navigation Dropdown Menu */
	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-btn {
		background: transparent;
		border: none;
		color: var(--text-secondary);
		font-family: var(--font-family);
		font-size: 1.15rem;
		font-weight: 600;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 0;
		transition: color 0.3s ease;
	}

	.dropdown-btn:hover {
		color: var(--accent-gold);
	}

	.dropdown-chevron {
		font-size: 0.65rem;
		transition: transform 0.2s ease;
	}

	.dropdown:hover .dropdown-chevron {
		transform: rotate(180deg);
	}

	.dropdown-content {
		display: none;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--card-bg);
		min-width: 220px;
		box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5);
		border: 1px solid var(--border-color);
		border-radius: 8px;
		z-index: 100;
		padding: 0.5rem 0;
		margin-top: 10px;
	}

	.dropdown-content::before {
		content: '';
		position: absolute;
		top: -15px;
		left: 0;
		right: 0;
		height: 15px;
		background: transparent;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropdown-content a {
		color: var(--text-secondary);
		padding: 0.6rem 1.2rem;
		text-decoration: none;
		display: block;
		font-size: 0.95rem;
		font-weight: 500;
		white-space: nowrap;
		transition: background-color 0.2s, color 0.2s;
	}

	.dropdown-content a:hover {
		background-color: var(--hover-bg, rgba(255, 255, 255, 0.03));
		color: var(--accent-cyan);
	}

	.nav-roi {
		color: var(--accent-gold) !important;
		font-weight: 600 !important;
	}

	.lang-toggle {
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid var(--border-color);
		color: var(--text-secondary);
		padding: 0.6rem 1.25rem; /* Increased padding */
		border-radius: 8px;
		cursor: pointer;
		font-weight: 600;
		font-size: 1.1rem; /* Increased lang selector size */
		transition: all 0.3s ease;
	}

	.lang-toggle:hover {
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
	}

	.portal-btn {
		background: rgba(242, 178, 67, 0.1);
		border: 1px solid rgba(242, 178, 67, 0.3);
		color: var(--accent-gold) !important;
		padding: 0.7rem 1.45rem; /* Increased padding */
		border-radius: 8px;
		font-weight: 600 !important;
		font-size: 1.1rem; /* Increased portal btn size */
		transition: all 0.3s ease;
	}

	.portal-btn:hover {
		background: var(--accent-gold);
		color: #0b0f19 !important; /* Restored portal theme bg */
		box-shadow: 0 0 15px rgba(242, 178, 67, 0.4);
		transform: translateY(-1px);
	}

	/* Hero */
	.hero {
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		gap: 3rem;
		align-items: center;
		padding: 5rem 0;
		position: relative;
	}

	.glow-orb {
		position: absolute;
		width: 300px;
		height: 300px;
		border-radius: 50%;
		filter: blur(80px);
		z-index: -1;
		opacity: 0.45;
	}

	.orb-1 {
		top: 10%;
		left: -10%;
		background: rgba(242, 178, 67, 0.15);
	}

	.orb-2 {
		bottom: 10%;
		right: -10%;
		background: rgba(56, 189, 248, 0.12);
	}

	.status-badge {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: rgba(242, 178, 67, 0.08);
		border: 1px solid rgba(242, 178, 67, 0.2);
		color: var(--accent-gold);
		padding: 6px 14px;
		border-radius: 100px;
		font-size: 0.8rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 1.5rem;
	}

	.status-dot {
		width: 6px;
		height: 6px;
		background-color: var(--accent-gold);
		border-radius: 50%;
	}

	.animate-pulse {
		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	@keyframes pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: .4; }
	}

	h1 {
		font-family: 'Outfit', sans-serif;
		font-size: 3.2rem;
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: -1px;
		margin-bottom: 1.5rem;
	}

	.gradient-text {
		background: linear-gradient(135deg, var(--accent-gold) 0%, #ffd06a 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.subtitle {
		color: var(--text-secondary);
		font-size: 1.1rem;
		line-height: 1.6;
		margin-bottom: 2.5rem;
	}

	.hero-actions {
		display: flex;
		gap: 1rem;
	}

	.primary-btn {
		background: linear-gradient(90deg, var(--accent-gold), #d99a2c);
		color: #0b0f19; /* Restored portal theme bg */
		text-decoration: none;
		padding: 0.85rem 2rem;
		font-weight: 700;
		border-radius: 10px;
		box-shadow: 0 4px 15px rgba(242, 178, 67, 0.35);
		transition: all 0.3s ease;
		text-align: center;
	}

	.primary-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(242, 178, 67, 0.5);
	}

	.secondary-btn {
		border: 1px solid var(--border-color);
		background: rgba(255, 255, 255, 0.02);
		color: var(--text-primary);
		text-decoration: none;
		padding: 0.85rem 2rem;
		font-weight: 600;
		border-radius: 10px;
		transition: all 0.3s ease;
		text-align: center;
	}

	.secondary-btn:hover {
		background: rgba(255, 255, 255, 0.05);
		border-color: rgba(255, 255, 255, 0.15);
		transform: translateY(-1px);
	}

	/* Video Display Mockup */
	.video-container {
		position: relative;
		border: 1px solid rgba(242, 178, 67, 0.15);
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 25px var(--glow-gold);
		border-radius: 16px;
		overflow: hidden;
		aspect-ratio: 16/9;
	}

	.hero-video-element {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.video-overlay {
		position: absolute;
		bottom: 1rem;
		left: 1rem;
		z-index: 2;
	}

	.video-badge {
		background: rgba(8, 51, 92, 0.8);
		border: 1px solid var(--border-color);
		backdrop-filter: blur(4px);
		padding: 6px 12px;
		border-radius: 8px;
		font-size: 0.75rem;
		font-weight: 700;
		color: #fff;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.badge-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}

	.green-dot {
		background-color: #10b981;
		box-shadow: 0 0 8px #10b981;
	}

	/* Glass Card */
	.glass-card {
		background: var(--card-bg);
		backdrop-filter: blur(12px);
		border: 1px solid var(--border-color);
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
	}

	/* Stats */
	.stats-counter-section {
		padding: 3rem 0;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.stat-card {
		padding: 1.5rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.stat-icon {
		font-size: 2rem;
		margin-bottom: 0.5rem;
	}

	.stat-card p {
		font-family: 'Outfit', sans-serif;
		font-size: 1.2rem;
		font-weight: 700;
		margin: 0;
	}

	/* About Us */
	.about-section {
		padding: 5rem 0;
		border-top: 1px solid var(--border-color);
	}

	.section-title {
		font-family: 'Outfit', sans-serif;
		font-size: 2.25rem;
		font-weight: 800;
		text-align: center;
		letter-spacing: -0.5px;
		margin-bottom: 0.5rem;
	}

	.section-subtitle {
		color: var(--text-secondary);
		font-size: 1.1rem;
		text-align: center;
		margin-bottom: 3.5rem;
	}

	.grid-3 {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
	}

	.about-card {
		padding: 2.5rem;
		transition: all 0.3s ease;
	}

	.about-card:hover {
		transform: translateY(-4px);
		border-color: rgba(242, 178, 67, 0.25);
		box-shadow: 0 15px 30px -10px rgba(242, 178, 67, 0.15);
	}

	.about-icon {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
		background: rgba(242, 178, 67, 0.1);
		border: 1px solid rgba(242, 178, 67, 0.2);
	}

	.about-card h3 {
		font-family: 'Outfit', sans-serif;
		font-size: 1.3rem;
		font-weight: 700;
		margin-bottom: 0.75rem;
	}

	.about-card p {
		color: var(--text-secondary);
		font-size: 0.95rem;
		line-height: 1.5;
		margin: 0;
	}

	/* Solutions / Services */
	.solutions-section {
		padding: 5rem 0;
		border-top: 1px solid var(--border-color);
	}

	.solutions-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 1.5rem;
	}

	.sol-card {
		padding: 2rem;
		transition: all 0.3s ease;
	}

	.sol-card:hover {
		transform: translateY(-2px);
		border-color: var(--accent-gold);
	}

	.sol-card-icon {
		font-size: 2rem;
		margin-bottom: 1rem;
	}

	.sol-card h3 {
		font-family: 'Outfit', sans-serif;
		font-size: 1.15rem;
		font-weight: 700;
		margin-bottom: 0.5rem;
	}

	.sol-card p {
		font-size: 0.85rem;
		color: var(--text-secondary);
		line-height: 1.5;
		margin: 0;
	}

	/* Products Catalog */
	.products-section {
		padding: 5rem 0;
		border-top: 1px solid var(--border-color);
	}

	.featured-product-card {
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		border: 1px solid rgba(242, 178, 67, 0.2);
		margin-bottom: 3rem;
	}

	.featured-img-panel {
		background: linear-gradient(135deg, rgba(11, 15, 25, 0.95) 0%, rgba(17, 24, 39, 0.8) 100%);
		padding: 3rem;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.poultry-brand-img {
		width: 100%;
		max-width: 320px;
		height: auto;
		object-fit: contain;
	}

	.badge-featured {
		position: absolute;
		top: 1rem;
		left: 1rem;
		background: #10b981;
		color: #fff;
		font-size: 0.75rem;
		font-weight: 700;
		padding: 4px 10px;
		border-radius: 4px;
	}

	.featured-info-panel {
		padding: 3rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.featured-info-panel h3 {
		font-family: 'Outfit', sans-serif;
		font-size: 1.8rem;
		font-weight: 800;
		margin-top: 0;
		margin-bottom: 1rem;
	}

	.featured-info-panel p {
		color: var(--text-secondary);
		line-height: 1.6;
		margin-bottom: 2rem;
	}

	.product-features-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
		margin-bottom: 2.5rem;
	}

	.p-feat {
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--text-secondary);
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.featured-cta-btn {
		align-self: flex-start;
		min-width: 200px;
	}

	.coming-soon-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.product-soon-card {
		padding: 2rem;
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.04);
	}

	.soon-badge {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background: rgba(242, 178, 67, 0.1);
		border: 1px solid rgba(242, 178, 67, 0.2);
		color: var(--accent-gold);
		font-size: 0.7rem;
		font-weight: 700;
		padding: 2px 8px;
		border-radius: 4px;
		text-transform: uppercase;
	}

	.product-soon-card h3 {
		font-family: 'Outfit', sans-serif;
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 0.75rem;
		margin-top: 0.5rem;
	}

	.product-soon-card p {
		font-size: 0.85rem;
		color: var(--text-secondary);
		line-height: 1.5;
		margin: 0;
	}

	/* ROI Calculator */
	.roi-section {
		padding: 5rem 0;
		border-top: 1px solid var(--border-color);
	}

	.calculator-card {
		padding: 3.5rem;
		border: 1px solid rgba(242, 178, 67, 0.15);
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 35px var(--glow-gold);
	}

	.calculator-card h2 {
		font-family: 'Outfit', sans-serif;
		font-size: 2rem;
		font-weight: 800;
		margin-bottom: 0.5rem;
		text-align: center;
	}

	.calc-subtitle {
		text-align: center;
		color: var(--text-secondary);
		margin-bottom: 3.5rem;
	}

	.calc-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}

	.inputs-panel {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		justify-content: center;
	}

	.input-group {
		display: flex;
		flex-direction: column;
	}

	.input-group label {
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--text-secondary);
		margin-bottom: 0.5rem;
	}

	.input-group input[type="number"] {
		background: rgba(0, 0, 0, 0.2);
		border: 1px solid var(--border-color);
		border-radius: 8px;
		color: #fff;
		padding: 0.75rem 1rem;
		font-size: 1.1rem;
		font-family: 'Outfit', sans-serif;
		font-weight: 600;
		margin-bottom: 0.5rem;
		outline: none;
		transition: border 0.3s;
	}

	.input-group input[type="number"]:focus {
		border-color: var(--accent-gold);
	}

	.slider {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		height: 6px;
		border-radius: 3px;
		background: rgba(255, 255, 255, 0.05);
		outline: none;
	}

	.slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: var(--accent-gold);
		cursor: pointer;
		box-shadow: 0 0 10px rgba(242, 178, 67, 0.5);
	}

	.results-panel {
		background: rgba(255, 255, 255, 0.015);
		border: 1px solid var(--border-color);
		border-radius: 16px;
		padding: 2.5rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.results-panel h3 {
		font-family: 'Outfit', sans-serif;
		font-size: 1.1rem;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: var(--text-secondary);
		margin-bottom: 0.5rem;
	}

	.total-savings-value {
		font-family: 'Outfit', sans-serif;
		font-size: 3.5rem;
		font-weight: 800;
		color: var(--accent-gold);
		text-shadow: 0 0 20px rgba(242, 178, 67, 0.3);
		margin-bottom: 1.5rem;
	}

	.savings-breakdown {
		border-top: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
		padding: 1.5rem 0;
		margin-bottom: 1.5rem;
	}

	.breakdown-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0.75rem;
		font-size: 0.9rem;
		color: var(--text-secondary);
	}

	.breakdown-item:last-child {
		margin-bottom: 0;
	}

	.b-val {
		color: var(--text-primary);
		font-weight: 600;
	}

	.payback-stat {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 1.05rem;
		font-weight: 600;
	}

	.pb-val {
		color: var(--accent-gold);
	}

	/* Pricing Plans */
	.pricing-section {
		padding: 5rem 0;
		border-top: 1px solid var(--border-color);
	}

	.price-card {
		padding: 3rem 2rem;
		display: flex;
		flex-direction: column;
		transition: all 0.3s ease;
		position: relative;
	}

	.price-card.popular {
		border-color: rgba(242, 178, 67, 0.4);
		background: rgba(242, 178, 67, 0.03);
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	}

	.popular-badge {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		background: var(--accent-gold);
		color: #0b0f19; /* Restored portal theme bg */
		font-size: 0.7rem;
		font-weight: 700;
		padding: 4px 10px;
		border-radius: 100px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.price-card h4 {
		font-family: 'Outfit', sans-serif;
		font-size: 1.35rem;
		font-weight: 700;
		margin-bottom: 1rem;
	}

	.price {
		font-family: 'Outfit', sans-serif;
		font-size: 2.75rem;
		font-weight: 800;
		margin-bottom: 1rem;
	}

	.price span {
		font-size: 1rem;
		font-weight: 500;
		color: var(--text-secondary);
	}

	.price-desc {
		font-size: 0.9rem;
		color: var(--text-secondary);
		margin-bottom: 2rem;
		min-height: 40px;
	}

	.features-list {
		list-style: none;
		padding: 0;
		margin-bottom: 2.5rem;
		flex-grow: 1;
	}

	.features-list li {
		font-size: 0.9rem;
		margin-bottom: 0.75rem;
		color: var(--text-secondary);
	}

	.features-list li::before {
		content: '✦';
		color: var(--accent-gold);
		margin-right: 8px;
	}

	.price-btn {
		display: block;
		text-align: center;
		border: 1px solid var(--border-color);
		color: var(--text-primary);
		padding: 0.75rem;
		border-radius: 10px;
		text-decoration: none;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.price-btn:hover {
		background: rgba(255, 255, 255, 0.03);
		border-color: rgba(255, 255, 255, 0.15);
	}

	.popular-btn {
		background: linear-gradient(90deg, var(--accent-gold), #d99a2c);
		border: none;
		color: #0b0f19;
		box-shadow: 0 4px 15px rgba(242, 178, 67, 0.3);
	}

	.popular-btn:hover {
		background: linear-gradient(90deg, #d99a2c, var(--accent-gold));
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(242, 178, 67, 0.5);
	}

	/* Contact */
	.contact-section {
		padding: 5rem 0;
		border-top: 1px solid var(--border-color);
	}

	.contact-card {
		padding: 4rem;
		max-width: 800px;
		margin: 0 auto;
		text-align: center;
	}

	.contact-card h2 {
		font-family: 'Outfit', sans-serif;
		font-size: 2rem;
		font-weight: 800;
		margin-bottom: 0.5rem;
	}

	.contact-card p {
		color: var(--text-secondary);
		margin-bottom: 3rem;
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.form-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	.contact-form input, .contact-form textarea {
		background: rgba(0, 0, 0, 0.25);
		border: 1px solid var(--border-color);
		border-radius: 8px;
		color: #fff;
		padding: 0.85rem 1.2rem;
		font-size: 0.95rem;
		outline: none;
		transition: border 0.3s;
		width: 100%;
		box-sizing: border-box;
	}

	.contact-form input:focus, .contact-form textarea:focus {
		border-color: var(--accent-gold);
	}

	.submit-btn {
		background: linear-gradient(90deg, var(--accent-gold), #d99a2c);
		color: #0b0f19;
		border: none;
		padding: 1rem;
		border-radius: 10px;
		font-weight: 700;
		font-size: 1rem;
		cursor: pointer;
		box-shadow: 0 4px 15px rgba(242, 178, 67, 0.3);
		transition: all 0.3s ease;
	}

	.submit-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(242, 178, 67, 0.5);
	}

	/* Footer */
	footer {
		border-top: 1px solid var(--border-color);
		padding: 3rem 0;
		margin-top: 4rem;
	}

	.footer-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.85rem;
		color: var(--text-secondary);
	}

	.footer-links a {
		color: var(--text-secondary);
		text-decoration: none;
		margin-left: 1rem;
	}

	.footer-links a:hover {
		color: var(--accent-gold);
	}

	@media (max-width: 900px) {
		.hero, .featured-product-card, .coming-soon-grid, .calc-grid, .stats-grid {
			grid-template-columns: 1fr;
			gap: 3rem;
		}

		h1 {
			font-size: 2.5rem;
		}

		.form-row {
			grid-template-columns: 1fr;
		}

		.nav-links {
			display: none; /* simple hidden links for small viewports to maintain layout clean */
		}
	}
</style>
