/* Minimal, clean “API-first” landing styles for prelienpro.com */

:root{
	--bg:#f8f9fb;
	--text:#111827;
	--muted:#4b5563;
	--border:rgba(17,24,39,0.12);
	--card:rgba(255,255,255,0.72);
	--shadow:0 14px 40px rgba(17,24,39,0.08);
	--accent:#2563eb;
	--accent2:#3b82f6;
	--code-bg:#0b1220;
	--code-text:#e5e7eb;
	--radius:16px;
	--container:1120px;
}

@media (prefers-color-scheme: dark){
	:root{
		--bg:#0f172a;
		--text:#e5e7eb;
		--muted:#a7b0c0;
		--border:rgba(229,231,235,0.14);
		--card:rgba(2,6,23,0.62);
		--shadow:0 18px 50px rgba(0,0,0,0.35);
		--code-bg:#060a14;
		--code-text:#e5e7eb;
	}
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background:var(--bg);
	color:var(--text);
	line-height:1.5;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{
	outline:3px solid rgba(37,99,235,0.35);
	outline-offset:2px;
	border-radius:10px;
}

.skip-link{
	position:absolute;
	left:-999px;
	top:12px;
	padding:10px 14px;
	border-radius:12px;
	background:var(--text);
	color:var(--bg);
	font-weight:800;
	z-index:1000;
}
.skip-link:focus{
	left:12px;
}

.container{
	max-width:var(--container);
	margin:0 auto;
	padding:0 20px;
}

.site-header{
	padding:18px 0;
	border-bottom:1px solid var(--border);
	background:#ffffff;
	backdrop-filter:blur(10px);
	box-shadow:0 1px 0 rgba(17,24,39,0.06);
}

.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

.brand{
	display:flex;
	align-items:center;
	gap:10px;
	font-weight:900;
	letter-spacing:-0.02em;
	flex-shrink:0;
	min-width:0;
}

.brand-mark{
	width:170px;
	height:44px;
	min-width:140px;
	flex-shrink:0;
	border-radius:12px;
	background:transparent;
	border:none;
	display:grid;
	place-items:center;
	overflow:hidden;
}

.brand-mark img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}

.nav{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
	justify-content:flex-end;
}

.nav-link{
	padding:8px 10px;
	border-radius:999px;
	border:1px solid transparent;
	color:var(--muted);
	font-weight:700;
	font-size:14px;
	text-decoration:none;
}
.nav-link:hover{
	text-decoration:none;
	border-color:var(--border);
	background:rgba(37,99,235,0.06);
	color:var(--text);
}
.nav-link-strong{
	color:#ffffff;
	border-color:var(--accent);
	background:var(--accent);
	box-shadow:0 8px 20px rgba(37,99,235,0.25);
}
.nav-link-strong:hover{
	background:#1d4ed8;
	border-color:#1d4ed8;
	color:#ffffff;
}

.hero{
	padding:54px 0 10px;
}

.hero-inner{
	display:grid;
	grid-template-columns:1.2fr 0.8fr;
	gap:28px;
	align-items:start;
}

.hero-copy h1{
	margin:0 0 12px;
	font-size:clamp(28px, 3.2vw, 44px);
	line-height:1.08;
	letter-spacing:-0.03em;
}

.lede{
	margin:0 0 20px;
	color:var(--muted);
	font-size:16px;
	max-width:58ch;
}

.cta-row{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	margin-bottom:18px;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:11px 14px;
	border-radius:12px;
	font-weight:800;
	border:1px solid var(--border);
	background:transparent;
	color:var(--text);
	transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:hover{
	text-decoration:none;
	transform:translateY(-1px);
}

.btn-primary{
	background:var(--accent);
	border-color:var(--accent);
	color:#fff;
	box-shadow:0 12px 28px rgba(37,99,235,0.25);
}
.btn-primary:hover{
	background:#1d4ed8;
}

.btn-secondary{
	color:var(--accent);
	border-color:rgba(37,99,235,0.35);
	background:rgba(37,99,235,0.06);
}
.btn-secondary:hover{
	background:rgba(37,99,235,0.10);
	text-decoration:none;
}

.trust-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.trust-item{
	font-size:13px;
	color:var(--muted);
	padding:8px 10px;
	border-radius:999px;
	background:rgba(37,99,235,0.06);
	border:1px solid rgba(37,99,235,0.15);
}

.hero-card{
	border-radius:var(--radius);
	border:1px solid var(--border);
	background:var(--card);
	box-shadow:var(--shadow);
	padding:18px;
	position:relative;
	overflow:hidden;
}

.hero-card-header{
	display:flex;
	gap:8px;
	align-items:center;
	margin-bottom:10px;
}

.chip{
	font-size:12px;
	padding:6px 9px;
	border-radius:999px;
	background:rgba(37,99,235,0.12);
	border:1px solid rgba(37,99,235,0.22);
	color:var(--text);
	font-weight:900;
}

.chip-muted{
	background:rgba(100,116,139,0.10);
	border-color:rgba(100,116,139,0.25);
	color:var(--muted);
}

.hero-card-title{
	font-size:16px;
	font-weight:900;
	margin:0 0 10px;
}

.code-block{
	margin:12px 0;
	padding:12px;
	border-radius:12px;
	background:var(--code-bg);
	color:var(--code-text);
	border:1px solid rgba(255,255,255,0.10);
	overflow:auto;
}

.hero-card-footnote{
	margin:0;
	color:var(--muted);
	font-size:13px;
}

.section{
	padding:56px 0;
}

.section-header h2{
	margin:0 0 10px;
	font-size:26px;
	letter-spacing:-0.02em;
}

.subtle{
	color:var(--muted);
	max-width:70ch;
	margin:0;
}

.grid{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:14px;
	margin-top:18px;
}

.feature-card{
	padding:16px;
	border-radius:var(--radius);
	border:1px solid var(--border);
	background:rgba(255,255,255,0.02);
}

.feature-card h3{
	margin:0 0 8px;
	font-size:15px;
}

.feature-card p{
	margin:0;
	color:var(--muted);
	font-size:14px;
}

.section-cta{
	padding-top:10px;
}

.cta-grid{
	display:grid;
	grid-template-columns:1.2fr 0.8fr;
	gap:18px;
	align-items:start;
}

.podio-embed{
	border-radius:var(--radius);
	border:1px solid var(--border);
	background:var(--card);
	padding:16px;
	margin-top:16px;
}

.podio-embed > #podio-widget{
	min-height:0;
}

.podio-embed > #podio-widget:empty{
	display:none;
}

.podio-embed iframe{
	display:block;
	margin-top:0 !important;
}

.podio-embed .podio-webform,
.podio-embed .podio-webform-container,
.podio-embed [id^="podio-webform-"]{
	margin-top:0 !important;
}

.noscript-note{
	margin-top:12px;
	padding:10px 12px;
	border-radius:12px;
	border:1px dashed var(--border);
	color:var(--muted);
	background:rgba(100,116,139,0.08);
	font-size:13px;
}

.checklist{
	margin:10px 0 0;
	padding:0;
	display:grid;
	gap:10px;
	list-style:none;
}

.checklist li{
	position:relative;
	padding-left:22px;
	color:var(--muted);
	font-size:14px;
}

.checklist li:before{
	content:"";
	position:absolute;
	left:0;
	top:0.55em;
	width:10px;
	height:10px;
	border-radius:50%;
	background:rgba(16,185,129,0.18);
	border:1px solid rgba(16,185,129,0.45);
}

.aside-muted{
	margin:14px 0 0;
	color:var(--muted);
}

.footer{
	border-top:1px solid var(--border);
	padding:20px 0;
}

.footer-inner{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
}

.footer-muted{
	color:var(--muted);
}

@media (max-width: 980px){
	.hero-inner{ grid-template-columns:1fr; }
	.grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.cta-grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
	.grid{ grid-template-columns:1fr; }
	.nav{ gap:10px; }
	.nav-link{ padding:6px 8px; }
}