/*
 * Bloc Home — Vitrine du framework (style « bento » / éditorial)
 * Entièrement piloté par les tokens du design-system : aucune couleur de marque
 * en dur (primary/secondary viennent du white-label). Fonctionne en clair ET
 * en sombre via les variables --color-*.
 */

.saasbuilder-home {
	--home-max: 1440px;
	/* Serif d'affichage système (proche de la référence, zéro requête externe). */
	--home-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
}

.saasbuilder-home .saasbuilder-container {
	max-width: var(--home-max);
	margin: 0 auto;
	width: 100%;
}

/* ---------- HERO ---------- */
.saasbuilder-home-hero {
	position: relative;
	overflow: hidden;
	/* Compact : le hero tient dans l'écran et laisse apparaître le début de la
	   section suivante (« Les modules du socle »). */
	padding: clamp(24px, 4vh, 52px) 0 clamp(28px, 4vh, 56px);
	text-align: center;
}

/* Halo doux derrière le titre (comme la référence) */
.saasbuilder-home-hero::before {
	content: "";
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: min(760px, 90%);
	height: 460px;
	background:
		radial-gradient(50% 55% at 50% 40%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
		radial-gradient(45% 50% at 62% 45%, color-mix(in srgb, var(--color-secondary) 20%, transparent), transparent 72%);
	filter: blur(20px);
	pointer-events: none;
	z-index: 0;
}

.saasbuilder-home-hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(32px, 5vw, 56px);
}

/* Colonne texte : centrée en mobile, alignée à gauche en deux colonnes */
.saasbuilder-home-hero-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 2vh, 20px);
	text-align: center;
}

/* Deux colonnes : texte à gauche, aperçu du bento (bloc suivant) à droite */
@media (min-width: 992px) {
	.saasbuilder-home-hero-inner {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.saasbuilder-home-hero-text {
		align-items: flex-start;
		text-align: left;
	}
}

.saasbuilder-home-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text);
	/* Bordure dégradée primary→secondary (double background : padding-box + border-box) */
	border: 1px solid transparent;
	background:
		linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
		linear-gradient(90deg, var(--color-primary), var(--color-secondary)) border-box;
}

.saasbuilder-home-badge-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-secondary);
	flex-shrink: 0;
}

/* Onde pulsante autour du point */
.saasbuilder-home-badge-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--color-secondary);
	animation: saasbuilder-badge-pulse 2s ease-out infinite;
}

@keyframes saasbuilder-badge-pulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}

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

@media (prefers-reduced-motion: reduce) {
	.saasbuilder-home-badge-dot::after {
		animation: none;
	}
}

.saasbuilder-home-title {
	margin: 0;
	font-family: var(--home-serif);
	font-weight: 600;
	/* Réduit pour limiter le nombre de lignes et la hauteur du hero */
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--color-text);
	max-width: 18ch;
}

.saasbuilder-home-title-accent {
	display: block;
	font-style: italic;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.saasbuilder-home-lead {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(0.95rem, 1.8vw, 1.08rem);
	line-height: 1.55;
	color: var(--color-text-muted);
}

.saasbuilder-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.saasbuilder-home-actions-center {
	justify-content: center;
}

/* Boutons pill (référence) */
.saasbuilder-home .saasbuilder-btn {
	border-radius: 999px;
	height: 52px;
	padding: 0 28px;
}

.saasbuilder-home-btn-ico {
	width: 14px;
	height: 14px;
	margin-right: 8px;
}

/* ---------- SCHÉMA (arbre de génération, style « board ») ----------
   Arbre Objectif → branches → feuilles, connecté par des liens en équerre
   avec pastilles. 100 % token-driven (primary/secondary + neutres). */
.saasbuilder-home-schematic {
	--home-line: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
	position: relative;
	width: 100%;
	padding: 20px 6px 8px;
	border-radius: var(--border-radius-lg);
	/* Motif pointillé subtil (rappel « tableau ») */
	background-image: radial-gradient(color-mix(in srgb, var(--color-text) 10%, transparent) 1px, transparent 1.6px);
	background-size: 18px 18px;
	background-position: -9px -9px;
	overflow-x: auto;
}

.saasbuilder-tree,
.saasbuilder-tree ul {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.saasbuilder-tree ul {
	padding-top: 24px;
}

.saasbuilder-tree li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 8px 0;
}

.saasbuilder-tree>li {
	padding-top: 0;
}

/* Liens en équerre entre chaque enfant et son parent */
.saasbuilder-tree li::before,
.saasbuilder-tree li::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 24px;
	border-top: 2px solid var(--home-line);
}

.saasbuilder-tree li::before {
	right: 50%;
}

.saasbuilder-tree li::after {
	left: 50%;
	border-left: 2px solid var(--home-line);
}

/* Enfant unique : uniquement un trait vertical (pas de barre horizontale) */
.saasbuilder-tree li:only-child::before,
.saasbuilder-tree li:only-child::after {
	display: none;
}

/* Coins arrondis aux extrémités de la barre horizontale */
.saasbuilder-tree li:first-child::before,
.saasbuilder-tree li:last-child::after {
	border: 0;
}

.saasbuilder-tree li:last-child::before {
	border-right: 2px solid var(--home-line);
	border-radius: 0 8px 0 0;
}

.saasbuilder-tree li:first-child::after {
	border-left: 2px solid var(--home-line);
	border-radius: 8px 0 0 0;
}

/* Trait vertical descendant depuis un parent vers sa rangée d'enfants */
.saasbuilder-tree ul::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 24px;
	border-left: 2px solid var(--home-line);
}

/* ---- Noeud (carte) ---- */
.saasbuilder-node {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 154px;
	max-width: 100%;
	padding: 12px;
	text-align: left;
	border-radius: 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	transition: var(--transition-smooth);
}

.saasbuilder-node:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

.saasbuilder-node-root {
	width: 188px;
}

.saasbuilder-node-leaf {
	width: 138px;
}

/* Pastille au point de raccordement (haut de chaque noeud enfant) */
.saasbuilder-tree ul .saasbuilder-node::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--home-line);
	border: 2px solid var(--color-bg);
	box-sizing: content-box;
}

/* Étiquette (tag) */
.saasbuilder-node-tag {
	align-self: flex-start;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.4;
}

.saasbuilder-tag-primary {
	background: var(--color-primary);
}

.saasbuilder-tag-secondary {
	background: var(--color-secondary);
}

/* Titre + méta (noeud racine) */
.saasbuilder-node-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.saasbuilder-node-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 9.5px;
	font-weight: 600;
	color: var(--color-text-muted);
}

/* Lignes « squelette » (contenu simulé) */
.saasbuilder-skeleton {
	height: 7px;
	width: 100%;
	border-radius: 4px;
	background: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.saasbuilder-skeleton-sm {
	width: 62%;
}

/* Barre de progression */
.saasbuilder-node-progress {
	height: 7px;
	border-radius: 999px;
	overflow: hidden;
	background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.saasbuilder-node-progress span {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.saasbuilder-node-progress .is-primary {
	background: var(--color-primary);
}

.saasbuilder-node-progress .is-secondary {
	background: var(--color-secondary);
}

/* Badge de statut */
.saasbuilder-node-status {
	align-self: flex-end;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 700;
}

.saasbuilder-node-status.is-ok {
	color: var(--color-secondary);
	background: color-mix(in srgb, var(--color-secondary) 15%, transparent);
}

.saasbuilder-node-status.is-active {
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.saasbuilder-node {
		transition: none;
	}
}

/* ---------- SECTIONS ---------- */
.saasbuilder-home-section {
	padding: clamp(48px, 9vh, 100px) 0;
}

.saasbuilder-home-section-muted {
	background: var(--color-bg-secondary);
}

.saasbuilder-home-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto clamp(32px, 5vh, 56px);
}

.saasbuilder-home-section-title {
	margin: 0 0 12px;
	font-family: var(--home-serif);
	font-weight: 600;
	font-size: clamp(1.8rem, 4.5vw, 2.8rem);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.saasbuilder-home-section-sub {
	margin: 0;
	font-size: clamp(0.95rem, 2vw, 1.1rem);
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* ---------- MODULES ---------- */
.saasbuilder-home-modules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
}

.saasbuilder-home-module {
	padding: clamp(18px, 2.5vw, 24px);
	border-radius: var(--border-radius-lg);
	background: var(--color-bg);
	transition: var(--transition-smooth);
}

.saasbuilder-home-module:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
	box-shadow: var(--shadow-md);
}

.saasbuilder-home-module-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.saasbuilder-home-module-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--border-radius);
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
	color: var(--color-primary);
}

.saasbuilder-home-module-icon svg {
	width: 22px;
	height: 22px;
}

.saasbuilder-home-module-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--color-bg-secondary);
}

.saasbuilder-home-module-name {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-text);
}

.saasbuilder-home-module-desc {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* ---------- ROADMAP ---------- */
.saasbuilder-home-roadmap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 820px;
	margin: 0 auto;
}

.saasbuilder-home-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px dashed var(--color-border);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: 600;
	transition: var(--transition-smooth);
}

.saasbuilder-home-chip:hover {
	border-style: solid;
	border-color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-border));
}

.saasbuilder-home-chip-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
	color: var(--color-secondary);
	font-weight: 800;
	line-height: 1;
}

/* ---------- CTA ---------- */
.saasbuilder-home-cta {
	text-align: center;
	padding: clamp(40px, 7vw, 72px) clamp(24px, 5vw, 48px);
	border-radius: var(--border-radius-lg);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 16%, transparent), color-mix(in srgb, var(--color-secondary) 16%, transparent)),
		var(--color-bg-secondary);
	border: 1px solid var(--color-border);
}

.saasbuilder-home-cta-title {
	margin: 0 0 10px;
	font-family: var(--home-serif);
	font-weight: 600;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.saasbuilder-home-cta-sub {
	margin: 0 0 var(--spacing-lg);
	font-size: clamp(0.95rem, 2vw, 1.1rem);
	color: var(--color-text-muted);
}