:root {
	--helpster-bg: #F7F8F8;
	--helpster-bg-2: #FFFFFF;
	--helpster-card: #FFFFFF;
	--helpster-card-2: #F1F4F4;
	--helpster-border: rgba(15, 28, 28, 0.10);
	--helpster-border-strong: rgba(15, 28, 28, 0.18);
	--helpster-accent: #14B8A6;
	--helpster-accent-2: #0D9488;
	--helpster-accent-dim: rgba(20, 184, 166, 0.14);
	--helpster-accent-ring: rgba(20, 184, 166, 0.35);
	--helpster-warm: #F59E0B;
	--helpster-rose: #EC4899;
	--helpster-indigo: #6366F1;
	--helpster-text: #0B1414;
	--helpster-muted: rgba(11, 20, 20, 0.70);
	--helpster-subtle: rgba(11, 20, 20, 0.50);
	/* RGB triplets for Tailwind <alpha-value> support */
	--helpster-bg-rgb: 247 248 248;
	--helpster-card-rgb: 255 255 255;
	--helpster-accent-rgb: 20 184 166;
	--helpster-accent-2-rgb: 13 148 136;
	--helpster-warm-rgb: 245 158 11;
	--helpster-rose-rgb: 236 72 153;
	--helpster-indigo-rgb: 99 102 241;
	--helpster-text-rgb: 11 20 20;
	--helpster-bg-mesh:
		radial-gradient(at 0% 0%, rgba(20, 184, 166, 0.06) 0%, transparent 50%),
		radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
		radial-gradient(at 50% 100%, rgba(236, 72, 153, 0.04) 0%, transparent 50%);
}

html.dark {
	--helpster-bg: #060A0A;
	--helpster-bg-2: #0A1010;
	--helpster-card: #0F1717;
	--helpster-card-2: #142020;
	--helpster-border: rgba(127, 227, 212, 0.14);
	--helpster-border-strong: rgba(127, 227, 212, 0.32);
	--helpster-accent: #7FE3D4;
	--helpster-accent-2: #5EEAD4;
	--helpster-accent-dim: rgba(127, 227, 212, 0.16);
	--helpster-accent-ring: rgba(127, 227, 212, 0.45);
	--helpster-warm: #FFB86B;
	--helpster-rose: #FF8FA3;
	--helpster-indigo: #8B9BFF;
	--helpster-text: #FFFFFF;
	--helpster-muted: rgba(255, 255, 255, 0.70);
	--helpster-subtle: rgba(255, 255, 255, 0.42);
	/* RGB triplets for Tailwind <alpha-value> support */
	--helpster-bg-rgb: 6 10 10;
	--helpster-card-rgb: 15 23 23;
	--helpster-accent-rgb: 127 227 212;
	--helpster-accent-2-rgb: 94 234 212;
	--helpster-warm-rgb: 255 184 107;
	--helpster-rose-rgb: 255 143 163;
	--helpster-indigo-rgb: 139 155 255;
	--helpster-text-rgb: 255 255 255;
	--helpster-bg-mesh:
		radial-gradient(at 5% 0%, rgba(127, 227, 212, 0.10) 0%, transparent 45%),
		radial-gradient(at 95% 0%, rgba(139, 155, 255, 0.07) 0%, transparent 40%),
		radial-gradient(at 50% 100%, rgba(255, 143, 163, 0.05) 0%, transparent 40%);
}

html, body {
	background-color: var(--helpster-bg);
	background-image: var(--helpster-bg-mesh);
	background-attachment: fixed;
	color: var(--helpster-text);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv01', 'cv02', 'cv03', 'ss01';
}

/* Pealkirjafont — Bebas Neue (CVI). Suured pealkirjad + opt-in .font-display. */
h1, h2, .font-display {
	font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif;
	letter-spacing: 0.02em;
	font-weight: 400;
}
/* Bebas Neue on juba kondenseeritud — tühista negatiivne tracking pealkirjadel. */
h1.tracking-tight, h2.tracking-tight, .font-display.tracking-tight {
	letter-spacing: 0.02em;
}

::selection { background: var(--helpster-accent); color: var(--helpster-bg); }

/* Form controls — brand-coloured native widgets */
input[type='checkbox'],
input[type='radio'],
input[type='range'] {
	accent-color: var(--helpster-accent);
}

/* Override @tailwindcss/forms blue defaults for checkbox + radio */
input[type='checkbox'],
input[type='radio'] {
	border-color: var(--helpster-border-strong) !important;
	background-color: transparent !important;
}
input[type='checkbox']:checked,
input[type='radio']:checked {
	background-color: var(--helpster-accent) !important;
	border-color: var(--helpster-accent) !important;
}
input[type='checkbox']:focus,
input[type='radio']:focus {
	--tw-ring-color: var(--helpster-accent-ring) !important;
	box-shadow: 0 0 0 2px var(--helpster-accent-ring) !important;
	outline: none !important;
}
input[type='checkbox']:checked {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230A0F0F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}
input[type='radio']:checked {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230A0F0F' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e") !important;
}

/* ---- Borderless input reset (used by hero search etc) ----
 * Apply via class="h-input-bare". Strips @tailwindcss/forms defaults
 * so that inputs blend with their custom container.
 */
.h-input-bare,
.h-input-bare:focus {
	background-color: transparent !important;
	border-width: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	--tw-ring-shadow: 0 0 #0000 !important;
	--tw-ring-offset-shadow: 0 0 #0000 !important;
}
.h-input-bare::-webkit-search-decoration,
.h-input-bare::-webkit-search-cancel-button,
.h-input-bare::-webkit-search-results-button,
.h-input-bare::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}
input.h-input-bare[type='search'] { -webkit-appearance: none; appearance: none; }

/* ---- Bordered input for forms (login, register, contact) ---- */
.h-input {
	width: 100%;
	background-color: transparent !important;
	border: 1px solid var(--helpster-border-strong) !important;
	border-radius: 0.875rem !important; /* !important: @tailwindcss/forms (CDN) reset paneb muidu border-radius:0 */
	padding: 0.75rem 1rem !important; /* !important: forms reset surub input'i 0.5rem-le → select jäi kõrgemaks. Ühtlustab kõik väljad. */
	font-size: 1rem;
	color: var(--helpster-text);
	box-shadow: none !important;
	outline: none !important;
	transition: border-color 150ms ease;
	--tw-ring-shadow: 0 0 #0000 !important;
	--tw-ring-offset-shadow: 0 0 #0000 !important;
}
.h-input::placeholder { color: var(--helpster-subtle); }
.h-input:focus,
.h-input:focus-visible {
	border-color: var(--helpster-accent) !important;
}
textarea.h-input { resize: vertical; min-height: 7rem; }

/* Parooli näita/peida silma-nupp */
.h-pw-wrap { position: relative; display: block; }
.h-pw-toggle {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--helpster-subtle);
	cursor: pointer;
	border-radius: 0.5rem;
	transition: color 150ms ease;
	padding: 0;
}
.h-pw-toggle:hover,
.h-pw-toggle:focus-visible { color: var(--helpster-accent); outline: none; }

/* Natiivne kuupäeva/kella valija — ikoon ja avanev kalender järgivad teemat. */
.h-input { color-scheme: light; }
html.dark .h-input { color-scheme: dark; }
/* Kalendri-ikoon sama värvi nagu selecti dropdown-nool (#7FE3D4). */
html.dark .h-input::-webkit-calendar-picker-indicator {
	-webkit-appearance: none;
	appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
	opacity: 0.9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237FE3D4' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
html.dark .h-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
select.h-input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237FE3D4' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.1rem;
	padding-right: 2.5rem !important; /* nool ei kata teksti (padding shorthand !important muidu kirjutaks üle) */
}
/* Natiivse rippmenüü valikud: anna selge taust + tekst (Windows renderdas muidu valge valgel). */
select.h-input option,
select.h-input optgroup {
	background-color: #ffffff;
	color: #111827;
}
html.dark select.h-input option,
html.dark select.h-input optgroup {
	background-color: #0f1716;
	color: #e6edec;
}

/* ---- Kohandatud rippmenüü (Chrome/Edge 135+) ----
 * `appearance: base-select` lubab avanevat valikute paneeli päriselt stiilida.
 * Teised brauserid ignoreerivad @supports plokki ja kasutavad ülalolevat
 * natiivset varianti.
 */
@supports (appearance: base-select) {
	select.h-input,
	select.h-input::picker(select) {
		appearance: base-select;
	}
	/* .h-input taustapildi-nool jääb; peida base-selecti enda nooleikoon. */
	select.h-input::picker-icon { display: none; }
	select.h-input::picker(select) {
		background: var(--helpster-card);
		border: 1px solid var(--helpster-border-strong);
		border-radius: 1rem;
		padding: 0.375rem;
		margin-top: 0.375rem;
		box-shadow: 0 18px 40px rgb(0 0 0 / 0.22);
		/* Ilma max-kõrguseta joonistab UA kitsas kohas mini-paneeli vanade
		 * kerimisnooltega; nii saab normaalse keritava nimekirja. */
		max-height: 18rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		/* UA eelistab suurema ruumiga külge (most-block-size) → avaneb tihti üles.
		 * normal = ava alati valiku ALLA; üles läheb ainult siis, kui alla ei mahu. */
		position-try-order: normal;
	}
	/* Transition ainult avatud olekus: avanemine sujuv, sulgemine kohene. */
	select.h-input:open::picker(select) {
		opacity: 1;
		transform: none;
		transition: opacity 120ms ease, transform 120ms ease;
	}
	@starting-style {
		select.h-input:open::picker(select) {
			opacity: 0;
			transform: translateY(-0.25rem);
		}
	}
	select.h-input option,
	html.dark select.h-input option {
		background-color: transparent;
		color: var(--helpster-text);
		padding: 0.55rem 0.75rem;
		border-radius: 0.625rem;
		font-size: 0.925rem;
		transition: background-color 120ms ease;
	}
	select.h-input option:hover,
	select.h-input option:focus-visible,
	html.dark select.h-input option:hover,
	html.dark select.h-input option:focus-visible {
		background-color: var(--helpster-card-2);
	}
	select.h-input option:checked,
	html.dark select.h-input option:checked {
		background-color: var(--helpster-accent-dim);
		color: var(--helpster-accent);
		font-weight: 600;
	}
	select.h-input option::checkmark { color: var(--helpster-accent); }
}

/* ---- Hero fotoriba (tagasiside #111) ----
 * Lõputult vasakule liikuv riba: kaks identset gruppi, animatsioon -50%.
 * Servad hajutatud maskiga; reduced-motion lülitab välja.
 */
.h-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.h-marquee-track {
	display: flex;
	width: max-content;
	animation: hMarquee 45s linear infinite;
	will-change: transform;
}
.h-marquee-group {
	display: flex;
	gap: 1rem;
	padding-right: 1rem;
}
.h-marquee-img {
	height: 7rem;
	width: 11rem;
	object-fit: cover;
	border-radius: 1rem;
	border: 1px solid var(--helpster-border-strong);
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.h-marquee-img { height: 9rem; width: 14rem; }
}
@keyframes hMarquee {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.h-marquee-track { animation: none; }
}

/* ---- Päise ja mobiilimenüü poolläbipaistev taust ----
 * Tailwind CDN ei oska var()-värvile opacity-modifikaatorit ( /70 ) genereerida,
 * seega kindlad klassid siin. Menüü vajab kirju sisu peal tugevamat katet.
 */
.h-header-veil { background-color: color-mix(in srgb, var(--helpster-bg) 82%, transparent); }
/* Heledas teemas on hele kate heleda sisu peal nõrgalt tajutav → madalam protsent. */
.h-menu-veil   { background-color: color-mix(in srgb, var(--helpster-bg) 78%, transparent); }
html.dark .h-menu-veil { background-color: color-mix(in srgb, var(--helpster-bg) 88%, transparent); }

/* Leafleti sisemised kihid (z-index 400+) ei tohi hõljuda üle sticky päise/menüü (z-40).
 * Oma stacking context hoiab need kaardikasti sees. */
.leaflet-container { position: relative; z-index: 0; }

/* ---- Segmenteeritud kuupäeva/kella väli (tagasiside #125) ----
 * pp | kk | aaaa eraldi kastidena ühe h-input raami sees; fookus liigub JS-iga.
 */
/* width: max-content — grupp on täpselt sisu laiune, ei veni ega vaju üle veeru serva. */
.h-seg-group {
	gap: 0;
	cursor: text;
	width: max-content !important;
	max-width: 100%;
	padding-left: 0.7rem !important;
	/* 2.35rem = ikooninupp (2rem) + selle right-1 nihe (0.25rem) + hingamisruum. */
	padding-right: 2.35rem !important;
}
.h-seg-group > span { padding: 0; opacity: 0.7; }
.h-seg-group:focus-within { border-color: var(--helpster-accent) !important; }
.h-seg {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0;
	font-size: 1rem;
	color: var(--helpster-text);
	/* tabular-nums: numbrid on ühelaiused, seega väli ei "hüppa" tippides. */
	font-variant-numeric: tabular-nums;
	width: 2.5ch;
	min-width: 2.5ch;
	flex: none;
	text-align: center;
	--tw-ring-shadow: 0 0 #0000 !important;
	--tw-ring-offset-shadow: 0 0 #0000 !important;
}
/* Tähed (pp/kk/mm) on proportsionaalses fondis numbritest laiemad — tihendame,
 * et vihjetekst püsiks segmendi sees ja separaatorite vahed jääksid sümmeetriliseks. */
/* 0.92em + tihedam täheruum: "mm"/"kk" (laiad tähed) mahuvad numbrite jaoks
 * mõõdetud kasti ilma lõikumata; sisestatud numbrid jäävad täissuuruses. */
.h-seg::placeholder { color: var(--helpster-subtle); font-size: 0.92em; letter-spacing: -0.04em; }
/* Kellaajal: tunnid vastu koolonit paremalt, minutid vasakult — muidu jääb kitsama
 * "hh" järele lünk ("hh :mm"), kuna laiem "mm" täidab oma kasti ääreni. */
[data-sched-timegroup] .h-seg { text-align: right; }
[data-sched-timegroup] .h-seg + span + .h-seg { text-align: left; }
.h-seg--y { width: 4.45ch; min-width: 4.45ch; }
.h-seg::selection { background: var(--helpster-accent-dim); }

/* ---- Mobiilimenüü sujuv avanemine (grid-rows 0fr → 1fr) ----
 * JS eemaldab 'hidden' ja lisab 'is-open'; sulgemisel oodatakse transitioni
 * lõppu enne 'hidden' tagasipanekut (app.js). Ülaäär ilmub koos avanemisega.
 */
.h-mobile-menu {
	display: grid;
	grid-template-rows: 0fr;
	border-top: 1px solid transparent;
	transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms ease;
}
.h-mobile-menu.is-open {
	grid-template-rows: 1fr;
	border-color: var(--helpster-border);
}
.h-mobile-menu-inner {
	overflow: hidden;
	min-height: 0;
}
.h-mobile-menu-inner > div {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 200ms ease, transform 240ms ease;
}
.h-mobile-menu.is-open .h-mobile-menu-inner > div {
	opacity: 1;
	transform: none;
	transition-delay: 60ms;
}
/* Desktopil ei tohi menüü kunagi paista, ka avatud olekus akna laiendamisel. */
@media (min-width: 1024px) {
	.h-mobile-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.h-mobile-menu, .h-mobile-menu-inner > div { transition: none; }
}

/* ---- Theme-aware color utilities ---- */
.h-bg            { background-color: var(--helpster-bg); }
.h-bg-2          { background-color: var(--helpster-bg-2); }
.h-card          { background-color: var(--helpster-card); }
.h-card-2        { background-color: var(--helpster-card-2); }
.h-text          { color: var(--helpster-text); }
.h-muted         { color: var(--helpster-muted); }
.h-subtle        { color: var(--helpster-subtle); }
.h-accent        { color: var(--helpster-accent); }
.h-warm          { color: var(--helpster-warm); }
.h-rose          { color: var(--helpster-rose); }
.h-indigo        { color: var(--helpster-indigo); }
.h-accent-bg     { background-color: var(--helpster-accent); }
.h-accent-dim    { background-color: var(--helpster-accent-dim); }
.h-warm-bg       { background-color: var(--helpster-warm); }
.h-warm-dim      { background-color: color-mix(in srgb, var(--helpster-warm) 18%, transparent); }
.h-rose-dim      { background-color: color-mix(in srgb, var(--helpster-rose) 18%, transparent); }
.h-indigo-dim    { background-color: color-mix(in srgb, var(--helpster-indigo) 18%, transparent); }
.h-border        { border-color: var(--helpster-border); }
.h-border-strong { border-color: var(--helpster-border-strong); }

/* ---- Glass / surface treatments ---- */
.h-glass {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%),
		var(--helpster-card);
	border: 1px solid var(--helpster-border);
	box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -24px rgba(0,0,0,0.6);
}
html:not(.dark) .h-glass {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%),
		var(--helpster-card);
	box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset, 0 24px 60px -24px rgba(0,0,0,0.12);
}

.h-glass-strong {
	background:
		linear-gradient(180deg, rgba(127,227,212,0.06) 0%, rgba(127,227,212,0.01) 100%),
		var(--helpster-card);
	border: 1px solid var(--helpster-border-strong);
	box-shadow: 0 0 0 1px rgba(127,227,212,0.08) inset, 0 24px 60px -20px rgba(127,227,212,0.18);
}

/* ---- Hero glow ---- */
.h-hero-glow {
	background-image: radial-gradient(60% 50% at 50% 35%, var(--helpster-accent-dim) 0%, transparent 60%);
}

/* ---- Decorative blobs ---- */
.h-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}
.h-blob--mint { background: radial-gradient(circle, var(--helpster-accent) 0%, transparent 70%); }
.h-blob--warm { background: radial-gradient(circle, var(--helpster-warm) 0%, transparent 70%); }
.h-blob--rose { background: radial-gradient(circle, var(--helpster-rose) 0%, transparent 70%); }
.h-blob--indigo { background: radial-gradient(circle, var(--helpster-indigo) 0%, transparent 70%); }

/* ---- Crisp decorative balls + dot grid (hero — Mia's bolder-orange look) ---- */
.h-hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.h-ball { position: absolute; border-radius: 50%; pointer-events: none; }
.h-ball--warm { background: var(--helpster-warm); }
.h-ball--warm-soft { background: rgba(var(--helpster-warm-rgb) / 0.22); }
.h-dots {
	position: absolute;
	pointer-events: none;
	background-image: radial-gradient(rgba(var(--helpster-warm-rgb) / 0.40) 1.6px, transparent 1.7px);
	background-size: 20px 20px;
}
/* Keep phones clean — only the soft blobs, no balls/dots clutter. */
@media (max-width: 640px) {
	.h-ball, .h-dots { display: none; }
}

/* ---- Outlined text (hollow numbers) — uses Space Grotesk for cleaner geometric digits ---- */
.h-text-outline {
	font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px var(--helpster-accent);
	text-stroke: 1px var(--helpster-accent);
	paint-order: stroke fill;
	font-variant-numeric: lining-nums;
	letter-spacing: -0.02em;
}
@media (min-width: 768px) {
	.h-text-outline { -webkit-text-stroke-width: 1.25px; text-stroke-width: 1.25px; }
}

/* ---- Animated mint gradient text ---- */
.h-grad-text {
	background-image: linear-gradient(135deg, var(--helpster-accent) 0%, var(--helpster-accent-2) 60%, var(--helpster-indigo) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Teal → oranž energiline gradient (hero, rõhud). */
.h-grad-text-warm {
	background-image: linear-gradient(120deg, var(--helpster-accent) 0%, var(--helpster-accent-2) 35%, var(--helpster-warm) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Puhas oranž gradient — pealkirjade rõhutatud märksõnad (Mia: julgem oranž). */
.h-grad-text-amber {
	background-image: linear-gradient(120deg, var(--helpster-warm) 0%, #FB923C 55%, #F97316 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* clip-text lõikab tiheda line-height'iga täpitähtede (ä õ ö) ülaserva — anna maalimisruumi ilma paigutust muutmata. */
.h-grad-text, .h-grad-text-warm, .h-grad-text-amber {
	padding-top: 0.1em;
	margin-top: -0.1em;
}
/* #26 (Kermo): tumedas režiimis eemalda oranž (ainult teal); heledas jääb soe oranž. */
html.dark .h-grad-text-warm {
	background-image: linear-gradient(120deg, var(--helpster-accent) 0%, var(--helpster-accent-2) 55%, var(--helpster-accent) 100%);
}

/* ---- Float decoration ---- */
.h-float-1 { animation: h-float 8s ease-in-out infinite; }
.h-float-2 { animation: h-float 6s ease-in-out infinite; animation-delay: -2s; }
.h-float-3 { animation: h-float 7s ease-in-out infinite; animation-delay: -4s; }
@keyframes h-float {
	0%, 100% { transform: translateY(0) translateX(0); }
	50%      { transform: translateY(-18px) translateX(6px); }
}

/* ---- Scroll fade-up reveal ---- */
.h-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.h-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.h-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Scrollbar hide ---- */
.h-scroll-hide::-webkit-scrollbar { display: none; }
.h-scroll-hide { scrollbar-width: none; }

/* ---- Sujuv lehesisene ankru-kerimine (nt "Tagasi üles") ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Smooth theme transitions ---- */
* { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }

/* ---- Primary nav menu (wp_nav_menu output) ---- */
.h-primary-menu { list-style: none; padding: 0; margin: 0; }
.h-primary-menu li { list-style: none; }
.h-primary-menu a {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--helpster-text);
	opacity: 0.78;
	text-decoration: none;
	transition: color 150ms ease, opacity 150ms ease;
	position: relative;
}
.h-primary-menu a:hover,
.h-primary-menu .current-menu-item > a {
	color: var(--helpster-accent);
	opacity: 1;
}

/* Footer menu */
.h-footer-menu { list-style: none; padding: 0; margin: 0; }
.h-footer-menu li { list-style: none; }
.h-footer-menu a {
	font-size: 0.875rem;
	color: var(--helpster-muted);
	text-decoration: none;
	transition: color 150ms ease;
}
.h-footer-menu a:hover { color: var(--helpster-accent); }

/* Mobile menu version */
[data-mobile-menu] .h-primary-menu { flex-direction: column; gap: 1rem; align-items: flex-start; }
[data-mobile-menu] .h-primary-menu a { font-size: 1rem; }

/* No underline on logo/header/footer anchors */
header a, footer a { text-decoration: none; }

/* ---- Kohustusliku välja tärn ---- */
.req-mark { color: var(--helpster-rose); margin-left: 0.25rem; font-weight: 700; }

/* ---- Star rating ---- */
.h-stars { display: inline-flex; gap: 1px; color: var(--helpster-warm); }

/* Interactive 5-star rating (single-kuulutus rating form) */
[data-star-rating] .star-icon { color: var(--helpster-border-strong); }
[data-star-rating] .star-label.is-filled .star-icon,
[data-star-rating] .star-label.is-preview .star-icon { color: var(--helpster-warm); }

/* ---- Tag pill ---- */
.h-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: var(--helpster-accent-dim);
	color: var(--helpster-accent);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---- FAQ item open arrow rotation ---- */
[data-faq-item] [data-faq-trigger] [data-arrow] { transition: transform 200ms ease; }
[data-faq-item].is-open [data-faq-trigger] [data-arrow] { transform: rotate(90deg); }

/* ---- Blogi paginatsioon ---- */
.pagination .nav-links,
.nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem;
	border-radius: 9999px; border: 1px solid var(--helpster-border);
	color: var(--helpster-muted); font-size: 0.875rem; font-weight: 600;
	text-decoration: none; transition: all 150ms ease;
}
.page-numbers:hover { border-color: var(--helpster-border-strong); color: var(--helpster-accent); }
.page-numbers.current {
	background: var(--helpster-accent); border-color: transparent;
	color: var(--helpster-bg);
}
.page-numbers.dots { border-color: transparent; }

/* line-clamp util (Tailwind plugin ei pruugi CDN-is olla) */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Pulse dot (for "live" indicators) ---- */
.h-pulse-dot {
	position: relative;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--helpster-accent);
}
.h-pulse-dot::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: var(--helpster-accent);
	opacity: 0.5;
	animation: h-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes h-ping {
	75%, 100% { transform: scale(2.5); opacity: 0; }
}