:root {
	--graphite: #1f2937;
	--graphite-2: #111827;
	--teal: #14b8a6;
	--teal-dark: #0f766e;
	--amber: #f59e0b;
	--paper: #f8fafc;
	--ink: #172033;
	--muted: #64748b;
	--line: #dbe3ee;
	--white: #ffffff;
	--blue: #2563eb;
	--rose: #e11d48;
	--green: #16a34a;
	--shadow: 0 24px 80px rgba(15, 23, 42, 0.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	color: var(--ink);
	background: #eef3f8;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; letter-spacing: 0; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 14px clamp(18px, 4vw, 56px);
	background: rgba(248, 250, 252, 0.88);
	border-bottom: 1px solid rgba(219, 227, 238, 0.82);
	backdrop-filter: blur(16px);
}
.brand-link { display: inline-flex; align-items: center; min-width: 180px; }
.brand-link img { display: block; width: 180px; height: auto; }
.site-header nav { display: flex; justify-content: center; align-items: center; gap: 6px; }
.site-header nav a, .header-cta {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 8px;
	color: #344256;
	font-size: 14px;
	font-weight: 700;
}
.site-header nav a:hover, .header-cta:hover { background: #e7eef6; }
.header-cta { color: var(--teal-dark); border: 1px solid rgba(20, 184, 166, 0.35); }

.hero-section {
	position: relative;
	min-height: 720px;
	display: grid;
	align-items: center;
	overflow: hidden;
	padding: 92px clamp(18px, 5vw, 72px) 96px;
	background:
		linear-gradient(90deg, rgba(17, 24, 39, 0.92) 0%, rgba(31, 41, 55, 0.78) 44%, rgba(31, 41, 55, 0.32) 100%),
		radial-gradient(circle at 76% 20%, rgba(20, 184, 166, 0.35), transparent 34%),
		#111827;
}
.hero-scene {
	position: absolute;
	inset: 70px -140px 48px auto;
	width: min(760px, 62vw);
	opacity: 0.94;
	transform: rotate(-2deg);
}
.hero-content { position: relative; z-index: 2; max-width: 760px; color: var(--white); }
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--teal);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; font-size: clamp(48px, 8vw, 96px); line-height: 0.96; letter-spacing: 0; }
h2 { margin-bottom: 16px; color: var(--graphite-2); font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: 0; }
h3 { margin-bottom: 10px; color: var(--graphite-2); font-size: 22px; line-height: 1.15; letter-spacing: 0; }
.hero-copy { max-width: 680px; color: #dbeafe; font-size: 20px; line-height: 1.55; }
.hero-actions, .detail-actions, .addon-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hero-actions { margin-top: 34px; }
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 800;
	line-height: 1;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.button:disabled, .button-disabled { cursor: not-allowed; opacity: 0.72; }
.button-primary { color: #062722; background: var(--teal); box-shadow: 0 16px 36px rgba(20, 184, 166, 0.3); }
.button-primary:hover { transform: translateY(-1px); background: #2dd4bf; }
.button-secondary { color: var(--graphite); background: var(--white); border-color: var(--line); }
.button-secondary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); }
.button-compact { min-height: 38px; padding: 0 14px; color: #062722; background: #ccfbf1; border-color: rgba(20, 184, 166, 0.45); }
.button-disabled { color: var(--muted); background: #f1f5f9; border-color: var(--line); }
.buy-control { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.button-error { max-width: 280px; color: #b91c1c; font-size: 12px; font-weight: 700; line-height: 1.35; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-proof span { padding: 8px 11px; color: #d1fae5; background: rgba(20, 184, 166, 0.16); border: 1px solid rgba(45, 212, 191, 0.28); border-radius: 999px; font-size: 13px; font-weight: 800; }

.product-mockup {
	display: grid;
	grid-template-columns: 164px 1fr;
	width: 720px;
	min-height: 470px;
	overflow: hidden;
	background: rgba(248, 250, 252, 0.96);
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: 16px;
	box-shadow: var(--shadow);
}
.mockup-sidebar { display: flex; flex-direction: column; gap: 12px; padding: 22px; color: #cbd5e1; background: var(--graphite); font-size: 13px; font-weight: 800; }
.mockup-logo-dot { width: 42px; height: 42px; margin-bottom: 18px; background: url("../img/icon.svg") center / cover no-repeat; }
.mockup-main { padding: 24px; }
.mockup-topbar, .mockup-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mockup-topbar { margin-bottom: 22px; color: var(--graphite); }
.mockup-topbar span { padding: 7px 10px; color: var(--teal-dark); background: #ccfbf1; border-radius: 999px; font-size: 12px; font-weight: 800; }
.mockup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.mockup-stats div, .mockup-row, .value-item, .addon-card, .pricing-card, .pricing-core, .security-grid article { background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.mockup-stats div { padding: 16px; }
.mockup-stats b { display: block; margin-bottom: 4px; color: var(--teal-dark); font-size: 28px; }
.mockup-stats span, .mockup-row span { color: var(--muted); font-size: 12px; }
.mockup-list { display: grid; gap: 12px; }
.mockup-row { justify-content: flex-start; padding: 16px; }
.mockup-row div { flex: 1; }
.mockup-row strong { display: block; color: var(--graphite); }
.mockup-row em { color: var(--teal-dark); font-size: 12px; font-style: normal; font-weight: 900; }
.mockup-row.is-unread { border-color: rgba(245, 158, 11, 0.45); background: #fffbeb; }

.section { padding: 88px clamp(18px, 5vw, 72px); }
.section-tight { padding-top: 72px; }
.section-heading { max-width: 860px; margin-bottom: 34px; }
.section-heading p, .split-band p, .detail-layout p, .page-hero p, .page-content { color: var(--muted); font-size: 18px; line-height: 1.65; }
.row-heading { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 900; }
.value-grid, .security-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.value-item, .security-grid article { padding: 22px; }
.value-item p, .security-grid p, .addon-card p, .pricing-card p, .pricing-core p { color: var(--muted); line-height: 1.55; }
.split-band, .security-band { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feature-list span { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; color: var(--graphite); background: #f1f5f9; border: 1px solid var(--line); border-radius: 8px; font-weight: 800; }
.feature-list span::before, .addon-card li::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 99px; background: var(--teal); }
.addon-grid, .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.addon-card, .pricing-card, .pricing-core { position: relative; padding: 22px; overflow: hidden; }
.addon-card::before, .pricing-card::before, .addon-detail-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--teal); }
.accent-amber::before { background: var(--amber); }
.accent-graphite::before { background: var(--graphite); }
.accent-blue::before { background: var(--blue); }
.accent-rose::before { background: var(--rose); }
.accent-green::before { background: var(--green); }
.addon-card-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.addon-card-head span, .addon-card-head em, .pricing-card span, .pricing-core span { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.addon-card-head em { color: var(--teal-dark); }
.addon-card ul { display: grid; gap: 8px; padding: 0; margin: 18px 0; list-style: none; }
.addon-card li { display: flex; align-items: center; gap: 8px; color: var(--graphite); font-size: 14px; font-weight: 700; }
.addon-card-actions { justify-content: space-between; margin-top: 18px; }
.addon-card-actions strong, .pricing-card strong, .pricing-core strong { color: var(--graphite); font-size: 18px; }
.addon-card-actions a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--graphite); background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; font-weight: 900; }
.security-band { color: var(--white); background: var(--graphite-2); }
.security-band h2 { color: var(--white); }
.security-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.security-grid article { background: rgba(248, 250, 252, 0.06); border-color: rgba(226, 232, 240, 0.18); }
.security-grid strong { display: block; color: var(--white); }
.security-grid p { color: #cbd5e1; }
.faq-band { background: #edf6f4; }
.faq-list { display: grid; gap: 12px; max-width: 900px; }
.faq-list details { padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.faq-list summary { cursor: pointer; color: var(--graphite); font-weight: 900; }
.faq-list p { margin: 14px 0 0; color: var(--muted); line-height: 1.6; }

.page-hero, .addon-detail-hero, .status-page { padding: 96px clamp(18px, 5vw, 72px) 72px; background: var(--white); border-bottom: 1px solid var(--line); }
.page-hero { max-width: none; }
.page-hero h1, .addon-detail-hero h1, .status-page h1 { max-width: 980px; color: var(--graphite-2); font-size: clamp(42px, 7vw, 78px); }
.page-hero p, .addon-detail-hero p, .status-page p { max-width: 780px; }
.addon-detail-hero { position: relative; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; color: var(--teal-dark); font-weight: 900; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; }
.feature-list.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-layout { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.pricing-core { position: sticky; top: 96px; background: var(--graphite); }
.pricing-core h2, .pricing-core strong { color: var(--white); }
.pricing-core p { color: #cbd5e1; }
.pricing-card { display: grid; gap: 12px; }
.status-page { min-height: 520px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.site-footer { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: 40px; padding: 56px clamp(18px, 5vw, 72px); color: #dbeafe; background: var(--graphite-2); }
.site-footer img { width: 180px; height: auto; filter: brightness(1.1); }
.site-footer p { max-width: 420px; color: #cbd5e1; line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-links div { display: grid; gap: 9px; }
.footer-links strong { color: var(--white); }
.footer-links a, .footer-links span { color: #cbd5e1; font-size: 14px; }

@media (max-width: 1180px) {
	.catalog-grid, .addon-grid, .pricing-grid, .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero-scene { width: 620px; right: -260px; }
}
@media (max-width: 860px) {
	.site-header { grid-template-columns: 1fr; }
	.site-header nav { justify-content: flex-start; overflow-x: auto; }
	.header-cta { display: none; }
	.hero-section { min-height: 760px; align-items: start; padding-top: 70px; }
	.hero-scene { inset: auto -210px 26px auto; width: 590px; opacity: 0.42; }
	.hero-copy { font-size: 18px; }
	.split-band, .security-band, .detail-layout, .pricing-layout, .site-footer { grid-template-columns: 1fr; }
	.pricing-core { position: static; }
	.security-grid, .footer-links { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.section, .page-hero, .addon-detail-hero, .status-page { padding-left: 16px; padding-right: 16px; }
	.addon-grid, .catalog-grid, .pricing-grid, .value-grid, .feature-list, .feature-list.large { grid-template-columns: 1fr; }
	.hero-actions, .detail-actions { align-items: stretch; flex-direction: column; }
	.button { width: 100%; }
	.product-mockup { grid-template-columns: 1fr; width: 520px; }
	.mockup-sidebar { display: none; }
}