:root {
	--grad-start: #b8860b;
	--grad-end: #d4696f;
	--ink: #2b2320;
}

body {
	font-family: 'Inter', sans-serif;
	color: var(--ink);
}

h1, h2, h3, .navbar-brand {
	font-family: 'Playfair Display', serif;
}

.text-gradient {
	background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.text-gradient-icon { color: var(--grad-start); }

.btn-gradient {
	background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
	border: none;
	color: #fff;
	font-weight: 600;
	transition: opacity .2s ease;
}
.btn-gradient:hover { opacity: .9; color: #fff; }

.hero {
	background: radial-gradient(circle at top, #fff8f0, #fdf1e8);
}

.region-card, .cta-box .card {
	transition: transform .2s ease, box-shadow .2s ease;
}
.region-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0,0,0,.08) !important;
}

.step-icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem;
}

.cta-box {
	background: linear-gradient(120deg, var(--grad-start), var(--grad-end));
}

.border-gradient {
	border: 2px solid var(--grad-start) !important;
}

.region-catalog-card, .template-card {
	transition: transform .2s ease, box-shadow .2s ease;
}
.region-catalog-card:hover, .template-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0,0,0,.08) !important;
}

.template-thumb { height: 160px; }
.template-thumb-placeholder {
	height: 100%;
	background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
}

/* Preview frame */
.preview-toolbar {
	background: #fff;
	border-bottom: 1px solid #eee;
}
.preview-viewport {
	background: #e9e9e9;
	min-height: 70vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 0;
	transition: padding .2s ease;
}
.preview-frame-inner {
	width: 100%;
	height: 78vh;
	border: 0;
	background: #fff;
	box-shadow: 0 8px 30px rgba(0,0,0,.12);
	transition: width .25s ease, height .25s ease, border-radius .25s ease;
}
.preview-viewport.is-mobile .preview-frame-inner {
	width: 375px;
	border-radius: 24px;
}