/* Axiam Networks - Nav + Topbar (redesigned mega dropdowns) */
:root {
	--bg0: #F4FBFF;
	--bg1: #EAF6FF;
	--surface: #FFFFFF;
	--text: #0B1B2B;
	--muted: #516B85;
	--accent: #2AA8FF;
	--accent2: #6FD3FF;
	--border: rgba(11,27,43,.12);
	--shadow: 0 18px 60px rgba(10,40,70,.18);
	--shadow2: 0 14px 40px rgba(10,40,70,.14);
	--radius-xl: 22px;
	--radius-lg: 18px;
	--radius-md: 14px;
	--radius-sm: 12px;
	--container: 1200px;
	--ease: cubic-bezier(.2,.8,.2,1);
	--ease2: cubic-bezier(.16,1,.3,1);
	--dropDur: .22s;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
	margin: 0;
	color: var(--text);
	font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	background:
		radial-gradient(1100px 550px at 15% 0%, rgba(42,168,255,.18), transparent 55%),
		radial-gradient(900px 520px at 85% 10%, rgba(111,211,255,.22), transparent 60%),
		linear-gradient(180deg, var(--bg0), var(--bg1));
	background-attachment: fixed;
	background-size: 100% 100vh;
	overflow-x: hidden;
	min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }

.container-max {
	width: min(var(--container), calc(100% - 48px));
	margin: 0 auto;
}

/* ===================== TOPBAR ===================== */
.topbar {
	background: #156DBF;
	color: rgba(255,255,255,.92);
	font-size: 12px;
}

.topbar .rowx {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	gap: 14px;
}

.topbar .links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.topbar a {
	color: rgba(255,255,255,.92);
	font-weight: 700;
	letter-spacing: .3px;
}

.topbar a:hover { color: #fff; }

/* ===================== NAV ===================== */
.top-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #1C82D6;
	border-bottom: 1px solid rgba(255,255,255,.16);
}

.top-nav .nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	gap: 16px;
}

.nav-links {
	display: none;
	align-items: center;
	gap: 10px;
	flex: 1;
	justify-content: center;
}

.nav-item { position: relative; }

/* Invisible hover bridge so you can move mouse from link -> panel without it collapsing */
.nav-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 20px;
}

.nav-linkx {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.92);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 12px;
	border-radius: 14px;
	transition: background .22s var(--ease), transform .22s var(--ease), color .22s var(--ease);
}

.nav-linkx:hover {
	background: rgba(255,255,255,.14);
	transform: translateY(-1px);
	color: #fff;
}

/* Active page state */
.nav-linkx.active {
	background: rgba(255,255,255,.18);
	color: #ffe432 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.nav-linkx.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 12px;
	right: 12px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
	border-radius: 2px;
}

.nav-linkx {
	position: relative;
}

.caret {
	font-size: 12px;
	opacity: .95;
	transform: translateY(0.5px);
}


/* ===================== MEGA MENU (REDESIGNED) ===================== */
.mega-panel {
	position: absolute;
	left: 50%;
	top: calc(100% + 16px);
	width: min(1100px, calc(100vw - 32px));
	z-index: 1000;

	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translateX(-50%) translateY(20px);
	transform-origin: top center;

	transition:
		opacity .28s var(--ease2),
		transform .28s var(--ease2),
		visibility 0s linear .28s;
}

.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);

	transition:
		opacity .28s var(--ease2),
		transform .28s var(--ease2),
		visibility 0s;
}

/* Card shell - cleaner, more modern */
.mega-shell {
	background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(250,252,255,.96) 100%);
	border: 1px solid rgba(42,168,255,.16);
	border-radius: 20px;
	box-shadow: 
		0 24px 48px rgba(10,40,70,.12),
		0 8px 16px rgba(42,168,255,.08);
	overflow: hidden;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* Top header - simplified and bolder */
.mega-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 28px;
	background: linear-gradient(135deg, rgba(42,168,255,.06) 0%, rgba(111,211,255,.04) 100%);
	border-bottom: 1px solid rgba(42,168,255,.12);
}

.mega-kicker {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 6px;
	background: linear-gradient(135deg, #1C82D6, #2AA8FF);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: white;
}

.mega-heading {
	margin-top: 8px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.4px;
	background: linear-gradient(135deg, #0B1B2B 0%, #1C82D6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.mega-top-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 10px;
	background: white;
	border: 2px solid rgba(42,168,255,.2);
	font-weight: 800;
	font-size: 13px;
	color: #1C82D6;
	transition: all .22s var(--ease);
}

.mega-top-cta:hover {
	transform: translateX(2px);
	background: #1C82D6;
	color: white;
	border-color: #1C82D6;
}

/* Grid body - more spacious */
.mega-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 340px;
	gap: 0;
}

.mega-section {
	padding: 28px 28px 32px;
}

.mega-section + .mega-section {
	border-left: 1px solid rgba(42,168,255,.1);
}

.mega-section-title {
	font-weight: 900;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #1C82D6;
	margin: 0 0 4px 0;
}

.mega-section-desc {
	margin: 0 0 20px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
}

.mega-cards {
	display: grid;
	gap: 8px;
}

/* Cleaner link style - no heavy cards */
.mega-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 12px;
	border-radius: 12px;
	border: 2px solid transparent;
	background: transparent;
	transition: all .2s var(--ease);
	position: relative;
}

.mega-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: linear-gradient(180deg, #1C82D6, #2AA8FF);
	border-radius: 2px;
	transition: height .22s var(--ease);
}

.mega-card:hover::before {
	height: 60%;
}

.mega-card:hover {
	background: rgba(42,168,255,.04);
	border-color: rgba(42,168,255,.08);
	transform: translateX(4px);
}

.mega-ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(42,168,255,.12), rgba(111,211,255,.08));
	font-size: 20px;
	flex-shrink: 0;
	transition: transform .22s var(--ease);
}

.mega-card:hover .mega-ico {
	transform: scale(1.1) rotate(-5deg);
}

.mega-card-body {
	flex: 1;
}

.mega-card-title {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.2px;
	margin-bottom: 2px;
}

.mega-card-sub {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.4;
}

.mega-card-arrow {
	opacity: 0;
	font-weight: 900;
	color: #1C82D6;
	transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.mega-card:hover .mega-card-arrow {
	opacity: 1;
	transform: translateX(3px);
}

/* Aside - more distinct */
.mega-aside {
	padding: 28px 24px 32px;
	background: linear-gradient(180deg, rgba(42,168,255,.03) 0%, rgba(111,211,255,.02) 100%);
	border-left: 1px solid rgba(42,168,255,.1);
}

.mega-aside-title {
	font-weight: 900;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #1C82D6;
	margin-bottom: 14px;
}

.mega-quick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 8px;
	border-radius: 10px;
	background: white;
	border: 1px solid rgba(42,168,255,.12);
	font-weight: 700;
	font-size: 13px;
	transition: all .2s var(--ease);
}

.mega-quick:hover {
	background: rgba(42,168,255,.06);
	border-color: rgba(42,168,255,.25);
	transform: translateX(3px);
}

.mega-q-arrow {
	opacity: .5;
	font-weight: 900;
	transition: transform .2s var(--ease);
}

.mega-quick:hover .mega-q-arrow {
	transform: translateX(3px);
}

.mega-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(42,168,255,.15), transparent);
	margin: 20px 0;
}

/* Mini CTA block - more prominent */
.mega-mini {
	padding: 20px 18px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(42,168,255,.08), rgba(111,211,255,.06));
	border: 2px solid rgba(42,168,255,.15);
	position: relative;
	overflow: hidden;
}

.mega-mini::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 70%);
	pointer-events: none;
}

.mega-mini-title {
	font-weight: 900;
	font-size: 14px;
	letter-spacing: -0.2px;
	position: relative;
}

.mega-mini-sub {
	margin-top: 8px;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.6;
	position: relative;
}

.mega-mini-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 16px;
	border-radius: 8px;
	background: linear-gradient(135deg, #1C82D6, #2AA8FF);
	font-weight: 900;
	font-size: 12px;
	color: white;
	transition: all .22s var(--ease);
	position: relative;
	box-shadow: 0 4px 12px rgba(28,130,214,.25);
}

.mega-mini-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(28,130,214,.35);
}

/* Responsive mega menu */
@media (max-width: 1024px) {
	.mega-grid {
		grid-template-columns: 1fr;
	}
	
	.mega-section + .mega-section {
		border-left: none;
		border-top: 1px solid rgba(42,168,255,.1);
		padding-top: 24px;
	}
	
	.mega-aside {
		border-left: none;
		border-top: 1px solid rgba(42,168,255,.1);
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.mega-panel,
	.nav-linkx,
	.btn-neo {
		transition: none !important;
	}
	.mega-panel {
		transform: translateX(-50%) !important;
	}
}

/* ===================== CTA ===================== */
.nav-cta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.btn-neo {
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.22);
	background: rgba(255,255,255,.12);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	transition:
		background .20s var(--ease),
		color .20s var(--ease),
		transform .20s var(--ease);
}

.btn-neo:hover {
	background: rgba(255,255,255,.16);
	color: rgba(255,255,255,.82);
	transform: translateY(-1px);
}

.btn-hero-primary {
	background: linear-gradient(135deg, #1C82D6, #2AA8FF);
}

/* ===================== HAMBURGER ===================== */
.hamburger {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.22);
	background: rgba(255,255,255,.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hamburger span {
	width: 18px;
	height: 2px;
	background: #fff;
	position: relative;
	display: inline-block;
}

.hamburger span::before,
.hamburger span::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 2px;
	background: #fff;
	left: 0;
}

.hamburger span::before { top: -6px; }
.hamburger span::after { top: 6px; }

/* ===================== MOBILE DRAWER ===================== */
.mobile-drawer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .26s var(--ease);
	background: #156DBF;
	border-top: 1px solid rgba(255,255,255,.18);
}

.mobile-drawer[aria-hidden="false"] {
	grid-template-rows: 1fr;
}

.mobile-drawer > div { overflow: hidden; }

.mobile-drawer a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	color: rgba(255,255,255,.92);
	border-bottom: 1px solid rgba(255,255,255,.14);
}

.mobile-drawer a:hover { color:#fff; }

/* ===================== RESPONSIVE ===================== */
@media (min-width: 992px) {
	.nav-links { display: flex; }
	.hamburger { display: none; }
	.mobile-drawer { display: none !important; }
}

@media (max-width: 991.98px) {
	/* Keep drawer behaviour as you already implemented */
	.mobile-drawer { display: grid; }

	/* On smaller screens, hide mega panels (you’re using the drawer instead) */
	.mega-panel { display: none; }
}
/* ===================== SECTIONS ===================== */
.services-section,
.features-section,
.pricing-section,
.page-section {
	padding: 80px 0;
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-title {
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -0.5px;
	margin-bottom: 16px;
}

.section-subtitle {
	font-size: 18px;
	color: var(--muted);
	max-width: 600px;
	margin: 0 auto;
}

/* ===================== SERVICES GRID ===================== */
.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

.service-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: 32px;
	border: 1px solid var(--border);
	box-shadow: 0 10px 30px rgba(10, 40, 70, 0.08);
	transition: all 0.22s var(--ease);
	text-decoration: none;
	display: block;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(10, 40, 70, 0.14);
	border-color: rgba(42, 168, 255, 0.3);
}

.service-card2 {
	transition: all 0.22s var(--ease);
	text-decoration: none;
	display: block;
}

.service-card2:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(10, 40, 70, 0.14);
	border-color: rgba(42, 168, 255, 0.3);
}

.service-icon {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(42, 168, 255, 0.15), rgba(111, 211, 255, 0.15));
	border: 1px solid rgba(42, 168, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	font-size: 28px;
	color: #1C82D6;
}

.service-title {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 12px;
	color: var(--text);
}

.service-desc {
	color: var(--muted);
	line-height: 1.6;
	margin-bottom: 16px;
	font-size: 15px;
}

.service-link {
	color: #1C82D6;
	font-weight: 700;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ===================== FEATURES GRID ===================== */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
}

.feature-item {
	text-align: center;
}

.feature-icon-wrap {
	width: 70px;
	height: 70px;
	border-radius: 18px;
	background: linear-gradient(135deg, #1C82D6, #2AA8FF);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 32px;
	color: white;
	box-shadow: 0 12px 30px rgba(28, 130, 214, 0.3);
}

.feature-item h3 {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 12px;
}

.feature-item p {
	color: var(--muted);
	line-height: 1.6;
	font-size: 15px;
}

/* ===================== CTA SECTION ===================== */
.cta-section {
	padding: 80px 0;
	background: linear-gradient(135deg, #1C82D6, #156DBF);
}

.cta-box {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.cta-title {
	font-size: 42px;
	font-weight: 900;
	color: white;
	margin-bottom: 16px;
	letter-spacing: -0.5px;
}

.cta-text {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 32px;
	line-height: 1.6;
}

.cta-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ===================== FOOTER ===================== */
.footer {
	background: #0B1B2B;
	color: rgba(255, 255, 255, 0.8);
	padding: 60px 0 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}

.footer-logo {
	margin-bottom: 16px;
	filter: brightness(0) invert(1);
}

.footer-tagline {
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
	margin-bottom: 20px;
	font-size: 14px;
}

.footer-social {
	display: flex;
	gap: 12px;
}

.footer-social a {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.8);
	transition: all 0.2s var(--ease);
}

.footer-social a:hover {
	background: rgba(42, 168, 255, 0.2);
	color: white;
	transform: translateY(-2px);
}

.footer-title {
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 16px;
	color: white;
}

.footer-links,
.footer-contact {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li,
.footer-contact li {
	margin-bottom: 10px;
}

.footer-links a,
.footer-contact a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s var(--ease);
	font-size: 14px;
}

.footer-links a:hover,
.footer-contact a:hover {
	color: white;
}

.footer-contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.footer-contact i {
	color: #2AA8FF;
	width: 16px;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 24px;
	text-align: center;
}

.footer-bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

/* ===================== PAGE CONTENT ===================== */
.page-header {
	background: linear-gradient(135deg, #1C82D6, #156DBF);
	padding: 80px 0;
	text-align: center;
	color: white;
}

.page-header h1 {
	font-size: 48px;
	font-weight: 900;
	margin-bottom: 16px;
	letter-spacing: -0.5px;
}

.page-header p {
	font-size: 18px;
	max-width: 700px;
	margin: 0 auto;
	opacity: 0.95;
}

.page-content {
	padding: 80px 0;
}

/* ===================== PRICING CARDS ===================== */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.pricing-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: 40px 32px;
	border: 2px solid var(--border);
	transition: all 0.22s var(--ease);
	position: relative;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(10, 40, 70, 0.14);
	border-color: rgba(42, 168, 255, 0.3);
}

.pricing-card.featured {
	border-color: #2AA8FF;
	box-shadow: 0 12px 35px rgba(42, 168, 255, 0.2);
}

.pricing-badge {
	position: absolute;
	top: -12px;
	right: 32px;
	background: linear-gradient(135deg, #1C82D6, #2AA8FF);
	color: white;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.3px;
}

.pricing-name {
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 8px;
}

.pricing-desc {
	color: var(--muted);
	margin-bottom: 24px;
	font-size: 14px;
}

.pricing-price {
	margin-bottom: 24px;
}

.price-amount {
	font-size: 48px;
	font-weight: 900;
	color: var(--text);
	line-height: 1;
}

.price-currency {
	font-size: 24px;
	vertical-align: super;
	margin-right: 4px;
}

.price-period {
	font-size: 16px;
	color: var(--muted);
	margin-left: 8px;
}

.pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px 0;
}

.pricing-features li {
	padding: 12px 0;
	border-bottom: 1px solid rgba(11, 27, 43, 0.08);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}

.pricing-features li:last-child {
	border-bottom: none;
}

.pricing-features i {
	color: #2AA8FF;
	font-size: 16px;
}

.pricing-cta {
	display: block;
	width: 100%;
	padding: 14px;
	border-radius: 12px;
	background: linear-gradient(135deg, #1C82D6, #2AA8FF);
	color: white;
	text-align: center;
	font-weight: 800;
	text-decoration: none;
	transition: all 0.2s var(--ease);
	border: none;
	font-size: 15px;
}

.pricing-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(28, 130, 214, 0.3);
	color: white;
}

.pricing-cta.secondary {
	background: rgba(42, 168, 255, 0.1);
	color: #1C82D6;
	border: 2px solid rgba(42, 168, 255, 0.2);
}

.pricing-cta.secondary:hover {
	background: rgba(42, 168, 255, 0.15);
	color: #1C82D6;
}

/* ===================== COMPARISON TABLE ===================== */
.comparison-table-wrap {
	overflow-x: auto;
	margin: 40px 0;
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 30px rgba(10, 40, 70, 0.08);
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	min-width: 800px;
}

.comparison-table thead {
	background: linear-gradient(135deg, #1C82D6, #156DBF);
	color: white;
}

.comparison-table th {
	padding: 18px;
	text-align: left;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.3px;
}

.comparison-table td {
	padding: 18px;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}

.comparison-table tbody tr:hover {
	background: rgba(42, 168, 255, 0.04);
}

.comparison-table .check {
	color: #2AA8FF;
	font-size: 18px;
}

.comparison-table .highlight {
	background: rgba(42, 168, 255, 0.08);
	font-weight: 700;
}

/* ===================== GAME GRID ===================== */
.game-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
	margin: 40px 0;
}

.game-card {
    background-size: cover;
    background-position: center;
    position: relative;
	border-radius: 16px;
	padding: 32px 24px;
	text-align: center;
	border: 1px solid var(--border);
	transition: all 0.22s var(--ease);
	cursor: pointer;
	aspect-ratio: 1 / 1.414; /* A4 ratio */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.game-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(10, 40, 70, 0.15);
	border-color: rgba(42, 168, 255, 0.4);
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(11,27,43,0.4) 0%, rgba(11,27,43,0.7) 100%);
    border-radius: 16px;
    transition: opacity 0.22s var(--ease);
}

.game-card:hover::before {
    opacity: 0.85;
}

.game-name {
	font-size: 18px;
	font-weight: 800;
	color: white;
	letter-spacing: -0.3px;
	line-height: 1.3;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.game-name, .game-price {
    position: relative;
    z-index: 1;
    color: white;
}

.game-price {
	font-size: 14px;
	font-weight: 600;
	color: white;
	margin-top: auto;
}

/* ===================== CONTACT FORM ===================== */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-top: 40px;
}

.contact-info h3 {
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 16px;
}

.contact-info p {
	color: var(--muted);
	margin-bottom: 32px;
	line-height: 1.6;
}

.contact-method {
	display: flex;
	align-items: start;
	gap: 16px;
	margin-bottom: 24px;
}

.contact-method-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(42, 168, 255, 0.15), rgba(111, 211, 255, 0.15));
	border: 1px solid rgba(42, 168, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #1C82D6;
	font-size: 20px;
}

.contact-method-content h4 {
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 4px;
}

.contact-method-content p {
	margin: 0;
	font-size: 14px;
}

.contact-method-content a {
	color: #1C82D6;
	text-decoration: none;
}

.contact-form {
	background: var(--surface);
	padding: 40px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	box-shadow: 0 10px 30px rgba(10, 40, 70, 0.08);
}

.form-group {
	margin-bottom: 24px;
}

.form-group label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--text);
}

.form-control {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--border);
	border-radius: 12px;
	font-size: 15px;
	font-family: inherit;
	transition: all 0.2s var(--ease);
	background: var(--surface);
}

.form-control:focus {
	outline: none;
	border-color: #2AA8FF;
	box-shadow: 0 0 0 3px rgba(42, 168, 255, 0.1);
}

.form-control::placeholder {
	color: var(--muted);
}

textarea.form-control {
	resize: vertical;
	min-height: 140px;
}

/* ===================== HERO SECTION ===================== */
.hero {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-image: url('../img/hero.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Dark overlay for better text readability */
.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(11, 27, 43, 0.75) 0%, rgba(28, 130, 214, 0.65) 100%);
	z-index: 1;
}

.hero-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.hero-content {
	position: relative;
	z-index: 3;
	padding: 100px 0;
}

.hero-text {
	max-width: 800px;
	text-align: center;
	margin: 0 auto;
}

.hero-title {
	font-size: 56px;
	font-weight: 900;
	letter-spacing: -1.5px;
	margin-bottom: 24px;
	line-height: 1.1;
	color: #ffffff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
	font-size: 20px;
	color: rgba(255, 255, 255, 0.95);
	line-height: 1.6;
	margin-bottom: 40px;
	font-weight: 400;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.hero-ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-hero {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 12px;
	font-weight: 800;
	font-size: 16px;
	transition: all 0.25s var(--ease);
	text-decoration: none;
	border: 2px solid transparent;
}

.btn-hero-primary {
	background: linear-gradient(135deg, #2AA8FF, #1C82D6);
	color: white;
	box-shadow: 0 8px 24px rgba(42, 168, 255, 0.4);
}

.btn-hero-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(42, 168, 255, 0.5);
	color: white;
}

.btn-hero-secondary {
	background: rgba(255, 255, 255, 0.15);
	color: white;
	border-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.btn-hero-secondary:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-3px);
	color: white;
}

/* ===================== REVEAL ANIMATION ===================== */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s var(--ease2), transform 0.6s var(--ease2);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ===================== RESPONSIVE ===================== */

/* Desktop nav visibility */
@media (min-width: 1025px) {
	.nav-links {
		display: flex;
	}
	
	.hamburger {
		display: none;
	}
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
	.mega-grid {
		grid-template-columns: 1fr;
	}
	
	.mega-section + .mega-section {
		border-left: none;
		border-top: 1px solid rgba(42,168,255,.1);
		padding-top: 24px;
	}
	
	.mega-aside {
		border-left: none;
		border-top: 1px solid rgba(42,168,255,.1);
	}
	
	.mega-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	
	.mega-panel {
		width: calc(100vw - 24px);
	}
}

@media (max-width: 768px) {
	.hero-title {
		font-size: 38px;
	}

	.hero-subtitle {
		font-size: 16px;
	}

	.section-title {
		font-size: 32px;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.pricing-grid {
		grid-template-columns: 1fr;
	}

	.game-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px;
	}
	
	/* Mega menu mobile adjustments */
	.mega-section,
	.mega-aside {
		padding: 20px 18px 24px;
	}
	
	.mega-top {
		padding: 18px 20px;
	}
	
	.mega-heading {
		font-size: 18px;
	}
	
	.features-grid {
		grid-template-columns: 1fr;
	}
}
/* ===================== WELCOME SCREEN ===================== */
.welcome-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg, #0B1B2B 0%, #1C82D6 50%, #2AA8FF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease, visibility 0.8s ease;
}

.welcome-screen.fade-out {
	opacity: 0;
	visibility: hidden;
}

.welcome-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.welcome-content {
	position: relative;
	z-index: 2;
	text-align: center;
	animation: fadeInUp 1s ease;
}

.welcome-logo-container {
	margin-bottom: 60px;
}

.welcome-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-bottom: 16px;
}

.logo-icon {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: scaleRotate 2s ease infinite;
}

.logo-icon i {
	font-size: 48px;
	color: #fff;
}

.logo-text {
	font-size: 42px;
	font-weight: 900;
	color: #fff;
	margin: 0;
	letter-spacing: -1px;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	animation: glow 2s ease-in-out infinite;
}

.welcome-tagline {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	letter-spacing: 0.5px;
	animation: fadeIn 1.5s ease;
}

.loading-container {
	max-width: 300px;
	margin: 0 auto;
}

.loading-bar {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}

.loading-progress {
	height: 100%;
	background: linear-gradient(90deg, #fff, #6FD3FF, #fff);
	background-size: 200% 100%;
	border-radius: 10px;
	width: 0%;
	animation: loadProgress 2s ease forwards, shimmer 1.5s linear infinite;
}

.loading-text {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
}

.dots::after {
	content: '';
	animation: dots 1.5s steps(4, end) infinite;
}

/* Main content initially hidden */
.main-content {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease 0.3s, visibility 0.8s ease 0.3s;
}

.main-content.show {
	opacity: 1;
	visibility: visible;
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes scaleRotate {
	0%, 100% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(1.05) rotate(5deg);
	}
}

@keyframes glow {
	0%, 100% {
		text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
	}
	50% {
		text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.4);
	}
}

@keyframes loadProgress {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

@keyframes dots {
	0%, 20% {
		content: '';
	}
	40% {
		content: '.';
	}
	60% {
		content: '..';
	}
	80%, 100% {
		content: '...';
	}
}

/* Responsive welcome screen */
@media (max-width: 768px) {
	.logo-icon {
		width: 80px;
		height: 80px;
	}
	
	.logo-icon i {
		font-size: 38px;
	}
	
	.logo-text {
		font-size: 32px;
	}
	
	.welcome-tagline {
		font-size: 16px;
	}
	
	.loading-container {
		max-width: 260px;
	}
}