/* ===========================================================
   RewardRace — Docs Hero v2
   =========================================================== */

.rrDocsHero {
	--rrdh-bg:        var(--rr-bg);
	--rrdh-text:      var(--rr-heading);
	--rrdh-body:      var(--rr-text);
	--rrdh-soft:      var(--rr-muted);
	--rrdh-border:    var(--rr-border);
	--rrdh-pill-bg:   transparent;
	--rrdh-input-bg:  var(--rr-bg);
	--rrdh-accent:    var(--rr-brand);

	background: var(--rrdh-bg);
	color: var(--rrdh-body);
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
	padding: calc(var(--rr-section-y) + var(--rr-space-6)) var(--rr-section-x) var(--rr-section-y);
	position: relative;
	overflow: hidden;
}
.rrDocsHero *, .rrDocsHero *::before, .rrDocsHero *::after { box-sizing: border-box; }

.rrDocsHero::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	height: 500px;
	background: radial-gradient(ellipse, rgba(87, 63, 211, .18), transparent 70%);
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}

.rrDocsHero--bg-white       { --rrdh-bg: var(--rr-bg); --rrdh-input-bg: var(--rr-surface); }
.rrDocsHero--bg-cream       { --rrdh-bg: var(--rr-surface); --rrdh-input-bg: var(--rr-bg); }
.rrDocsHero--bg-transparent { background: transparent; }

.rrDocsHero__wrap {
	max-width: var(--rr-container-narrow);
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

.rrDocsHero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 7px 16px 7px 12px;
	background: var(--rrdh-pill-bg);
	border: 1px solid transparent;
	border-radius: var(--rr-radius-pill);
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-wide);
	text-transform: uppercase;
	color: var(--rrdh-accent);
	margin-bottom: var(--rr-space-6);
}

.rrDocsHero__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--rrdh-accent);
	display: inline-block;
	animation: rrPulse 2s var(--rr-ease-out) infinite;
}

.rrDocsHero__title {
	font-size: var(--rr-fs-display);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	line-height: var(--rr-lh-tight);
	margin: 0 0 var(--rr-space-5);
	color: var(--rrdh-text);
	text-wrap: balance;
}
.rrDocsHero__titleLead { display: inline; color: inherit; }
.rrDocsHero__titleAccent {
	display: inline;
	color: var(--rrdh-accent);
	font-weight: 800;
	margin-left: .12em;
}

.rrDocsHero__desc {
	font-size: var(--rr-fs-lg);
	line-height: var(--rr-lh-relaxed);
	color: var(--rrdh-soft);
	margin: 0 auto var(--rr-space-10);
	max-width: 62ch;
}

/* ----- Search ----- */
.rrDocsHero__search {
	max-width: 680px;
	margin: 0 auto var(--rr-space-5);
}

.rrDocsHero__searchLabel {
	display: flex;
	align-items: center;
	gap: var(--rr-space-3);
	background: var(--rrdh-input-bg);
	border: 1px solid var(--rrdh-border);
	border-radius: var(--rr-radius-pill);
	padding: 18px 26px;
	box-shadow: var(--rr-shadow-md);
	transition: border-color var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}
.rrDocsHero__searchLabel:hover {
	border-color: var(--rr-border-strong);
	box-shadow: var(--rr-shadow-lg);
}
.rrDocsHero__searchLabel:focus-within {
	border-color: var(--rrdh-accent);
	box-shadow: var(--rr-ring), var(--rr-shadow-md);
}

.rrDocsHero__searchIcon {
	color: var(--rrdh-soft);
	flex-shrink: 0;
}
.rrDocsHero__searchLabel:focus-within .rrDocsHero__searchIcon { color: var(--rrdh-accent); }

.rrDocsHero__searchInput {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: none;
	font-size: var(--rr-fs-md);
	color: var(--rrdh-text);
	padding: 0;
	font-family: inherit;
	font-weight: 500;
}
.rrDocsHero__searchInput::placeholder {
	color: var(--rrdh-soft);
	opacity: 1;
}
.rrDocsHero__searchInput::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.rrDocsHero__popular {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rr-space-2);
	font-size: var(--rr-fs-sm);
	color: var(--rrdh-soft);
	margin-top: var(--rr-space-4);
}

.rrDocsHero__popularLabel {
	color: var(--rrdh-soft);
	margin-right: var(--rr-space-1);
	font-weight: 600;
}

.rrDocsHero .rrDocsHero__popularLink,
.rrDocsHero a.rrDocsHero__popularLink {
	color: var(--rrdh-text);
	text-decoration: none;
	padding: 5px 14px;
	border-radius: var(--rr-radius-pill);
	background: var(--rrdh-input-bg);
	border: 1px solid var(--rrdh-border);
	font-weight: 600;
	font-size: var(--rr-fs-xs);
	transition: color var(--rr-dur-fast) var(--rr-ease-out),
	            background-color var(--rr-dur-fast) var(--rr-ease-out),
	            border-color var(--rr-dur-fast) var(--rr-ease-out),
	            transform var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}
.rrDocsHero .rrDocsHero__popularLink:hover {
	color: #FFFFFF;
	background: var(--rr-brand-gradient);
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrDocsHero__popularSep { display: none; }

@media (max-width: 720px) {
	.rrDocsHero__desc  { font-size: var(--rr-fs-md); margin-bottom: var(--rr-space-8); }
	.rrDocsHero__searchLabel { padding: 14px 22px; }
	.rrDocsHero__searchInput { font-size: var(--rr-fs-sm); }
}

@media (max-width: 480px) {
	.rrDocsHero__title { font-size: clamp(2rem, 10vw, 2.75rem); }
	.rrDocsHero__searchLabel { padding: 12px 18px; gap: var(--rr-space-2); }
	.rrDocsHero__popular { font-size: var(--rr-fs-xs); }
}