/*
 * Mocart Studio 2026 — Design tokens.
 * Caricati sia nel frontend che dentro il builder Bricks.
 * Le global classes Bricks (rs-btn, rs-eyebrow, rs-card, ecc.)
 * usano questi token via var(--rs-*).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500&display=swap');

:root {
	--rs-purple:      #6010F9;
	--rs-purple-600:  #4E0DD8;
	--rs-purple-100:  #E4D8FF;
	--rs-purple-50:   #F3EEFF;

	--rs-ink:         #0A0A0F;
	--rs-ink-2:       #2A2A35;
	--rs-ink-3:       #6B6B78;
	--rs-ink-4:       #9B9BA8;

	--rs-line:        #EAEAEF;
	--rs-line-2:      #D3D3D9;

	--rs-bg:          #FFFFFF;
	--rs-bg-soft:     #FAFAFC;

	--rs-display:     "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rs-mono:        "Geist Mono", ui-monospace, monospace;

	--rs-container:   1240px;
	--rs-radius-sm:   8px;
	--rs-radius-md:   14px;
	--rs-radius-lg:   20px;
	--rs-radius-pill: 999px;

	--rs-shadow-purple: 0 10px 30px rgba(96, 16, 249, 0.25);
	--rs-shadow-card:   0 20px 60px -20px rgba(96, 16, 249, 0.15);
}

/* Breadcrumbs — stile canonico definito in pages/home.css (loaded after online-home.css per vincere cascade). */

/* Skip-link a11y: nascosto visivamente, visibile solo su focus keyboard */
.skip-link {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}
.skip-link:focus {
	position: absolute !important;
	left: 8px !important;
	top: 8px !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	z-index: 9999 !important;
	padding: 8px 14px !important;
	background: var(--rs-ink) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}

body {
	font-family: var(--rs-display);
	color: var(--rs-ink);
	background: var(--rs-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.5;
}

/* ===== Layout utilities ===== */
.rs-container {
	max-width: var(--rs-container);
	margin: 0 auto;
	padding: 0 32px;
}
.rs-mono {
	font-family: var(--rs-mono);
	font-feature-settings: "ss01";
}

/* ===== Eyebrow ===== */
.rs-eyebrow {
	font-family: var(--rs-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--rs-purple);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.rs-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rs-purple);
	display: inline-block;
}

/* ===== Buttons ===== */
.rs-btn {
	font-family: var(--rs-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.01em;
	border-radius: 999px;
	padding: 14px 22px;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 240ms cubic-bezier(0.22, 1, 0.36, 1);
	white-space: nowrap;
	text-decoration: none;
}
.rs-btn-primary { background: var(--rs-ink); color: #fff !important; }
.rs-btn-primary:hover { background: var(--rs-purple); transform: translateY(-1px); }
.rs-btn-purple { background: var(--rs-purple); color: #fff !important; box-shadow: 0 10px 30px rgba(96,16,249,0.25); }
.rs-btn-purple:hover { background: var(--rs-purple-600); transform: translateY(-1px); box-shadow: 0 16px 40px rgba(96,16,249,0.35); }
.rs-btn-ghost { background: transparent; color: var(--rs-ink); border: 1px solid var(--rs-line-2); }
.rs-btn-ghost:hover { border-color: var(--rs-ink); }
.rs-btn-sm { padding: 10px 16px; font-size: 13px; }

/* ===== Typography scale ===== */
.rs-h1 {
	font-family: var(--rs-display);
	font-size: clamp(44px, 6vw, 88px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1;
	margin: 0;
}
.rs-h1 em,
.rs-h2 em {
	font-family: "Inter Tight", var(--rs-display), serif;
	font-style: italic;
	font-weight: 500;
	color: var(--rs-purple);
}
.rs-h2 {
	font-family: var(--rs-display);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 14px 0 20px;
	max-width: 860px;
}
.rs-lead {
	font-size: 19px;
	line-height: 1.55;
	color: var(--rs-ink-3);
	max-width: 620px;
	margin: 0;
}

/* ===== Sections ===== */
.rs-section { padding: 120px 0; }
.rs-section-tight { padding: 80px 0; }
.rs-hero {
	padding: 96px 0 80px;
	position: relative;
	overflow: hidden;
}
.rs-ticker-section {
	padding: 80px 0;
	background: var(--rs-bg-soft);
}

/* ===== Card base ===== */
.rs-card {
	background: #fff;
	border: 1px solid var(--rs-line);
	border-radius: 20px;
	padding: 28px;
	transition: all 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-card:hover { border-color: var(--rs-ink-4); }

/* ===== Chip ===== */
.rs-chip {
	font-family: var(--rs-mono);
	font-size: 12px;
	color: var(--rs-ink-2);
	background: #fff;
	border: 1px solid var(--rs-line);
	border-radius: 999px;
	padding: 8px 14px;
	cursor: pointer;
	transition: all 180ms;
	display: inline-flex;
	align-items: center;
}
.rs-chip:hover { border-color: var(--rs-purple); color: var(--rs-purple); }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Ticker (KPI strip) ===== */
.rs-ticker {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--rs-line);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
}
.rs-ticker > div {
	padding: 44px 32px;
	border-right: 1px solid var(--rs-line);
}
.rs-ticker > div:last-child { border-right: 0; }
.rs-num {
	font-family: var(--rs-display);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}
.rs-lbl,
.rs-num-label {
	font-family: var(--rs-mono);
	font-size: 11px;
	color: var(--rs-ink-4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 14px 0 0;
	padding: 0 2px;
}

/* ===== KPI card ===== */
.rs-kpi {
	padding: 28px;
	border: 1px solid var(--rs-line);
	border-radius: 20px;
	background: #fff;
}
.rs-kpi .rs-num { font-size: 56px; }
.rs-kpi .rs-lbl { margin-top: 12px; }

/* ===== Quote / Testimonial ===== */
.rs-quote {
	border: 1px solid var(--rs-line);
	border-radius: 20px;
	padding: 32px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.rs-quote blockquote {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.rs-quote .rs-quote-who {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rs-quote .rs-quote-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rs-purple-100), var(--rs-purple));
	display: grid;
	place-items: center;
	color: #fff;
	font-family: var(--rs-display);
	font-weight: 700;
	font-size: 14px;
}
.rs-quote .rs-quote-name { font-size: 14px; font-weight: 600; margin: 0; }
.rs-quote .rs-quote-role { font-family: var(--rs-mono); font-size: 11px; color: var(--rs-ink-4); margin: 2px 0 0; }

/* ===== Grid utilities ===== */
.rs-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.rs-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.rs-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* ===== Method triad ===== */
.rs-method-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.rs-method-card {
	padding: 28px;
	border: 1px solid var(--rs-line);
	border-radius: 20px;
	background: #fff;
	position: relative;
}
.rs-method-card .rs-num-step {
	font-family: var(--rs-mono);
	font-size: 11px;
	color: var(--rs-purple);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.rs-method-card h3 {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 16px 0 12px;
}
.rs-method-card p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--rs-ink-3);
	margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
	.rs-container { padding: 0 24px; }
	.rs-section { padding: 72px 0; }
	.rs-section-tight { padding: 56px 0; }
	.rs-ticker-section { padding: 56px 0; }
	.rs-hero { padding: 64px 0 56px; }
	.rs-h2 { font-size: clamp(32px, 7vw, 52px); }
	.rs-method-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	.rs-ticker { grid-template-columns: repeat(2, 1fr); }
	.rs-ticker > div:nth-child(2) { border-right: 0; }
	.rs-ticker > div:nth-child(-n+2) { border-bottom: 1px solid var(--rs-line); }
	.rs-num { font-size: 34px; }
	.rs-grid-3, .rs-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.rs-container { padding: 0 20px; }
	.rs-section { padding: 56px 0; }
	.rs-section-tight { padding: 40px 0; }
	.rs-ticker-section { padding: 40px 0; }
	.rs-method-card { padding: 22px; }
	.rs-method-card h3 { font-size: 19px; }
	.rs-ticker { grid-template-columns: 1fr; }
	.rs-ticker > div { border-right: 0 !important; border-bottom: 1px solid var(--rs-line); }
	.rs-ticker > div:last-child { border-bottom: 0; }
	.rs-grid-2, .rs-grid-3, .rs-grid-4 { grid-template-columns: 1fr; }
	.rs-quote { padding: 24px; }
	.rs-quote blockquote { font-size: 16px; }
}