:root{
  --bg:#0b0a10;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.18);
  --accent:#ffffff;
  --maxw:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--fg);
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

.hero{
  position:relative;
  flex:1;
  background:
    radial-gradient(60% 60% at 35% 35%, rgba(130,78,160,.25), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)),
    url("./assets/server-bg.png");
  background-size:cover;
  background-position:center;
}

	.hero--home{
		min-height:800px;
	}

.hero::after{
  /* subtle vignette */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(80% 70% at 40% 30%, rgba(0,0,0,.25), rgba(0,0,0,.65));
  pointer-events:none;
}

.hero--home::before{
		content:"";
		position:absolute;
		left:0; right:0; bottom:0;
		height:0;
		background:transparent;
		z-index:2;
		pointer-events:none;
}

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

.topbar{
  position:relative;
  z-index:5;
  padding: 28px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  font-weight:800;
  letter-spacing:.06em;
  font-size:14px;
  opacity:.95;
  text-transform:uppercase;
}

.nav{
  display:flex;
  align-items:center;
  gap:34px;
  font-weight:600;
}

.nav a{
  color:rgba(255,255,255,.9);
}

.nav-item{
	position:relative;
}

.nav-item--has-submenu > a{
	display:inline-flex;
	align-items:center;
}

.nav-submenu{
	position:absolute;
	top:100%;
	right:0;
	min-width:240px;
	background: rgba(10,10,14,.95);
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.22);
	padding: 8px 0;
	opacity:0;
	pointer-events:none;
	transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease;
	z-index:20;
}

.nav-submenu a{
	display:block;
	padding:8px 16px;
	font-size:13px;
	white-space:nowrap;
}

.nav-item--has-submenu:hover .nav-submenu{
	opacity:1;
	pointer-events:auto;
	transform: translateY(0);
}

.nav a.active{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 2px;
}

.hamburger{
	display:none;
	width:44px;height:44px;
	border:1px solid rgba(255,255,255,.25);
	border-radius:12px;
	background:rgba(0,0,0,.15);
	color:#fff;
}

.theme-toggle{
	width:44px;
	height:44px;
	margin-left:12px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.25);
	background:rgba(0,0,0,.15);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.hero-content{
  position:relative;
  z-index:4;
  padding: 86px 0 140px;
}

	.hero-actions{
		margin-top:48px;
	}

		.btn-consult{
			display:inline-block;
			padding:18px 40px;
			border-radius:6px;
			border:1px solid #ffffff;
			background:transparent;
			color:#ffffff;
			font-size:16px;
			font-weight:700;
			letter-spacing:.08em;
			text-transform:uppercase;
		}

		.btn-consult:hover{
				color:#ffeb3b;
				border-color:#ffeb3b;
		}

/* Beefusion hero back button: purple outline/text on light theme, white style on dark */
body.page-beefusion.page-light .hero-actions .btn-consult{
	background:transparent;
	border-color:#8B5CF6;
	color:#8B5CF6;
}

body.page-beefusion.page-light .hero-actions .btn-consult:hover{
	background:transparent;
	border-color:#7C3AED;
	color:#7C3AED;
}

		.hero-strapline{
			position:relative;
			background:#ffffff;
			padding:16px 0 54px;
			z-index:5;
			margin-top:-80px;
		}

	.hero-strapline .small{
		max-width:100%;
		margin: 0 auto;
		font-size: 20px;
		line-height: 1.5;
		letter-spacing: .04em;
		color: rgba(0,0,0,.78);
		text-align:center;
	}

.home-products{
	position:relative;
	background:#ffffff;
	color:#1c1b22;
	padding: 34px 0 104px;
}

.home-products__section-head{
	display:flex;
	justify-content:center;
	margin-bottom:48px;
}

.home-products__section-title{
	color:#171327;
	font-size:clamp(20px, 2.4vw, 30px);
	line-height:1.15;
	font-weight:800;
	letter-spacing:.03em;
	text-transform:none;
}

.home-products__layout{
	display:grid;
	grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
	gap:44px;
	align-items:start;
}

.home-products__intro{
	max-width: 540px;
	padding-top:0;
	align-self:start;
}

.home-products__title{
	margin:0 0 28px;
	font-size: clamp(18px, 2.1vw, 26px);
	line-height:1.25;
	letter-spacing:.02em;
	font-weight:800;
	color:#171327;
	text-transform:uppercase;
}

.home-products__text{
	margin:0;
	max-width: 520px;
	font-size:18px;
	line-height:1.72;
	color:rgba(23,19,39,.72);
}

.home-products__quote{
	margin:36px 0 0;
	max-width: 460px;
	font-size:14px;
	line-height:1.55;
	font-style:italic;
	color:rgba(23,19,39,.58);
}

.home-products__intro .product-spotlight__cta{
	margin-top:28px;
	border-color:#171327;
	background:#171327;
	color:#ffffff;
	box-shadow:0 14px 28px rgba(23,19,39,.14);
}

.home-products__intro .product-spotlight__cta:hover{
	background:#8B5CF6;
	color:#ffffff;
	border-color:#8B5CF6;
}

.product-spotlight{
	position:relative;
	overflow:hidden;
	border-radius:36px;
	padding:22px 22px 12px;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(139,92,246,.24), rgba(139,92,246,0) 40%),
		linear-gradient(160deg, #161222 0%, #1b1630 52%, #24163f 100%);
	color:#f8fafc;
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 28px 70px rgba(2,6,23,.28);
}

.product-spotlight::before{
	content:"";
	position:absolute;
	inset:-140px auto auto -110px;
	width:300px;
	height:300px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(139,92,246,.28) 0%, rgba(139,92,246,0) 72%);
	pointer-events:none;
}

.product-spotlight::after{
	content:"";
	position:relative;
	display:block;
	width:96px;
	height:96px;
	margin-left:auto;
	margin-top:-62px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(139,92,246,.10) 0%, rgba(139,92,246,0) 72%);
	filter:blur(16px);
	pointer-events:none;
}

.product-spotlight__header{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:12px;
}

.product-spotlight__badge,
.product-spotlight__system{
	display:inline-flex;
	align-items:center;
	padding:8px 12px;
	border-radius:999px;
	font-size:11px;
	font-weight:800;
	letter-spacing:.12em;
	text-transform:uppercase;
}

.product-spotlight__badge{
	background:rgba(139,92,246,.20);
	color:#eadcff;
}

.product-spotlight__system{
	background:rgba(255,255,255,.10);
	color:rgba(255,255,255,.78);
}

.product-spotlight__topline{
	position:relative;
	z-index:1;
	margin-bottom:16px;
}

.product-spotlight__cta{
	position:relative;
	z-index:1;
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:14px 24px;
	border-radius:12px;
	border:2px solid #ffffff;
	background:#ffffff;
	color:#171327;
	font-size:13px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	box-shadow:0 14px 28px rgba(2,6,23,.18);
	transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.product-spotlight__cta .material-symbols-outlined{
	font-size:18px;
	transition:transform .18s ease;
}

.product-spotlight__cta:hover{
	background:#efe4ff;
	color:#171327;
	border-color:#efe4ff;
	box-shadow:0 18px 32px rgba(2,6,23,.22);
}

.product-spotlight__cta:hover .material-symbols-outlined{
	transform:translateX(3px);
}

.product-spotlight__title{
	margin:0;
	font-size: clamp(32px, 3.8vw, 48px);
	line-height:.96;
	letter-spacing:-.04em;
	font-weight:800;
	color:#ffffff;
}

.product-spotlight__tiles{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:10px;
}

.product-tile{
	min-height:112px;
	padding:14px;
	border-radius:24px;
	background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
	border:1px solid rgba(255,255,255,.12);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
	display:flex;
	flex-direction:column;
	gap:8px;
}

.product-tile__icon{
	width:40px;
	height:40px;
	border-radius:14px;
	background:rgba(139,92,246,.18);
	color:#d8b4fe;
	display:flex;
	align-items:center;
	justify-content:center;
}

.product-tile__title{
	font-size:13px;
	font-weight:800;
	line-height:1.3;
	color:#ffffff;
}

.product-tile__text{
	font-size:11px;
	line-height:1.4;
	color:rgba(226,232,240,.72);
}

	.h1{
  margin:0;
  font-size: clamp(54px, 7vw, 98px);
  line-height: .92;
  letter-spacing: .04em;
  font-weight: 900;
}

.sub{
  margin-top: 26px;
  max-width: 520px;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: .03em;
  font-weight:800;
  text-transform:uppercase;
  color: rgba(255,255,255,.95);
}

.sub span{display:block}

.sub-support{
	margin-top: 10px;
	max-width: 520px;
	font-size: clamp(9px, 1.1vw, 14px);
	line-height: 1.3;
	letter-spacing: .04em;
	font-weight:600;
	color: rgba(255,255,255,.9);
}

	.swoosh{
	  position:absolute;
	  left:-220px;
	  right:-180px;
		  bottom:80px;
	  height:520px;
	  z-index:3;
	  pointer-events:none;
	}

.swoosh svg{width:100%;height:100%}

.footer{
  position:relative;
  z-index:6;
  background:#fff;
  color:#1c1b22;
  padding: 30px 0 26px;
}

.footer .rule{
  height:1px;
  background: rgba(0,0,0,.22);
  margin-bottom: 18px;
}

.footer-grid{
	display:grid;
	grid-template-columns: 1fr auto;
	gap:22px;
	align-items:end;
}

.small{
	font-size: 11px;
	line-height:1.35;
	letter-spacing:.03em;
	text-transform:uppercase;
	color: rgba(0,0,0,.55);
	font-weight:700;
}

.footer-right{
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	gap:4px;
	align-items:flex-end;
}

.footer-right a{
	color: rgba(0,0,0,.55);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.copy{
	color: rgba(0,0,0,.55);
	font-weight:700;
}

/* Dark theme footer variant specifically for Beefusion dark mode */
body.page-beefusion:not(.page-light) .footer{
	background:#05050a;
	color:var(--muted);
}

body.page-beefusion:not(.page-light) .footer .rule{
	background:var(--line);
}

body.page-beefusion:not(.page-light) .footer .small,
body.page-beefusion:not(.page-light) .footer .copy{
	color:var(--muted);
}

body.page-beefusion:not(.page-light) .footer-right a{
	color:var(--muted);
}

/* Override inline email color in dark mode */
body.page-beefusion:not(.page-light) .footer .small span{
	color:#ffffff !important;
}

.page-light{
	background:#ffffff;
	color:#1c1b22;
}

.page-light .page{
	background:#ffffff;
}

.page-light .topbar{
	padding: 20px 0 18px;
}

.page-light .brand{
	color: rgba(0,0,0,.72);
}

.page-light .nav a{
	color: rgba(0,0,0,.72);
}

	.page-light .nav-submenu a{
		color: rgba(255,255,255,.9);
	}

.page-light .nav a.active{
	color:#000000;
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 1px;
}

.page-light .hamburger,
.page-light .theme-toggle{
	border:1px solid rgba(0,0,0,.25);
	background:#ffffff;
	color:#000000;
}

.page-light .mobile-drawer{
	background:#ffffff;
	color:#1c1b22;
	border-color: rgba(0,0,0,.18);
}

.page-light .mobile-drawer a{
	color:#1c1b22;
}

.page-light main.content{
	background:none;
}

main.content{
  padding: 68px 0 92px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 22px;
  max-width: 820px;
}

.card h2{margin:0 0 10px; font-size:26px}
.card p{margin:0; color: var(--muted); line-height:1.6}

.list{
  margin:14px 0 0;
  padding:0 0 0 18px;
  color: var(--muted);
  line-height:1.7;
}

.mobile-drawer{
  display:none;
  position:absolute;
  top:76px; right:0;
  width:min(320px, calc(100% - 48px));
  background: rgba(10,10,14,.85);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 12px;
  backdrop-filter: blur(10px);
  z-index:10;
}

.mobile-drawer a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
}
.mobile-drawer a:hover{background: rgba(255,255,255,.08)}
.mobile-drawer a.active{background: rgba(255,255,255,.12)}

.mobile-sub{
	padding-left:26px;
	font-size:12px;
}

	.consult-modal{
		position:fixed;
		inset:0;
		display:none;
		align-items:center;
		justify-content:center;
		background:rgba(0,0,0,.7);
		z-index:50;
	}

	.consult-modal.is-open{
		display:flex;
	}

	.consult-dialog{
		width:min(480px, calc(100% - 48px));
		background:#ffffff;
		color:#1c1b22;
		border-radius:18px;
		padding:24px 24px 20px;
		box-shadow:0 22px 60px rgba(0,0,0,.5);
		position:relative;
	}

	.consult-dialog h2{
		margin:0 0 14px;
		font-size:20px;
	}

	.consult-close{
		position:absolute;
		top:12px;
		right:12px;
		width:28px;
		height:28px;
		border-radius:999px;
		border:1px solid rgba(0,0,0,.18);
		background:#ffffff;
		cursor:pointer;
	}

	.consult-form{
		display:flex;
		flex-direction:column;
		gap:12px;
		margin-top:4px;
	}

	.consult-honeypot{
		position:absolute;
		left:-9999px;
		width:1px;
		height:1px;
		overflow:hidden;
		opacity:0;
		pointer-events:none;
	}

	.consult-label{
		display:flex;
		align-items:baseline;
		justify-content:space-between;
		gap:12px;
		font-size:11px;
		font-weight:700;
		letter-spacing:.06em;
		text-transform:uppercase;
		margin-bottom:4px;
		color:rgba(0,0,0,.6);
	}

	.consult-label-error,
	.consult-inline-error{
		font-size:11px;
		font-weight:700;
		letter-spacing:0;
		text-transform:none;
		color:#c62828;
	}

	.consult-inline-error{
		margin-top:6px;
	}

	.consult-input,
	.consult-select,
	.consult-textarea{
		width:100%;
		padding:8px 10px;
		border-radius:8px;
		border:1px solid rgba(0,0,0,.18);
		font:inherit;
	}

	.consult-textarea{
		min-height:100px;
		resize:vertical;
	}

	.consult-input.is-invalid,
	.consult-select.is-invalid,
	.consult-textarea.is-invalid{
		border-color:#c62828;
		box-shadow:0 0 0 1px rgba(198,40,40,.18);
	}

	.consult-field-note{
		margin-top:6px;
		font-size:11px;
		line-height:1.4;
		color:rgba(0,0,0,.62);
	}

				.consult-consent{
					margin-top:6px;
					font-size:11px;
					color:rgba(0,0,0,.7);
				}

	.consult-consent.is-invalid{
		color:#c62828;
	}

			.consult-consent-label{
				display:flex;
				align-items:flex-start;
				gap:6px;
		}

			.consult-consent-checkbox{
				margin-top:2px;
			}

	.consult-form .g-recaptcha{
		margin-top:4px;
	}

	.consult-recaptcha.is-invalid{
		border-radius:8px;
	}

	.consult-recaptcha.is-invalid .g-recaptcha{
		outline:2px solid rgba(198,40,40,.18);
		outline-offset:4px;
	}

			.consult-consent a{
				color:inherit;
				text-decoration:underline;
				text-underline-offset:2px;
			}

		.required-mark{
			color:#e53935;
			margin-left:2px;
		}

		/* Modal submit button: styled similar to Detective CONTACT CTA */
		.consult-submit{
			margin-top:12px;
			align-self:flex-end;
			display:inline-flex;
			align-items:center;
			justify-content:center;
			padding:12px 32px;
			border-radius:8px;
			border:2px solid #8B5CF6;
			background:transparent;
			color:#8B5CF6;
			font-size:14px;
			font-weight:600;
			letter-spacing:.08em;
			text-transform:uppercase;
			cursor:pointer;
			transition:background-color .3s ease,color .3s ease,border-color .3s ease,opacity .2s ease;
		}

			.consult-submit-icon{
				margin-left:8px;
				font-size:20px;
				line-height:1;
			}

		.consult-submit:hover{
			background:#8B5CF6;
			color:#ffffff;
			border-color:#8B5CF6;
		}

			.consult-submit:disabled{
				opacity:.6;
				cursor:not-allowed;
			}

		.consult-status{
			position:absolute;
			left:-9999px;
			width:1px;
			height:1px;
			overflow:hidden;
		}

		.consult-status.is-error{
			color:#c62828;
		}

		.consult-status.is-success{
			color:#2e7d32;
		}

				.consult-success{
					position:fixed;
					bottom:24px;
				left:50%;
				transform:translateX(-50%);
				z-index:60;
				display:none;
				align-items:center;
				gap:8px;
				padding:10px 14px;
				border-radius:10px;
				background:#e8f5e9;
				color:#1b5e20;
				box-shadow:0 8px 24px rgba(0,0,0,.2);
				font-size:12px;
					font-weight:600;
				}

		.consult-success.is-error{
			background:#fdecea;
			color:#b42318;
		}

		.consult-success.is-error .consult-success-icon{
			background:#d92d20;
		}

			.consult-success.is-visible{
			display:flex;
		}

		.consult-success-icon{
			width:18px;
			height:18px;
			border-radius:999px;
			background:#4caf50;
			color:#ffffff;
			display:flex;
			align-items:center;
			justify-content:center;
			font-size:12px;
		}

@media (max-width: 860px){
  .nav{display:none}
  .hamburger{display:inline-flex; align-items:center; justify-content:center}
  .mobile-drawer{display:none}
  .footer-grid{grid-template-columns:1fr; align-items:start}
	.footer-right{justify-content:flex-start; align-items:flex-start}
  .hero-content{padding: 64px 0 150px;}
  .home-products{padding: 28px 0 72px;}
  .home-products__layout{grid-template-columns:1fr; gap:24px;}
  .product-spotlight{
  	padding:24px 24px 14px;
  	border-radius:28px;
  }
  .product-spotlight__topline{
  	flex-direction:column;
  	align-items:flex-start;
  }
  .product-spotlight__tiles{
  	grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .product-tile{
  	min-height:120px;
  }
}