:root{
	--bg1:#0f172a; /* slate-900 */
	--bg2:#0b1220; /* deep */
	--accent:#06b6d4; /* cyan-400 */
	--accent-hover:#0891b2; /* cyan-500 */
	--success:#10b981; /* emerald-500 */
	--muted:rgba(255,255,255,0.7);
	--glass:rgba(255,255,255,0.04);
	--card:rgba(255,255,255,0.03);
	--border:rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:white;
	background: radial-gradient(1200px 600px at 10% 10%, rgba(6,182,212,0.06), transparent 8%),
									linear-gradient(180deg,var(--bg1),var(--bg2));
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	padding:48px 20px;
}
.container{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:48px;
	padding:24px 0;
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
	width:44px;
	height:44px;
	border-radius:10px;
	background:linear-gradient(135deg,var(--accent),#7c3aed);
	display:grid;
	place-items:center;
	font-weight:700;
	color:#031025;
	box-shadow: 0 6px 18px rgba(4,8,20,0.5), inset 0 -6px 18px rgba(255,255,255,0.06);
}
.logo svg{width:20px;height:20px}
.brand h4{margin:0;font-size:15px;letter-spacing:0.4px}
.brand p{margin:0;font-size:12px;color:var(--muted)}
.nav{display:flex;gap:24px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;transition:color 0.2s}
.nav a:hover{color:white}

.hero{
	text-align:center;
	margin-bottom:80px;
	padding:60px 0;
}
.hero h1{
	font-size:48px;
	line-height:1.1;
	margin:0 0 16px;
	font-weight:700;
	letter-spacing:-0.02em;
	background:linear-gradient(135deg, white, var(--accent));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	background-clip:text;
}
@media(min-width:720px){.hero h1{font-size:64px}}
.hero p{
	margin:0;
	color:var(--muted);
	font-size:20px;
	max-width:700px;
	margin:0 auto 32px;
	line-height:1.6;
}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:16px 24px;
	border-radius:12px;
	font-weight:600;
	text-decoration:none;
	font-size:16px;
	transition:all 0.2s ease;
	border:1px solid var(--border);
}
.btn-primary{
	background:linear-gradient(135deg,var(--accent),#7c3aed);
	color:#031025;
	border-color:var(--accent);
	box-shadow:0 8px 24px rgba(6,182,212,0.3);
}
.btn-primary:hover{
	transform:translateY(-2px);
	box-shadow:0 12px 32px rgba(6,182,212,0.4);
}
.btn-secondary{
	background:transparent;
	color:white;
	border-color:var(--border);
}
.btn-secondary:hover{
	background:var(--glass);
	border-color:var(--accent);
}

.disclosure-badge{
	display:inline-block;
	background:rgba(6,182,212,0.1);
	border:1px solid var(--accent);
	color:var(--accent);
	padding:8px 16px;
	border-radius:8px;
	font-size:14px;
	margin-bottom:32px;
}
.disclosure-badge a{
	color:var(--accent);
	text-decoration:underline;
}

.features{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:32px;
	margin-bottom:80px;
}
.feature-card{
	background:var(--card);
	padding:32px;
	border-radius:16px;
	border:1px solid var(--border);
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover{
	transform:translateY(-4px);
	box-shadow:0 20px 40px rgba(2,6,23,0.4);
}
.feature-icon{
	width:48px;
	height:48px;
	border-radius:12px;
	background:linear-gradient(135deg,var(--accent),#7c3aed);
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:20px;
	font-size:24px;
}
.feature-card h3{
	margin:0 0 12px;
	font-size:24px;
	font-weight:600;
}
.feature-card p{
	margin:0 0 16px;
	color:var(--muted);
	line-height:1.6;
}
.feature-card p:last-child{
	margin-bottom:0;
}
.feature-card ul{
	margin:12px 0 0;
	padding-left:20px;
	color:var(--muted);
	line-height:1.8;
}

.transparency-section{
	background:linear-gradient(135deg, var(--card), rgba(6,182,212,0.02));
	border:1px solid var(--border);
	border-radius:20px;
	padding:48px;
	margin-bottom:80px;
}
.transparency-section h2{
	text-align:center;
	font-size:36px;
	font-weight:700;
	margin:0 0 16px;
}
.transparency-section .subtitle{
	text-align:center;
	color:var(--muted);
	font-size:18px;
	margin:0 0 48px;
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
}
.transparency-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:24px;
}
.transparency-item{
	background:rgba(6,182,212,0.05);
	border:1px solid rgba(6,182,212,0.2);
	border-radius:12px;
	padding:24px;
}
.transparency-item h4{
	margin:0 0 8px;
	font-size:18px;
	color:var(--accent);
}
.transparency-item p{
	margin:0;
	color:var(--muted);
	line-height:1.6;
	font-size:15px;
}

.how-it-works{
	margin-bottom:80px;
}
.section-title{
	text-align:center;
	font-size:36px;
	font-weight:700;
	margin:0 0 16px;
}
.section-subtitle{
	text-align:center;
	color:var(--muted);
	font-size:18px;
	margin:0 0 48px;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}
.steps{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:32px;
}
.step{
	text-align:center;
	padding:32px;
	background:var(--card);
	border-radius:16px;
	border:1px solid var(--border);
}
.step-number{
	width:60px;
	height:60px;
	border-radius:50%;
	background:linear-gradient(135deg,var(--accent),#7c3aed);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:24px;
	font-weight:700;
	color:#031025;
	margin:0 auto 20px;
}
.step h4{
	margin:0 0 12px;
	font-size:20px;
	font-weight:600;
}
.step p{
	margin:0;
	color:var(--muted);
	line-height:1.6;
}

.faq{
	margin-bottom:80px;
}
.faq-item{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:16px;
	padding:32px;
	margin-bottom:24px;
}
.faq-item h4{
	margin:0 0 12px;
	font-size:20px;
	font-weight:600;
}
.faq-item p{
	margin:0;
	color:var(--muted);
	line-height:1.6;
}

footer{
	text-align:center;
	padding:48px 0;
	border-top:1px solid var(--border);
	color:var(--muted);
	font-size:14px;
}
.footer-links{
	display:flex;
	justify-content:center;
	gap:24px;
	margin-bottom:16px;
	flex-wrap:wrap;
}
.footer-links a{
	color:var(--muted);
	text-decoration:none;
	transition:color 0.2s;
}
.footer-links a:hover{
	color:white;
}

/* accessibility focus */
.btn:focus{outline:3px solid rgba(6,182,212,0.14);outline-offset:4px}