/* style.css
	 Clean, modern and responsive styles for the CQuest landing page.
	 - Uses CSS variables for easy tuning
	 - Responsive typography with clamp()
	 - No frameworks; mobile-first approach
*/

:root{
	--bg-grad-1: #f6f9ff;
	--bg-grad-2: #eef6ff;
	--card-bg: #ffffff;
	--accent: #2563eb; /* vibrant blue */
	--muted: #6b7280;
	--radius: 12px;
	--max-width: 960px;
	--container-padding: 1.25rem;
	color-scheme: light;
}

/* Reset-ish (kept minimal) */
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2));
	color:#0f172a;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

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

/* HERO */
.hero{
	min-height:calc(100vh - 72px);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:3rem 1rem;
}
.hero .container{
	text-align:center;
	background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
	border-radius:var(--radius);
	padding:3.5rem 2.25rem;
	box-shadow:0 8px 30px rgba(15,23,42,0.08);
}

.headline{
	margin:0 0 1rem 0;
	font-weight:700;
	line-height:1.06;
	/* fluid size */
	font-size:clamp(1.6rem, 4vw, 2.6rem);
	letter-spacing:-0.02em;
}

.lead{
	margin:0 0 1.5rem 0;
	color:var(--muted);
	font-size:clamp(1rem, 2.4vw, 1.125rem);
	max-width:60ch;
	margin-left:auto;
	margin-right:auto;
}

/* Call-to-Action button */
.botao-chamada-acao{
	background:var(--accent);
	color:white;
	box-shadow:0 6px 18px rgba(37,99,235,0.18);
}
.botao-chamada-acao:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(37,99,235,0.18) }
.botao-chamada-acao:active{ transform:translateY(-1px) scale(.995) }
.botao-chamada-acao:focus{ outline:3px solid rgba(37,99,235,0.18); outline-offset:3px }
.btn.clicked, .botao-chamada-acao.clicked{
	transform: translateY(-1px) scale(.985);
	opacity: .96;
}

/* Confirmation message removed: related styles cleaned up. */

/* Footer */
.site-footer{
	padding:1.25rem 0 2.25rem;
	color:var(--muted);
	font-size:.875rem;
}
.site-footer .small{opacity:.9}

/* Responsive tweaks */
@media (min-width:768px){
	.hero{ padding:4.5rem 1rem }
	.hero .container{ padding:4rem 3rem }
	.headline{ font-size:clamp(2rem, 3.8vw, 3rem) }
}

@media (min-width:1100px){
	.hero .container{ padding:5rem 4rem }
	.headline{ font-size:3.3rem }
}

/* Small accessibility helper for reduced motion */
@media (prefers-reduced-motion: reduce){
	.btn{ transition:none }
}