@import url("/templates/assets/css/proxima_nova.css");

:root{
	--bg0:#070b14;
	--bg1:#0b1220;
	--card:#0f1a2e;
	--card2:#0c1629;
	--border: rgba(255,255,255,.10);
	--muted: rgba(255,255,255,.72);
	--muted2: rgba(255,255,255,.60);
	--text:#ffffff;

	--brand:#4f8cff;
	--brand2:#6ae4ff;

	--ok:#2ee59d;
	--warn:#ffcc66;

	--shadow: 0 24px 70px rgba(0,0,0,.45);
	--radius: 4px;

	--sans: "Proxima Nova", "proxima-nova", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family: var(--sans);
	color: var(--text);
	background:
		radial-gradient(1100px 700px at 20% 10%, rgba(79,140,255,.22), transparent 55%),
		radial-gradient(900px 650px at 80% 20%, rgba(106,228,255,.18), transparent 55%),
		linear-gradient(180deg, var(--bg0), var(--bg1));
	overflow-x:hidden;
	background-color: var(--bg1);
	background-repeat: no-repeat;
}
button {
	font-family: var(--sans);
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(1120px, 92vw); margin:0 auto; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }

/* Top nav */
.topbar{
	position:relative; top:0; z-index:20;
	backdrop-filter: blur(10px);
	background: rgba(11,18,32,.60);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner{ padding: 14px 0; }
.brand{
	display:flex; align-items:center; gap:12px;
	font-weight: 750;
	letter-spacing:.01em;
}
.logo{
	width: 38px; height: 38px; border-radius: 12px;
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%),
		linear-gradient(135deg, rgba(79,140,255,1), rgba(106,228,255,1));
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.brand small{
	display:block;
	margin-top: 2px;
	font-weight: 600;
	color: rgba(255,255,255,.70);
}

nav{
	display:flex; gap:18px; align-items:center;
	color: rgba(255,255,255,.85);
	font-size: 13px;
}
nav a{ opacity:.82; }
nav a:hover{ opacity:1; }

.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	padding: 12px 14px;
	border-radius: 4px;
	border: 1px solid transparent;
	font-weight: 700;
	font-size: 14px;
	cursor:pointer;
	user-select:none;
	transition: transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
	white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn.primary{
	color: #061024;
	background: linear-gradient(rgba(79,160,255,1), rgba(90,180,255,1));
	background: #3DAAFF;
	box-shadow: 0 22px 55px rgba(79,140,255,.18), 0 18px 45px rgba(0,0,0,.45);
}
.btn.primary-alt {
	background: transparent;
	border-color: rgba(90,180,255,1);
	color: rgba(90,180,255,1);
}
.btn.primary:hover{ opacity:.96; }

.btn.ghost{
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.14);
	color:#fff;
}
.btn.ghost:hover{
	background: rgba(255,255,255,.09);
	border-color: rgba(255,255,255,.20);
}

/* Hero */
header{
	padding: 64px 0 36px;
}
.hero{
	display:grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 22px;
	align-items:stretch;
}
.eyebrow{
	display:inline-flex; align-items:center; gap:10px;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.78);
	font-size: 12px;
}
.eyebrow .dot{
	width:8px; height:8px; border-radius:999px;
	background: var(--ok);
	box-shadow: 0 0 0 4px rgba(46,229,157,.12);
}
h1{
	margin: 14px 0 12px;
	font-size: clamp(34px, 4.2vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.lead{
	margin: 0 0 18px;
	color: rgba(255,255,255,.78);
	font-size: 16px;
	line-height: 1.65;
	max-width: 70ch;
}
.cta{
	display:flex; flex-wrap:wrap; gap: 12px;
	margin-top: 18px;
}
.bullets{
	display:flex; flex-wrap:wrap; gap: 10px;
	margin-top: 16px;
	color: rgba(255,255,255,.72);
	font-size: 12px;
}
.pill{
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.05);
}

/* Hero side card */
.hero-card{
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.12);
	background: linear-gradient(180deg, rgba(15,26,46,.80), rgba(12,22,41,.80));
	box-shadow: var(--shadow);
	overflow:hidden;
	position:relative;
}
.hero-card:before{
	content:"";
	position:absolute; inset:-2px;
	background:
		radial-gradient(900px 450px at 20% 10%, rgba(79,140,255,.20), transparent 55%),
		radial-gradient(700px 450px at 80% 15%, rgba(106,228,255,.16), transparent 55%);
	pointer-events:none;
}
.hero-card-inner{ position:relative; padding: 18px; }
.hero-card h3{
	margin: 0 0 6px;
	font-size: 16px;
	letter-spacing: .01em;
}
.hero-card p{
	margin:0 0 12px;
	color: rgba(255,255,255,.72);
	font-size: 13px;
	line-height: 1.55;
}
.split{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 12px;
}
.mini{
	padding: 12px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.05);
}
.mini b{
	display:block;
	font-size: 12px;
	letter-spacing:.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.80);
	margin-bottom: 6px;
}
.mini span{
	color: rgba(255,255,255,.70);
	font-size: 13px;
	line-height: 1.45;
	display:block;
}

.mock{
	margin-top: 12px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.20);
	overflow:hidden;
}
.mock-top{
	display:flex; align-items:center; justify-content:space-between;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: 12px;
	color: rgba(255,255,255,.68);
}
.status{
	display:inline-flex; align-items:center; gap:8px;
}
.status i{
	width:8px; height:8px; border-radius:999px;
	background: var(--ok);
	box-shadow: 0 0 0 4px rgba(46,229,157,.12);
	display:inline-block;
}
.mock-body{
	padding: 12px;
	display:grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 12px;
}
.pane{
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.04);
	padding: 12px;
	min-height: 140px;
}
.temp{
	font-size: 30px;
	font-weight: 800;
	letter-spacing:-.02em;
	margin: 0 0 6px;
}
.sub{
	margin:0 0 10px;
	font-size: 12px;
	color: rgba(255,255,255,.70);
}
.mono{
	font-family: var(--mono);
	font-size: 11px;
	color: rgba(255,255,255,.78);
	line-height:1.45;
	display:grid;
	gap:6px;
}

/* Sections */
section{ padding: 44px 0; }
.section-title{
	display:flex; align-items:flex-end; justify-content:space-between; gap: 18px;
	margin-bottom: 16px;
}
h2{
	margin:0;
	font-size: clamp(22px, 2.6vw, 32px);
	letter-spacing:-.01em;
}
.section-title p{
	margin:0;
	color: rgba(255,255,255,.74);
	line-height: 1.6;
	max-width: 70ch;
	font-size: 14px;
}

.grid2{
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
}
.card{
	grid-column: span 6;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.05);
	padding: 18px;
	box-shadow: 0 18px 55px rgba(0,0,0,.25);
}
.card .top{
	display:flex; align-items:flex-start; justify-content:space-between; gap: 12px;
	margin-bottom: 10px;
}
.tag{
	font-size: 11px;
	font-weight: 800;
	letter-spacing:.14em;
	text-transform: uppercase;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid rgba(79,140,255,.35);
	background: rgba(79,140,255,.12);
	color: rgba(255,255,255,.86);
	white-space:nowrap;
}
.card h3{
	margin:0;
	font-size: 18px;
	letter-spacing:.01em;
}
.card p{
	margin: 0 0 12px;
	color: rgba(255,255,255,.74);
	line-height: 1.6;
	font-size: 14px;
}
ul{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	gap: 10px;
	color: rgba(255,255,255,.78);
	font-size: 13px;
}
li{
	display:flex; gap:10px; align-items:flex-start;
}
.check{
	width:18px; height:18px;
	border-radius: 6px;
	background: rgba(46,229,157,.14);
	border: 1px solid rgba(46,229,157,.30);
	flex: 0 0 18px;
	position:relative;
	margin-top: 0px;
}
.check:after{
	content:"";
	position:absolute;
	left: 4px; top: 1px;
	width: 6px; height: 10px;
	border-right: 2px solid var(--ok);
	border-bottom: 2px solid var(--ok);
	transform: rotate(40deg);
}

/* Compare table */
.table{
	margin-top: 16px;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.10);
	overflow:hidden;
	background: rgba(255,255,255,.04);
	box-shadow: 0 18px 55px rgba(0,0,0,.25);
}
table{
	width:100%;
	border-collapse: collapse;
	font-size: 13px;
}
th, td{
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	vertical-align: top;
}
th{
	text-align:left;
	font-size: 12px;
	letter-spacing:.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.70);
	background: rgba(255,255,255,.04);
}
td small{ display:block; margin-top:4px; color: rgba(255,255,255,.60); }

/* Feature grid */
.grid3{
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
	margin-top: 14px;
}
.feature{
	grid-column: span 4;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.05);
	padding: 16px;
	box-shadow: 0 18px 55px rgba(0,0,0,.25);
}
.feature b{
	display:block;
	font-size: 15px;
	margin-bottom: 8px;
	letter-spacing:.01em;
}
.feature p{
	margin:0;
	color: rgba(255,255,255,.72);
	line-height: 1.6;
	font-size: 13px;
}

/* Contact */
.contact{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 14px;
}
.panel{
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.05);
	padding: 18px;
	box-shadow: 0 18px 55px rgba(0,0,0,.25);
}
form{ display:grid; gap: 10px; }
label{
	font-size: 12px;
	letter-spacing:.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.66);
	font-weight: 750;
}
input, textarea, select{
	width:100%;
	padding: 12px 12px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(0,0,0,.18);
	color:#fff;
	outline:none;
	font: inherit;
}
textarea{ min-height: 110px; resize: vertical; }
.hint{
	color: rgba(255,255,255,.60);
	font-size: 12px;
	line-height:1.5;
	margin-top: 8px;
}

footer{
	padding: 26px 0 40px;
	border-top: 1px solid rgba(255,255,255,.08);
	color: rgba(255,255,255,.62);
	font-size: 12px;
}
footer .links{ display:flex; gap: 14px; flex-wrap:wrap; }
footer a{ opacity:.78; }
footer a:hover{ opacity:1; }

#brand-logo {
	height: 36px;
}
.specialty {
	font-weight: 300;
	letter-spacing:.01em;
	letter-spacing:.12em;
	text-transform: uppercase;
	margin-left: -20px;
}

body {
	background: linear-gradient(transparent, black), url('/specialty-solutions/res/bg.png');
	background-repeat: no-repeat, no-repeat;
	background-color: black;
	background-size: cover;
}
#testimonials blockquote {
	text-indent: 0;
	font-size: 16pt;
	font-style: italic;
	margin: 0;
	padding: 16px;
	background: url('/specialty-solutions/res/quote.png');
	background-repeat: no-repeat;
	color: #CCC;
}
#testimonials p {
	margin-top: 0;
	margin-bottom: 0;
	color: #DADADA;
}
#testimonials p.alt {
	color: #AAA !important;
	font-size: 10pt;
}
#testimonials p span {
	
	font-size: 12pt;
}
#t-attr {
	float: right;
	width: 128px;
}
#wxtap p {
	color: rgba(255,255,255,.78);
}
#laptop {
	float: right;
	width: 310px;
	margin-top: 16px;
	padding: 16px;
	filter: drop-shadow(0px 2px 50px rgba(79,140,255,.2)) drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.75));
}
/* Responsive */
@media (max-width: 920px){
	nav{ display:none; }
	.hero{ grid-template-columns: 1fr; }
	.grid2 .card{ grid-column: span 12; }
	.grid3 .feature{ grid-column: span 12; }
	.contact{ grid-template-columns: 1fr; }
	.mock-body{ grid-template-columns: 1fr; }
}