@import url(https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800);

:root {
	--bg: #f7fbff;
	--bg-soft: #eef7ff;
	--bg-panel: rgba(255, 255, 255, 0.9);
	--text: #0b1f33;
	--text-soft: #4b6480;
	--text-muted: #6b84a0;
	--line: #d6e7f5;
	--line-strong: #c4dbef;
	--blue-deep: #0d4d8b;
	--blue-main: #1f78c8;
	--blue-mid: #3ea4e6;
	--blue-light: #dff3ff;
	--blue-ice: #f3fbff;
	--shadow: 0 24px 60px rgba(13, 77, 139, 0.08);
	--button-shadow: 0 14px 28px rgba(31, 120, 200, 0.24)
}

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

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: Inter, sans-serif;
	color: var(--text);
	background: var(--bg);
	position: relative
}

.site-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: radial-gradient(circle at top right, rgba(62, 164, 230, .14), transparent 24%), radial-gradient(circle at top left, rgba(13, 77, 139, .08), transparent 28%), linear-gradient(180deg, #fff 0, #f8fcff 45%, #edf7ff 100%)
}

.container {
	width: min(900px, calc(100% - 32px));
	margin: 0 auto
}

.hero,
.section,
.topbar {
	position: relative;
	z-index: 1
}

.topbar {
	padding: 24px 0 8px
}

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

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0
}

.brand-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
	flex: 0 0 48px
}

.brand-text {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--text)
}

.generate-button {
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	background: linear-gradient(135deg, var(--blue-deep), var(--blue-main) 55%, var(--blue-mid));
	color: #fff;
	font-weight: 700;
	box-shadow: var(--button-shadow);
	margin-top: 18px;
}

.generate-button:hover {
	transform: translateY(-1px)
}

.hero {
	padding: 12px 0 32px
}

.hero-grid {
	display: grid;
	justify-items: center;
	align-items: center;
	text-align: center
}

.hero-copy {
	max-width: 860px;
	margin: 0 auto;
	text-align: center
}

.eyebrow {
	margin: 0 0 10px;
	color: var(--blue-main);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	text-align: center
}

.hero-copy h1{
	margin: 0
}

.hero-copy h1 {
	font-size: clamp(2.6rem, 5vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -.05em;
	color: var(--text)
}

.hero-text {
	max-width: 54ch;
	margin: 16px auto 0;
	text-align: center;
	color: var(--text-soft);
	font-size: 1.05rem;
	line-height: 1.7
}

.section {
	padding: 20px 0 38px
}

.generator-layout {
	display: grid;
	gap: 22px;
	align-items: start
}

.generator-panel {
	padding: 22px;
	background: var(--bg-panel);
	border: 1px solid var(--line);
	border-radius: 28px;
	box-shadow: var(--shadow)
}

.form-stage {
	display: grid;
	grid-template-columns: minmax(20px, 0.2fr) 1fr minmax(20px, 0.2fr);
	align-content: center;
	gap: 25px;
	padding: 40px 0;
	position: relative;
	min-height: 400px;
	overflow: hidden;
	background: linear-gradient(180deg, #edf8ff 0, #f9fdff 100%);
	border: 1px solid var(--line);
	border-radius: 24px
}

.form-stage form,
.form-stage .message {
	grid-column: 2;
	text-align: left;
}

.message { 
	padding: 10px; 
	background: linear-gradient(180deg, #fff 0, #f8fcff 45%, #edf7ff 100%); 
	border-left: 5px solid var(--blue-deep);
	border-radius: 24px;
	box-shadow: var(--button-shadow)
}

button:disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none
}

@media (max-width:980px) {
	.form-stage{
		min-height: 320px;
	}
}

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

input[type="text"], input[type="url"] { 
	width: 100%; 
	padding: 8px; 
	border-radius: 10px;
}

.form-group { 	
	margin-bottom: 25px; 
}

button { 
	padding: 10px 15px; 
	background: none; 
	color: none; 
	border: none; 
	cursor: pointer; 
	font: inherit;
}