@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
	--bg:#ffffff;
	--ink:#15171a;
	--ink-2:#565b62;
	--ink-3:#8b9098;
	--line:#e7e6e2;
	--line-strong:#15171a;
	--accent:#e4572e;
	--accent-hover:#c8431f;
	--accent-ink:#ffffff;
	--hover:#f5f3ee;
	--max:1000px;
	--sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--bg:#121316;
		--ink:#eeeeec;
		--ink-2:#a4a9b1;
		--ink-3:#71767e;
		--line:#2a2c31;
		--line-strong:#eeeeec;
		--accent:#f0673e;
		--accent-hover:#ff7a52;
		--accent-ink:#160c07;
		--hover:#1c1e23;
	}
}
:root[data-theme="dark"]{
	--bg:#121316;
	--ink:#eeeeec;
	--ink-2:#a4a9b1;
	--ink-3:#71767e;
	--line:#2a2c31;
	--line-strong:#eeeeec;
	--accent:#f0673e;
	--accent-hover:#ff7a52;
	--accent-ink:#160c07;
	--hover:#1c1e23;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font-family:var(--sans);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

a{ color:var(--accent); }

.wrap{
	max-width:var(--max);
	margin:0 auto;
	padding:0 clamp(18px,4vw,40px);
}

/* ---------- topo ---------- */
header.site{
	border-bottom:1px solid var(--line);
	background:var(--bg);
}
header.site .wrap{
	display:flex;
	align-items:center;
	gap:16px;
	height:66px;
}
.brand{
	display:flex;
	align-items:center;
	gap:10px;
	font-weight:800;
	font-size:18px;
	letter-spacing:-.02em;
	color:var(--ink);
	text-decoration:none;
	margin-right:auto;
}
.brand .mark{ flex:none; display:block; }
.brand img{ width:26px; height:26px; }

.navlinks{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.navlinks a{
	color:var(--ink-2);
	text-decoration:none;
	font-family:var(--mono);
	font-size:13px;
	letter-spacing:.01em;
	padding:7px 10px;
	border-bottom:2px solid transparent;
}
.navlinks a:hover{ color:var(--ink); }
.navlinks a.active{ color:var(--ink); border-bottom-color:var(--ink); }
/* link de volta ao meet, em destaque */
.navlinks a.to-meet{
	color:var(--accent-ink);
	background:var(--accent);
	border-radius:2px;
	font-weight:600;
	padding:8px 14px;
	border-bottom:none;
}
.navlinks a.to-meet:hover{ background:var(--accent-hover); color:var(--accent-ink); }

/* ---------- hero ---------- */
.hero{
	padding:clamp(56px,10vw,104px) 0 clamp(40px,7vw,72px);
	border-bottom:1px solid var(--line);
}
.hero .kicker{
	font-family:var(--mono);
	font-size:12.5px;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--ink-3);
	margin:0 0 20px;
}
.hero h1{
	font-size:clamp(40px,8vw,80px);
	font-weight:800;
	letter-spacing:-.035em;
	line-height:.98;
	margin:0 0 22px;
	max-width:16ch;
	text-wrap:balance;
}
.hero h1 .a{ color:var(--accent); }
.hero p.sub{
	font-size:clamp(16px,2.3vw,19px);
	color:var(--ink-2);
	max-width:56ch;
	margin:0 0 34px;
	line-height:1.5;
}
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
	display:inline-flex;
	align-items:center;
	font-family:var(--mono);
	font-weight:600;
	font-size:13.5px;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:15px 26px;
	border-radius:2px;
	text-decoration:none;
	border:2px solid var(--line-strong);
	transition:background .14s ease, color .14s ease;
}
.btn.primary{
	background:var(--accent);
	border-color:var(--accent);
	color:var(--accent-ink);
}
.btn.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.ghost{
	background:transparent;
	color:var(--ink);
}
.btn.ghost:hover{ background:var(--hover); }

/* ---------- blocos ---------- */
section{ padding:clamp(44px,7vw,68px) 0; }
section h2{
	font-size:clamp(22px,3.4vw,30px);
	font-weight:800;
	letter-spacing:-.02em;
	margin:0 0 8px;
}
section > .wrap > p.lead{
	color:var(--ink-2);
	margin:0 0 30px;
	max-width:60ch;
}
.grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:0;
	border-top:1px solid var(--line-strong);
	border-left:1px solid var(--line);
}
.card{
	background:var(--bg);
	border-right:1px solid var(--line);
	border-bottom:1px solid var(--line);
	padding:26px 24px 30px;
}
.card h3{
	margin:0 0 10px;
	font-size:18px;
	font-weight:700;
	letter-spacing:-.01em;
}
.card p{ margin:0; color:var(--ink-2); font-size:15px; }
.card .tag{
	display:inline-block;
	font-family:var(--mono);
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--accent);
	padding:0 0 14px;
	font-weight:600;
}

/* ---------- documentos (termos, privacidade...) ---------- */
.doc{ padding:clamp(44px,7vw,72px) 0; }
.doc .wrap{ max-width:760px; }
.doc h1{
	font-size:clamp(30px,5.2vw,46px);
	font-weight:800;
	letter-spacing:-.03em;
	line-height:1.02;
	margin:0 0 8px;
}
.doc .updated{
	font-family:var(--mono);
	color:var(--ink-3);
	font-size:12.5px;
	letter-spacing:.02em;
	margin:0 0 34px;
}
.doc h2{
	font-size:18px;
	font-weight:700;
	letter-spacing:-.01em;
	margin:38px 0 10px;
	padding-top:20px;
	border-top:1px solid var(--line);
}
.doc p, .doc li{
	color:var(--ink-2);
	font-size:16px;
	line-height:1.7;
}
.doc ul{ padding-left:20px; }
.doc li{ margin-bottom:8px; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc a{ text-decoration:underline; text-underline-offset:2px; }
.doc a:hover{ color:var(--accent-hover); }

/* ---------- rodapé ---------- */
footer.site{
	border-top:1px solid var(--line);
	padding:26px 0 44px;
	font-family:var(--mono);
	color:var(--ink-3);
	font-size:12.5px;
}
footer.site .wrap{
	display:flex;
	gap:8px 18px;
	flex-wrap:wrap;
	align-items:center;
}
footer.site a{ color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent; }
footer.site a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
footer.site .spacer{ margin-left:auto; }

@media (max-width:560px){
	header.site .wrap{ height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
	.brand{ margin-right:0; width:100%; }
	.navlinks{ width:100%; }
	footer.site .spacer{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion: reduce){
	*{ transition:none !important; }
}