/* Base */
:root {
	--bg: #ffffff;
	--text: #101828;
	--muted: #667085;
	--brand: #0f6cd6; /* blue accent */
	--brand-600: #0a57ad;
	--brand-100: #e8f1fd;
	--card: #ffffff;
	--border: #e5e7eb;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--text);
	background: var(--bg);
	line-height: 1.6;
}

.container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255,255,255,0.9);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-link { display: inline-flex; align-items: center; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-text { font-weight: 700; letter-spacing: 0.2px; }

.top-nav a {
	color: var(--text);
	text-decoration: none;
	margin-left: 18px;
	font-weight: 500;
	opacity: 0.9;
}
.top-nav a:hover { color: var(--brand); }

/* Hero */
.hero {
	background: linear-gradient(180deg, #f7faff 0%, #ffffff 70%);
	border-bottom: 1px solid var(--border);
}
.hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding: 56px 0; }
.hero-copy h1 { font-size: 44px; line-height: 1.1; margin: 0 0 10px; }
.hero-copy p { color: var(--muted); margin: 0 0 20px; font-size: 18px; }

.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta {
	display: inline-flex; align-items: center; gap: 10px;
	text-decoration: none;
}
.secondary {
	color: var(--brand);
	text-decoration: none; font-weight: 600;
}
.secondary:hover { color: var(--brand-600); }

.hero-art { min-height: 220px; border-radius: 16px; background:
	radial-gradient(120px 120px at 20% 30%, var(--brand-100), transparent),
	radial-gradient(120px 120px at 80% 40%, #e3f7ff, transparent),
	linear-gradient(180deg, #f6fbff, #eef6ff);
	border: 1px solid var(--border);
	display: grid; place-items: center;
	padding: 8px;
}
.hero-img { width: 100%; height: auto; max-width: 520px; transition: opacity .45s ease; }
.hero-img.is-fading { opacity: 0; }

/* Sections */
.section { padding: 56px 0; }
.section.alt { background: #fafbff; }
.section h2 { font-size: 28px; margin: 0 0 16px; }

.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); align-items: start; }

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 18px;
	box-shadow: 0 1px 1px rgba(16,24,40,0.02);
}
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }

.scope-list { margin: 10px 0 0; padding-left: 18px; }
.scope-list code { background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
.muted { color: var(--muted); }

.steps { padding-left: 18px; }
.steps.small li { margin-bottom: 8px; }
.after-install { margin-top: 16px; }

.note { background: #f8fafc; border: 1px solid var(--border); padding: 14px; border-radius: 10px; }

.faq details { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.faq summary { cursor: pointer; font-weight: 600; }

.bullet { padding-left: 18px; }

.support-box { margin-top: 16px; background: var(--brand-100); border: 1px solid var(--border); padding: 14px; border-radius: 10px; }
.support-box a { color: var(--brand); font-weight: 600; text-decoration: none; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: #fff; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.footer-links a { color: var(--muted); text-decoration: none; margin-left: 14px; }
.footer-links a:hover { color: var(--brand); }

/* Accents */
.accent-letter { color: #3cc; }

/* Responsive */
@media (max-width: 960px) {
	.hero-inner { grid-template-columns: 1fr; }
	.grid-3 { grid-template-columns: 1fr; }
	.grid-2 { grid-template-columns: 1fr; }
	.top-nav { display: none; }
}