*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

:root {
	--ink: #0f1117;
	--ink-2: #363c4a;
	--ink-3: #6b7280;
	--ink-4: #9ca3af;
	--paper: #ffffff;
	--paper-2: #f7f8fa;
	--paper-3: #f0f2f5;
	--line: #e4e7ec;
	--line-2: #d1d5db;
	--accent: #1c6ef3;
	--accent-d: #1558d6;
	--accent-l: #eff4ff;
	--accent-t: rgba(28, 110, 243, .1);
}

html {
	scroll-behavior: smooth
}

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	background: var(--paper);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden
}

/* NAV */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--line)
}

.logo {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none
}

.logo-mark {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	flex-shrink: 0
}

.logo-name {
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.4px
}

.nav-mid {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 2px
}

.nav-mid a {
	padding: 6px 14px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-3);
	text-decoration: none;
	transition: background .15s, color .15s
}

.nav-mid a:hover {
	background: var(--paper-2);
	color: var(--ink)
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 10px
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: none;
	transition: all .18s;
	white-space: nowrap
}

.btn-outline {
	background: transparent;
	border: 1.5px solid var(--line-2);
	color: var(--ink-2)
}

.btn-outline:hover {
	border-color: var(--ink-3);
	color: var(--ink)
}

.btn-solid {
	background: var(--ink);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

.btn-solid:hover {
	background: #1a2032;
	transform: translateY(-1px)
}

.btn-accent {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 1px 3px rgba(28, 110, 243, .25), 0 4px 16px rgba(28, 110, 243, .15)
}

.btn-accent:hover {
	background: var(--accent-d);
	transform: translateY(-1px)
}

/* HERO */
.hero {
	padding: 100px 0 60px;
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	align-items: center;
	gap: 80px
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--accent-l);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: .02em;
	margin-bottom: 24px
}

.hero-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	animation: pulse 2s ease-in-out infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .5;
		transform: scale(.8)
	}
}

.hero-h1 {
	font-size: clamp(42px, 4.8vw, 70px);
	font-weight: 800;
	letter-spacing: -2.5px;
	line-height: 1.05;
	color: var(--ink);
	margin-bottom: 22px
}

.hero-h1 mark {
	background: none;
	color: var(--accent);
	position: relative;
	display: inline-block
}

.hero-h1 mark::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 3px;
	background: var(--accent);
	border-radius: 2px;
	opacity: .25
}

.hero-sub {
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink-3);
	max-width: 440px;
	margin-bottom: 36px
}

.hero-sub b {
	color: var(--ink-2);
	font-weight: 600
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 44px
}

.hero-actions .btn {
	padding: 11px 22px;
	font-size: 14.5px
}

.hero-trust {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 28px;
	border-top: 1px solid var(--line)
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--ink-3);
	font-weight: 500
}

.trust-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--line-2)
}

/* HERO VISUAL */
.hero-visual {
	position: relative
}

.hero-visual::before {
	content: '';
	position: absolute;
	inset: -24px;
	border-radius: 24px;
	background: radial-gradient(ellipse 80% 80% at 60% 50%, rgba(28, 110, 243, .05), transparent 70%);
	z-index: -1
}

.hero-window {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06), 0 32px 64px rgba(0, 0, 0, .06);
	transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
	transition: transform .4s ease
}

.hero-window:hover {
	transform: perspective(1200px) rotateY(0) rotateX(0)
}

.wbar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	background: white;
	border-bottom: 1px solid var(--line)
}

.wdot {
	width: 12px;
	height: 12px;
	border-radius: 50%
}

.wdot:nth-child(1) {
	background: #ff5f57
}

.wdot:nth-child(2) {
	background: #febc2e
}

.wdot:nth-child(3) {
	background: #28c840
}

.wtitle {
	flex: 1;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-4)
}

.hero-ph {
	width: 100%;
	aspect-ratio: 16/10;
	background: linear-gradient(145deg, #f0f4ff, #e8edf8);
	position: relative;
	overflow: hidden;
	display: flex
}

.hero-ph-sidebar {
	width: 190px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, .65);
	border-right: 1px solid var(--line);
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 5px
}

.ph-row {
	border-radius: 6px;
	background: rgba(0, 0, 0, .07)
}

.ph-row.a {
	background: rgba(28, 110, 243, .13)
}

.hero-ph-main {
	flex: 1;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden
}

.ph-card {
	background: white;
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0
}

.ph-avatar {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	flex-shrink: 0
}

.ph-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px
}

.ph-line {
	height: 10px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .07)
}

.ph-badge-green {
	height: 18px;
	width: 52px;
	border-radius: 20px;
	background: rgba(40, 200, 64, .15);
	flex-shrink: 0
}

.ph-badge-blue {
	height: 18px;
	width: 52px;
	border-radius: 20px;
	background: rgba(28, 110, 243, .15);
	flex-shrink: 0
}

.ph-badge-amber {
	height: 18px;
	width: 52px;
	border-radius: 20px;
	background: rgba(251, 146, 60, .15);
	flex-shrink: 0
}

.hero-ph-label {
	position: absolute;
	bottom: 12px;
	right: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-4)
}

.hero-badge {
	position: absolute;
	bottom: -16px;
	right: -16px;
	background: white;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap
}

.cmd-carousel {
	display: inline-block;
	height: 20px;
	overflow: hidden;
	vertical-align: middle;
	position: relative;
  color: var(--accent);
	background: var(--accent-l);
	padding: 0 8px;
	border-radius: 6px;
}

.cmd-track {
	display: block;
}

.cmd-item {
	display: block;
	height: 20px;
	line-height: 20px;
	font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
  text-align: center;
}

/* SECTION COMMONS */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px
}

.eyebrow::before {
	content: '';
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: var(--accent)
}

.section-h2 {
	font-size: clamp(30px, 3vw, 46px);
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: 1.1;
	color: var(--ink);
	margin-bottom: 14px
}

.section-sub {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-3);
	max-width: 500px
}

/* FEATURES */
.features-wrap {
	background: var(--paper-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 64px 40px
}

.features-inner {
	max-width: 1320px;
	margin: 0 auto
}

.features-hd {
	margin-bottom: 48px
}

.tabs-wrap {
	position: relative
}

.tabs-rail {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	background: white;
	border: 1px solid var(--line);
	border-radius: 12px 12px 0 0;
	border-bottom: none;
	position: relative
}

.tabs-rail::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--line)
}

.tabs-rail::-webkit-scrollbar {
	display: none
}

.tab-btn {
	position: relative;
	flex-shrink: 0;
	padding: 13px 20px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-3);
	cursor: pointer;
	white-space: nowrap;
	outline: none;
	transition: color .15s;
	z-index: 1
}

.tab-btn:hover {
	color: var(--ink)
}

.tab-btn.active {
	color: var(--ink);
	font-weight: 700
}

.tab-indicator {
	position: absolute;
	bottom: 0;
	height: 2.5px;
	background: var(--accent);
	border-radius: 2px 2px 0 0;
	transition: left .32s cubic-bezier(.4, 0, .2, 1), width .32s cubic-bezier(.4, 0, .2, 1);
	z-index: 10;
	pointer-events: none
}

.panels-wrap {
	border: 1px solid var(--line);
	border-radius: 0 0 12px 12px;
	border-top: none;
	background: white;
	overflow: hidden;
	position: relative
}

.tab-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none
}

.tab-panel.active {
	position: relative;
	opacity: 1;
	z-index: 1;
	pointer-events: auto
}

.panel-shot {
	width: 100%;
	aspect-ratio: 1667/1010;
	background: linear-gradient(145deg, #f7f8fa 0%, #eef1f6 50%, #f3f4f8 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px
}

.panel-shot img {
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	position: relative;
	z-index: 1;
	border: 1px solid #dbdbdb;
	box-shadow: 0px 6px 11px rgba(0, 0, 0, 0.1);
}

.shot-ph {
	position: relative;
	text-align: center;
	padding: 20px
}

.shot-ph-num {
	font-size: 72px;
	font-weight: 800;
	letter-spacing: -4px;
	color: rgba(0, 0, 0, .06);
	line-height: 1
}

.shot-ph-lbl {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-top: 4px
}

.panel-foot {
	padding: 20px 24px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	min-height: 120px;
}

.feat-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -.3px;
	margin-bottom: 5px
}

.feat-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-3);
	max-width: 580px
}

.feat-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: flex-start
}

.ftag {
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--paper-2);
	border: 1px solid var(--line-2);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-3)
}

.features-cards-hd {
	margin-top: 48px;
	text-align: center
}

.features-cards-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.4px;
	margin-bottom: 6px
}

.features-cards-desc {
	font-size: 15px;
	color: var(--ink-3);
	line-height: 1.5
}

.features-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 24px
}

.features-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 28px
}

.features-badge {
	padding: 6px 16px;
	border-radius: 100px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-2);
	letter-spacing: -.1px;
	background-color: white;
}

.features-badge-more {
	padding: 6px 16px;
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 400;
	font-style: italic;
	background: white;
	border: 1px dashed var(--line);
	letter-spacing: -.1px
}

.feature-card {
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(145deg, #f7f8fa 0%, #eef1f6 50%, #f3f4f8 100%);
	transition: box-shadow .2s ease
}

.feature-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08)
}

.feature-card img {
	width: 100%;
	aspect-ratio: 1667/1010;
	object-fit: cover;
	display: block;
}

.feature-card-preview {
	padding: 24px;
	padding-top: 65px !important;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative
}

.feature-card-label {
	position: absolute;
	top: 16px;
	left: 18px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--ink)
}

/* Themes card */
.fc-themes {
	flex-direction: column;
	gap: 22px;
	overflow: hidden;
	padding: 24px 0
}

.fc-marquee-track {
	overflow: hidden;
	width: 100%
}

.fc-marquee-inner {
	display: flex;
	gap: 10px;
	width: max-content
}

.fc-marquee-left .fc-marquee-inner {
	animation: marqueeLeft 25s linear infinite
}

.fc-marquee-right .fc-marquee-inner {
	animation: marqueeRight 25s linear infinite
}

@keyframes marqueeLeft {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(calc(-50% - 5px))
	}
}

@keyframes marqueeRight {
	0% {
		transform: translateX(calc(-50% - 5px))
	}

	100% {
		transform: translateX(0)
	}
}

.fc-theme-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex-shrink: 0
}

.fc-theme-item span {
	font-size: 12px;
	color: var(--ink-3);
	font-weight: 500
}

.fc-theme-win {
	width: 90px;
	aspect-ratio: 4/3;
	border-radius: 5px;
	padding: 5px 6px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow: hidden
}

.fc-dots {
	display: flex;
	gap: 2.5px;
	margin-bottom: 2px
}

.fc-dots span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	display: block
}

.fc-bar {
	height: 3px;
	border-radius: 1.5px
}

/* Density card */
.fc-density {
	gap: 14px;
	align-items: flex-start
}

.fc-density-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%
}

.fc-density-badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ink-3);
	text-align: center;
	padding: 3px 8px;
	border-radius: 4px;
	background: white;
	border: 1px solid var(--line);
	align-self: center
}

.fc-density-badge.active {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-l)
}

.fc-list {
	background: white;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden
}

.fc-list-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line)
}

.fc-list-row:last-child {
	border-bottom: none
}

.fc-list.compact .fc-list-row {
	padding: 5px 10px
}

.fc-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0
}

.fc-dot.green {
	background: #28c840
}

.fc-dot.gray {
	background: #ccc
}

.fc-list-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0
}

.fc-list-info strong {
	font-size: 11px;
	font-weight: 600;
	color: var(--ink)
}

.fc-list-info small {
	font-size: 9px;
	color: var(--ink-4)
}

.fc-list.compact .fc-list-info {
	flex-direction: row
}

/* Roundness card */
.fc-roundness {
	flex-direction: column;
	gap: 10px;
	width: 100%
}

.fc-round-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	width: 100%
}

.fc-round-row.active {
	background: var(--accent-l);
	outline: 1.5px solid var(--accent);
	outline-offset: -1.5px
}

.fc-round-demo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1
}

.fc-round-btn {
	padding: 5px 14px;
	background: var(--ink);
	color: white;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap
}

.fc-round-chip {
	padding: 3px 10px;
	background: #dcfce7;
	color: #16a34a;
	font-size: 10px;
	font-weight: 600;
	border: 1px solid #bbf7d0;
	white-space: nowrap
}

.fc-round-input {
	width: 60px;
	height: 22px;
	background: white;
	border: 1px solid var(--line-2)
}

.fc-round-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-3);
	width: 44px;
	text-align: right;
	flex-shrink: 0
}

/* WHY */
/* WHY — PERSONA CARDS */
.why-wrap {
	border-top: 1px solid var(--line);
	padding: 64px 40px;
	background: var(--paper-2)
}

.why-inner {
	max-width: 1320px;
	margin: 0 auto
}

.alt-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 48px;
	align-items: stretch;
}

.alt-card {
	background: white;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: box-shadow .2s;
	position: relative;
}

.alt-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .06)
}

.alt-card-tool {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-bottom: 10px;
}

.alt-card-name {
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.4px;
	margin-bottom: 4px;
}

.alt-card-tagline {
	font-size: 13px;
	color: var(--ink-3);
	font-weight: 500;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 18px;
	line-height: 1.5;
}

.alt-card-pick {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-bottom: 8px;
}

.alt-card-desc {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ink-3);
	flex: 1;
}

.alt-card-but {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--ink-4);
	line-height: 1.5;
}

.alt-card-but strong {
	color: var(--ink-3);
	font-weight: 600
}

/* Dockev card — highlighted */
.alt-card.featured-alt {
	border-color: var(--accent);
	background: white;
	box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(28, 110, 243, .1);
}

.alt-card.featured-alt:hover {
	box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(28, 110, 243, .15)
}

.alt-card.featured-alt .alt-card-tool {
	color: var(--accent)
}

.alt-card.featured-alt .alt-card-name {
	color: var(--accent)
}

.alt-card.featured-alt .alt-card-but {
	border-color: rgba(28, 110, 243, .15)
}

.alt-badge {
	position: absolute;
	top: -11px;
	left: 20px;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--accent);
	color: white;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
}

/* SECURITY */
.sec-wrap {
	border-top: 1px solid var(--line);
	padding: 64px 40px;
	background: var(--paper)
}

.sec-inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start
}

.sec-left {}

.sec-right {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.sec-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 22px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--paper-2);
	transition: border-color .18s, background .18s;
}

.sec-card:hover {
	border-color: var(--line-2);
	background: white
}

.sec-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sec-card-icon.green {
	background: rgba(34, 197, 94, .1)
}

.sec-card-icon.blue {
	background: var(--accent-l)
}

.sec-card-icon.purple {
	background: rgba(139, 92, 246, .1)
}

.sec-card-icon.amber {
	background: rgba(245, 158, 11, .1)
}

.sec-card-body {}

.sec-card-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 4px;
	letter-spacing: -.2px
}

.sec-card-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-3)
}

.sec-os-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.sec-os-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: var(--paper-2);
	font-size: 13px;
}

.sec-os-name {
	font-weight: 700;
	color: var(--ink);
	width: 80px;
	flex-shrink: 0
}

.sec-os-store {
	color: var(--ink-3)
}

.sec-os-badge {
	margin-left: auto;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	background: rgba(34, 197, 94, .1);
	color: #15803d;
}

/* NEW TO DOCKER */
.newbie-wrap {
	border-top: 1px solid var(--line);
	padding: 64px 40px;
	background: white
}

.newbie-inner {
	max-width: 1320px;
	margin: 0 auto
}

.newbie-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-bottom: 16px;
}

.newbie-h {
	font-size: clamp(36px, 4vw, 60px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.06;
	color: var(--ink);
	margin-bottom: 64px;
	max-width: 700px;
}

.newbie-h em {
	font-style: normal;
	color: var(--accent)
}

/* three-column concept flow */
.newbie-cols {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	position: relative;
	margin-bottom: 72px;
}

.newbie-col {
	padding: 0 32px 0 0
}

.newbie-col:last-child {
	padding-right: 0
}

.newbie-col-num {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.newbie-col-num.n1 {
	background: var(--paper-2);
	color: var(--ink-3);
	border: 1px solid var(--line-2)
}

.newbie-col-num.n2 {
	background: var(--paper-2);
	color: var(--ink-3);
	border: 1px solid var(--line-2)
}

.newbie-col-num.n3 {
	background: var(--accent);
	color: white;
	box-shadow: 0 4px 16px rgba(28, 110, 243, .25)
}

.newbie-col-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.5px;
	margin-bottom: 12px;
}

.newbie-col-desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-3);
}

.newbie-col-desc strong {
	color: var(--ink-2);
	font-weight: 600
}

.newbie-col-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 5px 12px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
}

.newbie-col-tag.free {
	background: rgba(34, 197, 94, .08);
	color: #15803d
}

.newbie-col-tag.tool {
	background: var(--paper-2);
	color: var(--ink-4);
	border: 1px solid var(--line)
}

.newbie-col-tag.you {
	background: var(--accent-l);
	color: var(--accent)
}

/* bottom: big summary strip */
.newbie-summary {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--paper-2);
	padding: 32px 40px;
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.newbie-summary-text {
	flex: 1;
	min-width: 280px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-3);
}

.newbie-summary-text strong {
	color: var(--ink);
	font-weight: 700
}

.newbie-summary-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	flex-wrap: wrap
}

/* VIDEO DEMO */
.demo-wrap {
	border-top: 1px solid var(--line);
	padding: 64px 40px;
	background: var(--paper)
}

.demo-wrap-inner {
	max-width: 1320px;
	margin: 0 auto
}

.demo-head {
	text-align: center;
	margin-bottom: 48px
}

.demo-head .section-sub {
	margin: 0 auto;
	max-width: 440px
}

/* video thumbnail */
.demo-thumb {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .07), 0 32px 64px rgba(0, 0, 0, .07);
	border: 1px solid var(--line);
	cursor: pointer;
}

.demo-chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px;
	background: white;
	border-bottom: 1px solid var(--line);
}

.demo-chrome-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%
}

.demo-chrome-dot:nth-child(1) {
	background: #ff5f57
}

.demo-chrome-dot:nth-child(2) {
	background: #febc2e
}

.demo-chrome-dot:nth-child(3) {
	background: #28c840
}

.demo-chrome-addr {
	flex: 1;
	height: 22px;
	border-radius: 5px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	margin: 0 auto;
	max-width: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-4);
	gap: 5px;
}

.demo-app-frame {
	display: flex;
	height: 440px;
	background: var(--paper-2)
}

.demo-app-rail {
	width: 52px;
	flex-shrink: 0;
	background: var(--ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 0;
	gap: 6px;
}

.demo-app-rail-item {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	display: flex;
	align-items: center;
	justify-content: center;
}

.demo-app-rail-item.active {
	background: var(--accent)
}

.demo-app-sidebar {
	width: 180px;
	flex-shrink: 0;
	background: white;
	border-right: 1px solid var(--line);
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.demo-app-nav-item {
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-3);
	display: flex;
	align-items: center;
	gap: 8px;
}

.demo-app-nav-item.on {
	background: var(--accent-l);
	color: var(--accent)
}

.demo-app-nav-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0
}

.demo-app-nav-dot.g {
	background: #22c55e
}

.demo-app-nav-dot.r {
	background: #ef4444
}

.demo-app-nav-dot.y {
	background: #f59e0b
}

.demo-app-main {
	flex: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden
}

.demo-app-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px
}

.demo-app-topbar-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.3px;
	flex: 1
}

.demo-app-action {
	padding: 5px 12px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 700;
	background: var(--accent);
	color: white
}

.demo-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	background: white;
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	flex-shrink: 0;
}

.demo-row-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0
}

.demo-row-dot.g {
	background: #22c55e;
	animation: dot-pulse 2s ease-in-out infinite
}

.demo-row-dot.r {
	background: #ef4444
}

.demo-row-dot.y {
	background: #f59e0b
}

@keyframes dot-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, .35)
	}

	50% {
		box-shadow: 0 0 0 4px rgba(34, 197, 94, 0)
	}
}

.demo-row-name {
	flex: 1
}

.demo-row-port {
	font-family: monospace;
	font-size: 11px;
	color: var(--ink-4);
	font-weight: 400
}

.demo-row-tag {
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 10.5px;
	font-weight: 700
}

.demo-row-tag.up {
	background: rgba(34, 197, 94, .1);
	color: #15803d
}

.demo-row-tag.ex {
	background: rgba(239, 68, 68, .08);
	color: #b91c1c
}

.demo-row-tag.pa {
	background: rgba(245, 158, 11, .1);
	color: #92400e
}

/* play overlay */
.demo-play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 17, 23, .42);
	transition: background .2s;
}

.demo-thumb:hover .demo-play-overlay {
	background: rgba(15, 17, 23, .55)
}

.demo-play-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.demo-play-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
	transition: transform .2s, box-shadow .2s;
}

.demo-thumb:hover .demo-play-circle {
	transform: scale(1.08);
	box-shadow: 0 12px 48px rgba(0, 0, 0, .4)
}

.demo-play-circle svg {
	margin-left: 4px
}

.demo-play-label {
	font-size: 13px;
	font-weight: 700;
	color: white;
	background: rgba(0, 0, 0, .4);
	backdrop-filter: blur(8px);
	padding: 6px 16px;
	border-radius: 20px;
}

/* below-video stats */
.demo-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-top: 32px;
}

.demo-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 48px;
	border-right: 1px solid var(--line);
}

.demo-stat:last-child {
	border-right: none
}

.demo-stat-num {
	font-size: 28px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -1px;
	line-height: 1
}

.demo-stat-lbl {
	font-size: 12px;
	color: var(--ink-4);
	font-weight: 600;
	margin-top: 5px
}

/* modal */
.demo-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 500;
	background: rgba(0, 0, 0, .85);
	backdrop-filter: blur(8px);
	align-items: center;
	justify-content: center;
	padding: 24px
}

.demo-modal.open {
	display: flex
}

.demo-modal-inner {
	width: 100%;
	max-width: 960px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--ink);
	box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
	position: relative
}

.demo-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 10;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s;
	color: white
}

.demo-modal-close:hover {
	background: rgba(255, 255, 255, .2)
}

.demo-modal-video {
	width: 100%;
	aspect-ratio: 16/9;
	display: block;
	background: #000
}

/* BUILT WITH */
.built-wrap {
	padding: 24px 40px;
	background: var(--paper)
}

.built-strip {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px
}

.built-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap
}

.built-row-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-right: 6px;
	white-space: nowrap;
}

.built-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 20px;
	border: 1px solid var(--line);
	background: var(--paper-2);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-3);
	text-decoration: none;
	transition: border-color .15s, color .15s;
	white-space: nowrap;
}

a.built-pill:hover {
	border-color: var(--line-2);
	color: var(--ink)
}

.built-sep {
	width: 1px;
	height: 16px;
	background: var(--line);
	margin: 0 8px
}

.built-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: white;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	transition: border-color .15s, background .15s;
	text-decoration: none;
}

.built-chip:hover {
	border-color: var(--line-2);
	background: var(--paper-2);
	color: var(--ink)
}

.built-chip-icon {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper-2);
	flex-shrink: 0;
}

.built-chip-sub {
	font-size: 11px;
	color: var(--ink-4);
	font-weight: 500
}

/* works-with pills use the exact same card style */
.cpill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: white;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	transition: border-color .15s, background .15s;
}

/* RELEASE NOTES */
.changelog-wrap {
	border-top: 1px solid var(--line);
	padding: 64px 40px;
	background: var(--paper-2)
}

.changelog-inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 80px;
	align-items: start
}

.changelog-left {
	position: sticky;
	top: 80px
}

.changelog-list {
	display: flex;
	flex-direction: column;
	gap: 0
}

.changelog-entry {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
	align-items: start;
}

.changelog-entry:first-child {
	padding-top: 0
}

.changelog-entry:last-child {
	border-bottom: none
}

.changelog-spine {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding-top: 4px
}

.changelog-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--line-2);
	background: white;
}

.changelog-dot.latest {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-t)
}

.changelog-spine-line {
	width: 1.5px;
	flex: 1;
	min-height: 20px;
	background: var(--line);
	margin-top: 4px
}

.changelog-body {}

.changelog-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap
}

.changelog-version {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.2px;
}

.changelog-tag {
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
}

.changelog-tag.new {
	background: var(--accent-l);
	color: var(--accent)
}

.changelog-tag.fix {
	background: rgba(34, 197, 94, .1);
	color: #15803d
}

.changelog-tag.improve {
	background: rgba(234, 179, 8, .1);
	color: #a16207
}

.changelog-date {
	font-size: 12px;
	color: var(--ink-4);
	font-weight: 500
}

.changelog-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
	letter-spacing: -.2px
}

.changelog-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-3)
}

.changelog-items {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 10px
}

.changelog-items li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	color: var(--ink-3);
	line-height: 1.5;
}

.changelog-items li::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ink-4);
	flex-shrink: 0;
	margin-top: 7px;
}

.changelog-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
	transition: gap .15s;
}

.changelog-all:hover {
	gap: 10px
}

/* PRICING */
.pricing-wrap {
	border-top: 1px solid var(--line);
	padding: 64px 40px;
	background: var(--paper-2)
}

.pricing-inner {
	max-width: 900px;
	margin: 0 auto
}

.pricing-hd {
	text-align: center;
	margin-bottom: 56px
}

.pricing-hd .section-sub {
	margin: 0 auto
}

.pricing-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch
}

.pc {
	background: white;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s;
}

.pc:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, .06)
}

.pc.pro {
	background: var(--ink);
	border-color: var(--ink);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.pc.pro:hover {
	box-shadow: 0 12px 48px rgba(0, 0, 0, .2)
}

.pc-tier {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-bottom: 20px;
}

.pc.pro .pc-tier {
	color: rgba(255, 255, 255, .35)
}

.pc-price {
	display: flex;
	align-items: flex-start;
	gap: 3px;
	margin-bottom: 6px;
}

.pc-currency {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink-3);
	margin-top: 8px;
}

.pc.pro .pc-currency {
	color: rgba(255, 255, 255, .4)
}

.pc-amount {
	font-size: 60px;
	font-weight: 800;
	letter-spacing: -3px;
	color: var(--ink);
	line-height: 1;
}

.pc.pro .pc-amount {
	color: white
}

.pc-period {
	font-size: 13px;
	color: var(--ink-4);
	font-weight: 500;
	align-self: flex-end;
	padding-bottom: 10px;
	margin-left: 4px;
}

.pc.pro .pc-period {
	color: rgba(255, 255, 255, .3)
}

.pc-note {
	font-size: 13.5px;
	color: var(--ink-4);
	margin-bottom: 28px
}

.pc.pro .pc-note {
	color: rgba(255, 255, 255, .35)
}

.pc-div {
	height: 1px;
	background: var(--line);
	margin-bottom: 24px
}

.pc.pro .pc-div {
	background: rgba(255, 255, 255, .08)
}

.pc-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
	flex: 1;
	margin-bottom: 32px;
}

.pc-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	color: var(--ink-3);
	line-height: 1.4;
}

.pc.pro .pc-list li {
	color: rgba(255, 255, 255, .6)
}

.pc-list li svg {
	flex-shrink: 0;
	margin-top: 1px
}

.pc-btn {
	display: block;
	text-align: center;
	padding: 13px 24px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: all .18s;
}

.pc-btn-outline {
	background: transparent;
	border: 1.5px solid var(--line-2);
	color: var(--ink-2);
}

.pc-btn-outline:hover {
	border-color: var(--ink-3);
	color: var(--ink)
}

.pc-btn-solid {
	background: white;
	color: var(--ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.pc-btn-solid:hover {
	opacity: .92;
	transform: translateY(-1px)
}

.pricing-note {
	text-align: center;
	margin-top: 20px;
	font-size: 13px;
	color: var(--ink-4)
}

/* FAQ */
.faq-wrap {
	border-top: 1px solid var(--line);
	padding: 64px 40px;
	background: var(--paper-2)
}

.faq-inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 80px;
	align-items: start
}

.faq-left {
	position: sticky;
	top: 80px
}

.faq-list {
	display: flex;
	flex-direction: column
}

.faq-item {
	border-top: 1px solid var(--line)
}

.faq-item:last-child {
	border-bottom: 1px solid var(--line)
}

.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: color .15s
}

.faq-q:hover {
	color: var(--accent)
}

.faq-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--line-2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .2s, background .2s, transform .25s
}

.faq-item.open .faq-icon {
	background: var(--accent);
	border-color: var(--accent);
	transform: rotate(45deg)
}

.faq-icon svg {
	transition: stroke .2s
}

.faq-item.open .faq-icon svg {
	stroke: white !important;
	color: white !important
}

.faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .28s ease
}

.faq-item.open .faq-a {
	grid-template-rows: 1fr
}

.faq-a-inner {
	overflow: hidden;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ink-3);
	padding-bottom: 0;
	transition: padding-bottom .28s ease
}

.faq-item.open .faq-a-inner {
	padding-bottom: 20px
}

/* CTA */
.cta-wrap {
	padding: 72px 40px;
	background: var(--ink);
	text-align: center;
	position: relative;
	overflow: hidden
}

.cta-wrap::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(28, 110, 243, .18), transparent 65%);
	pointer-events: none
}

.cta-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none
}

.cta-inner {
	max-width: 600px;
	margin: 0 auto;
	position: relative;
	z-index: 1
}

.cta-h2 {
	font-size: clamp(34px, 4vw, 56px);
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1.08;
	color: white;
	margin-bottom: 16px
}

.cta-sub {
	font-size: 16px;
	color: rgba(255, 255, 255, .5);
	line-height: 1.65;
	margin-bottom: 36px
}

.cta-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap
}

.cta-btns .btn {
	padding: 12px 24px;
	font-size: 14.5px
}

.btn-white {
	background: white;
	color: var(--ink);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .15)
}

.btn-white:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
	transform: translateY(-1px)
}

.btn-ghost-dk {
	background: rgba(255, 255, 255, .07);
	border: 1.5px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .75)
}

.btn-ghost-dk:hover {
	background: rgba(255, 255, 255, .12);
	color: white
}

.cta-note {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .28);
	margin-top: 18px
}

/* FOOTER */
footer {
	padding: 28px 40px;
	border-top: 1px solid var(--line);
	background: var(--paper-2)
}

.footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 8px
}

.footer-brand-name {
	font-size: 14px;
	font-weight: 800;
	color: var(--ink)
}

.footer-copy {
	font-size: 13px;
	color: var(--ink-4)
}

.footer-links {
	display: flex;
	gap: 20px;
	list-style: none
}

.footer-links a {
	font-size: 13px;
	color: var(--ink-3);
	text-decoration: none;
	transition: color .15s
}

.footer-links a:hover {
	color: var(--ink)
}

/* REVEAL */
.sr {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .55s ease, transform .55s ease
}

.sr.vis {
	opacity: 1;
	transform: translateY(0)
}

.sr-d1 {
	transition-delay: .07s
}

.sr-d2 {
	transition-delay: .14s
}

.sr-d3 {
	transition-delay: .21s
}

@media(max-width:960px) {
	nav {
		padding: 0 20px
	}

	.nav-mid {
		display: none
	}

	.hero {
		grid-template-columns: 1fr;
		padding: 110px 0 60px;
		gap: 40px
	}

	.hero-visual {
		display: none
	}

	.compat,
	.features-wrap,
	.why-wrap,
	.sec-wrap,
	.newbie-wrap,
	.demo-wrap,
	.built-wrap,
	.changelog-wrap,
	.pricing-wrap,
	.faq-wrap,
	.cta-wrap,
	footer {
		padding-left: 20px;
		padding-right: 20px
	}

	.features-wrap,
	.why-wrap,
	.sec-wrap,
	.newbie-wrap,
	.demo-wrap,
	.changelog-wrap,
	.pricing-wrap,
	.faq-wrap,
	.cta-wrap {
		padding-top: 48px;
		padding-bottom: 48px
	}

	.cards-grid,
	.platform-grid,
	.newbie-cols,
	.alt-grid,
	.sec-inner,
	.demo-top,
	.pricing-cards {
		grid-template-columns: 1fr
	}

	.p-free {
		border-right: none;
		border-bottom: 1px solid var(--line);
		padding: 40px 20px
	}

	.p-pro {
		padding: 40px 20px
	}

	.pricing-hd {
		padding: 56px 20px 48px
	}

	.newbie-cols::before {
		display: none
	}

	.newbie-col {
		padding: 0 0 32px;
		border-bottom: 1px solid var(--line)
	}

	.newbie-col:last-child {
		border-bottom: none;
		padding-bottom: 0
	}

	.newbie-summary {
		flex-direction: column;
		gap: 20px
	}

	.panel-foot {
		flex-direction: column
	}

	.feat-tags {
		justify-content: flex-start
	}

	.faq-inner,
	.changelog-inner {
		grid-template-columns: 1fr;
		gap: 40px
	}

	.faq-left,
	.changelog-left {
		position: static
	}

	.features-cards {
		grid-template-columns: 1fr
	}

	.feature-card-preview {
		padding: 16px !important;
		padding-top: 50px !important;
		min-height: 180px
	}

	.fc-density {
		flex-direction: column;
		gap: 16px
	}

	.fc-roundness {
		gap: 8px
	}

	.panel-shot {
		padding: 8px
	}

	.panel-shot img {
		border-radius: 4px
	}
}