/* marketing.css — public marketing layer styles (2026-10-08-seo-discoverability-phase-1).
   Complements app.css (dark theme); only covers the mkt-* components used by
   the marketing.html layout family. */

body.marketing {
	margin: 0;
	font-family: system-ui, -apple-system, sans-serif;
	background: linear-gradient(180deg, #06182e 0%, #0a2540 100%);
	color: #ffffff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ── Header ── */
.mkt-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(6, 24, 46, 0.9);
	position: sticky;
	top: 0;
	z-index: 10;
}
.mkt-header-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0.8em 1.2em;
	display: flex;
	align-items: center;
	gap: 1.5em;
	flex-wrap: wrap;
}
.mkt-header .brand { display: flex; align-items: center; gap: 0.6em; text-decoration: none; color: #fff; }
.mkt-header .brand-logo { height: 34px; width: auto; border-radius: 6px; }
.mkt-header .brand-name { font-weight: 650; letter-spacing: 0.3px; }
.mkt-nav { display: flex; gap: 1.1em; flex-wrap: wrap; flex: 1; }
.mkt-nav a { color: #a0b8c8; text-decoration: none; font-size: 0.95em; }
.mkt-nav a:hover { color: #00d4ff; }

/* ── Buttons ── */
.mkt-btn {
	display: inline-block;
	padding: 0.8em 2em;
	font-size: 1.05em;
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}
.mkt-btn-primary { background: #00d4ff; color: #06182e; box-shadow: 0 0 20px rgba(0, 212, 255, 0.4); }
.mkt-btn-primary:hover { background: #33ddff; box-shadow: 0 0 30px rgba(0, 212, 255, 0.6); transform: translateY(-1px); }
.mkt-btn-ghost { background: transparent; color: #00d4ff; border: 1px solid rgba(0, 212, 255, 0.5); }
.mkt-btn-ghost:hover { border-color: #00d4ff; }
.mkt-cta { background: #00d4ff; color: #06182e; padding: 0.55em 1.3em; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mkt-cta:hover { background: #33ddff; }

/* ── Main / hero ── */
.mkt-main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 2.5em 1.2em 3em; }
.mkt-hero { text-align: center; padding: 2.5em 0 3em; }
.mkt-kicker { color: #00d4ff; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.85em; font-weight: 650; }
.mkt-hero h1 {
	font-size: 2.6em; font-weight: 750; line-height: 1.15; margin: 0.4em auto 0.5em; max-width: 16em;
	background: linear-gradient(90deg, #ffffff, #9adcff);
	-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mkt-lead { font-size: 1.15em; color: #a0b8c8; max-width: 42em; line-height: 1.65; margin: 0 auto 1.8em; }
.mkt-article .mkt-lead { margin-left: 0; }
.mkt-actions { display: flex; gap: 0.9em; justify-content: center; flex-wrap: wrap; }

/* ── Sections / cards ── */
.mkt-section { padding: 2.2em 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mkt-section h2 { font-size: 1.7em; font-weight: 700; margin: 0 0 0.9em; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1em; }
.mkt-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 1.3em 1.4em;
}
.mkt-card h3 { margin: 0 0 0.5em; font-size: 1.1em; color: #66e6ff; }
.mkt-card p { color: #a0b8c8; line-height: 1.6; font-size: 0.98em; }
.mkt-card a { color: #00d4ff; text-decoration: none; font-weight: 600; font-size: 0.95em; }
.mkt-card a:hover { text-decoration: underline; }

.mkt-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1em; }
.mkt-steps h3 { color: #66e6ff; margin: 0 0 0.4em; font-size: 1.05em; }
.mkt-steps p { color: #a0b8c8; line-height: 1.6; }
.mkt-shot { margin: 0.8em 0 0; }
.mkt-shot img {
	width: 100%; height: auto; border-radius: 8px; display: block;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.mkt-narrow { max-width: 44em; color: #a0b8c8; line-height: 1.65; }
.mkt-narrow a { color: #00d4ff; }

.mkt-cta-band {
	text-align: center;
	padding: 2.4em 1em;
	margin-top: 2em;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mkt-cta-band h2 { margin: 0 0 0.9em; font-size: 1.5em; }

/* ── Article pages ── */
.mkt-article { max-width: 46em; }
.mkt-article-narrow { max-width: 36em; }
.mkt-article h1 {
	font-size: 2.1em; font-weight: 750; line-height: 1.2; margin: 0 0 0.6em;
	background: linear-gradient(90deg, #ffffff, #9adcff);
	-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mkt-article h2 { font-size: 1.35em; margin: 1.8em 0 0.6em; color: #66e6ff; }
.mkt-article p { color: #c6d5e0; line-height: 1.7; }
.mkt-article a { color: #00d4ff; }
.mkt-list { color: #c6d5e0; line-height: 1.7; padding-left: 1.2em; }
.mkt-list li { margin-bottom: 0.45em; }
.mkt-deflist dt { color: #66e6ff; font-weight: 650; margin-top: 0.9em; }
.mkt-deflist dd { margin: 0.15em 0 0; color: #c6d5e0; line-height: 1.6; }
.mkt-author { font-size: 1.05em; }

/* ── FAQ ── */
.mkt-faq-item {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	margin-bottom: 0.7em;
	padding: 0.9em 1.1em;
}
.mkt-faq-item summary { cursor: pointer; font-weight: 650; color: #e8f4ff; }
.mkt-faq-item p { color: #a0b8c8; line-height: 1.65; margin: 0.6em 0 0.2em; }

/* ── Form ── */
.mkt-form { display: grid; gap: 1em; max-width: 30em; }
.mkt-field { display: grid; gap: 0.35em; }
.mkt-field label { font-size: 0.95em; color: #c6d5e0; }
.mkt-field input, .mkt-field textarea {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	color: #ffffff;
	padding: 0.65em 0.8em;
	font: inherit;
}
.mkt-field input:focus, .mkt-field textarea:focus { outline: none; border-color: #00d4ff; }
.mkt-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }
.mkt-form-note { color: #7d97a8; font-size: 0.85em; margin: 0; }
.mkt-notice { border-radius: 8px; padding: 1em 1.2em; margin: 1em 0; }
.mkt-notice-ok { background: rgba(46, 204, 113, 0.12); border: 1px solid rgba(46, 204, 113, 0.4); }
.mkt-notice-ok h2 { margin: 0 0 0.4em; color: #2ecc71; font-size: 1.2em; }
.mkt-notice-err { background: rgba(231, 76, 60, 0.12); border: 1px solid rgba(231, 76, 60, 0.4); color: #ffb4ab; }

/* ── Footer ── */
.mkt-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(4, 16, 30, 0.6); }
.mkt-footer-inner {
	max-width: 1080px; margin: 0 auto; padding: 1.8em 1.2em 0.8em;
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em;
	color: #a0b8c8; font-size: 0.92em; line-height: 1.6;
}
.mkt-footer-nav { display: grid; gap: 0.35em; justify-items: start; }
.mkt-footer-nav a { color: #a0b8c8; text-decoration: none; }
.mkt-footer-nav a:hover { color: #00d4ff; }
.mkt-footer-copy {
	max-width: 1080px; margin: 0 auto; padding: 0 1.2em 1.4em;
	color: #5f7a8c; font-size: 0.82em;
}

@media (max-width: 780px) {
	.mkt-hero h1 { font-size: 1.9em; }
	.mkt-footer-inner { grid-template-columns: 1fr; }
	.mkt-header-inner { gap: 0.8em; }
}