/* ProWebLook Native CI4 Public Website & Developer Tools Stylesheet (front.css) */
:root {
	--pwl-bg: #f8fafc;
	--pwl-surface: #ffffff;
	--pwl-surface-alt: #f1f5f9;
	--pwl-ink: #0f172a;
	--pwl-muted: #475569;
	--pwl-border: #e2e8f0;
	--pwl-primary: #2563eb;
	--pwl-primary-dark: #1d4ed8;
	--pwl-primary-soft: #eff6ff;
	--pwl-accent: #0f766e;
	--pwl-code-bg: #0f172a;
	--pwl-code-ink: #e2e8f0;
	--pwl-success-bg: #ecfdf5;
	--pwl-success-ink: #065f46;
	--pwl-warn-bg: #fffbeb;
	--pwl-warn-ink: #92400e;
	--pwl-danger-bg: #fef2f2;
	--pwl-danger-ink: #991b1b;
	--pwl-radius: 12px;
	--pwl-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.pwl-front {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
	background: var(--pwl-bg);
	color: var(--pwl-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.pwl-container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Header & Navigation */
.pwl-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--pwl-border);
}

.pwl-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 68px;
	gap: 1rem;
}

.pwl-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--pwl-ink);
	text-decoration: none;
	letter-spacing: -0.02em;
}

.pwl-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, #2563eb, #0f766e);
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 800;
}

.pwl-nav {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.pwl-nav a {
	color: var(--pwl-muted);
	text-decoration: none;
	font-size: 0.93rem;
	font-weight: 600;
	padding: 0.45rem 0.7rem;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

.pwl-nav a:hover,
.pwl-nav a.is-active {
	color: var(--pwl-primary);
	background: var(--pwl-primary-soft);
}

.pwl-header-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.pwl-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--pwl-border);
	border-radius: 8px;
	padding: 0.45rem 0.7rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--pwl-ink);
	cursor: pointer;
}

/* Buttons */
.pwl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.62rem 1.15rem;
	border-radius: 9px;
	font-size: 0.93rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.pwl-btn-primary {
	background: var(--pwl-primary);
	color: #ffffff;
}

.pwl-btn-primary:hover {
	background: var(--pwl-primary-dark);
}

.pwl-btn-outline {
	background: var(--pwl-surface);
	color: var(--pwl-ink);
	border-color: var(--pwl-border);
}

.pwl-btn-outline:hover {
	border-color: var(--pwl-primary);
	color: var(--pwl-primary);
}

.pwl-btn-sm {
	padding: 0.42rem 0.85rem;
	font-size: 0.85rem;
}

/* Hero & Sections */
.pwl-hero {
	padding: 3.75rem 0 2.75rem;
	background: radial-gradient(circle at top right, #dbeafe 0%, #f8fafc 52%);
	border-bottom: 1px solid var(--pwl-border);
}

.pwl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--pwl-primary-soft);
	color: var(--pwl-primary-dark);
	border: 1px solid #bfdbfe;
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.pwl-hero h1 {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.16;
	letter-spacing: -0.025em;
	max-width: 850px;
}

.pwl-lead {
	margin: 0 0 1.6rem;
	font-size: 1.12rem;
	color: var(--pwl-muted);
	max-width: 760px;
}

.pwl-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.pwl-section {
	padding: 3rem 0;
}

.pwl-section-alt {
	background: var(--pwl-surface);
	border-top: 1px solid var(--pwl-border);
	border-bottom: 1px solid var(--pwl-border);
}

.pwl-section-head {
	margin-bottom: 1.75rem;
}

.pwl-section-head h2 {
	margin: 0 0 0.45rem;
	font-size: 1.65rem;
	letter-spacing: -0.02em;
}

.pwl-section-head p {
	margin: 0;
	color: var(--pwl-muted);
}

/* Grids & Cards */
.pwl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.pwl-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.pwl-card {
	background: var(--pwl-surface);
	border: 1px solid var(--pwl-border);
	border-radius: var(--pwl-radius);
	padding: 1.4rem;
	box-shadow: var(--pwl-shadow);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.9rem;
}

.pwl-card h3 {
	margin: 0 0 0.35rem;
	font-size: 1.12rem;
}

.pwl-card h3 a {
	color: var(--pwl-ink);
	text-decoration: none;
}

.pwl-card h3 a:hover {
	color: var(--pwl-primary);
}

.pwl-card p {
	margin: 0;
	color: var(--pwl-muted);
	font-size: 0.95rem;
}

.pwl-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--pwl-muted);
}

.pwl-pill {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--pwl-surface-alt);
	color: var(--pwl-muted);
	font-size: 0.76rem;
	font-weight: 700;
}

/* Code Blocks */
.pwl-code {
	background: var(--pwl-code-bg);
	color: var(--pwl-code-ink);
	padding: 1.1rem 1.25rem;
	border-radius: 10px;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.86rem;
	line-height: 1.55;
	margin: 0;
}

/* Pricing */
.pwl-price-tag {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--pwl-ink);
	letter-spacing: -0.02em;
}

.pwl-price-unit {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--pwl-muted);
}

/* Developer Tools Hub & Workspace */
.pwl-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.pwl-search-input {
	flex: 1 1 280px;
	max-width: 420px;
	padding: 0.65rem 0.95rem;
	border: 1px solid var(--pwl-border);
	border-radius: 9px;
	font-size: 0.95rem;
	background: var(--pwl-surface);
}

.pwl-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.pwl-chip {
	background: var(--pwl-surface);
	border: 1px solid var(--pwl-border);
	color: var(--pwl-muted);
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-size: 0.83rem;
	font-weight: 600;
	cursor: pointer;
}

.pwl-chip.is-active,
.pwl-chip:hover {
	background: var(--pwl-primary);
	border-color: var(--pwl-primary);
	color: #ffffff;
}

.pwl-workspace {
	background: var(--pwl-surface);
	border: 1px solid var(--pwl-border);
	border-radius: var(--pwl-radius);
	padding: 1.4rem;
	box-shadow: var(--pwl-shadow);
}

.pwl-workspace-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--pwl-border);
}

.pwl-workspace-panes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.pwl-pane label {
	display: block;
	font-size: 0.84rem;
	font-weight: 700;
	margin-bottom: 0.4rem;
	color: var(--pwl-muted);
}

.pwl-editor {
	width: 100%;
	min-height: 250px;
	padding: 0.85rem;
	border: 1px solid var(--pwl-border);
	border-radius: 9px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.86rem;
	line-height: 1.5;
	background: #fcfdff;
	color: var(--pwl-ink);
	resize: vertical;
}

.pwl-output-box {
	width: 100%;
	min-height: 250px;
	padding: 0.9rem;
	border: 1px solid var(--pwl-border);
	border-radius: 9px;
	background: var(--pwl-surface-alt);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.86rem;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: auto;
}

.pwl-preview-prose {
	font-family: inherit;
	white-space: normal;
	background: var(--pwl-surface);
}

/* Forms & Alerts */
.pwl-form-group {
	margin-bottom: 1rem;
}

.pwl-form-group label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
}

.pwl-input,
.pwl-select,
.pwl-textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--pwl-border);
	border-radius: 9px;
	font-size: 0.95rem;
	font-family: inherit;
	background: var(--pwl-surface);
	color: var(--pwl-ink);
}

.pwl-alert {
	padding: 0.85rem 1.1rem;
	border-radius: 9px;
	margin-bottom: 1.2rem;
	font-size: 0.93rem;
	font-weight: 500;
}

.pwl-alert-success {
	background: var(--pwl-success-bg);
	color: var(--pwl-success-ink);
	border: 1px solid #a7f3d0;
}

.pwl-alert-warning {
	background: var(--pwl-warn-bg);
	color: var(--pwl-warn-ink);
	border: 1px solid #fde68a;
}

.pwl-alert-danger {
	background: var(--pwl-danger-bg);
	color: var(--pwl-danger-ink);
	border: 1px solid #fecaca;
}

/* Accordion FAQ */
.pwl-faq-list {
	display: grid;
	gap: 0.75rem;
}

.pwl-faq-item {
	background: var(--pwl-surface);
	border: 1px solid var(--pwl-border);
	border-radius: 10px;
	padding: 0.95rem 1.15rem;
}

.pwl-faq-item summary {
	font-weight: 700;
	cursor: pointer;
	color: var(--pwl-ink);
}

.pwl-faq-item div {
	margin-top: 0.65rem;
	color: var(--pwl-muted);
	font-size: 0.95rem;
}

/* Breadcrumbs */
.pwl-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.85rem;
	color: var(--pwl-muted);
	margin-bottom: 0.9rem;
}

.pwl-breadcrumbs a {
	color: var(--pwl-primary);
	text-decoration: none;
}

/* Footer */
.pwl-footer {
	background: #0f172a;
	color: #cbd5e1;
	padding: 3.25rem 0 2rem;
	margin-top: 3rem;
}

.pwl-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #1e293b;
}

.pwl-footer h4 {
	color: #ffffff;
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
}

.pwl-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.45rem;
}

.pwl-footer a {
	color: #94a3b8;
	text-decoration: none;
	font-size: 0.9rem;
}

.pwl-footer a:hover {
	color: #ffffff;
}

.pwl-footer-bottom {
	padding-top: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: #94a3b8;
}

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

@media (max-width: 920px) {
	.pwl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pwl-workspace-panes,
	.pwl-grid-2,
	.pwl-footer-grid {
		grid-template-columns: 1fr;
	}
	.pwl-nav-toggle {
		display: inline-flex;
	}
	.pwl-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		padding: 0.75rem 0;
	}
	.pwl-nav.is-open {
		display: flex;
	}
	.pwl-header-inner {
		flex-wrap: wrap;
		padding: 0.6rem 0;
	}
}

@media (max-width: 600px) {
	.pwl-grid {
		grid-template-columns: 1fr;
	}
}