/*!
 * HandySalon design system
 * ---------------------------------------------------------------------
 * Companion stylesheet for the Elementor-built site. Elementor's native
 * widgets (Text Editor, Icon Box, Icon List, Button, Counter, Accordion, …)
 * carry the structure and editable copy; this file carries the bespoke
 * visual language (glass cards, gradients, blur, shadows, motion) via
 * plain CSS classes assigned per-element through Elementor's built-in
 * "CSS Classes" advanced control. See DEVELOPER.md "Design system" for
 * the full class reference and which Elementor widget each class is
 * meant to be applied to.
 *
 * Ported 1:1 from the approved Claude Design prototype
 * (project/HandySalon.dc.html) — colors, spacing, radii, shadows and
 * animation timings are unchanged from that file.
 * ---------------------------------------------------------------------
 */

:root {
	--hs-ink: #0B1220;
	--hs-ink-soft: #141C2E;
	--hs-primary: #2563EB;
	--hs-primary-dark: #1D4ED8;
	--hs-cyan: #06B6D4;
	--hs-cyan-dark: #0891B2;
	--hs-text: #3A4358;
	--hs-text-soft: #525C72;
	--hs-text-mute: #6B7488;
	--hs-text-faint: #939CAE;
	--hs-border: rgba(15, 23, 42, 0.08);
	--hs-border-soft: rgba(15, 23, 42, 0.07);
	--hs-offwhite: #F4F7FC;
	--hs-amber: #F59E0B;
	--hs-green: #16A34A;
	--hs-radius-lg: 26px;
	--hs-radius-md: 20px;
	--hs-radius-sm: 14px;
	--hs-shadow-soft: 0 20px 44px -32px rgba(11, 18, 32, 0.3);
	--hs-shadow-blue: 0 16px 34px -12px rgba(37, 99, 235, 0.65);
	--font-display: 'Sora', system-ui, sans-serif;
	--font-text: 'Manrope', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

/* ---------------------------------------------------------------------
   Lucide icon sizing (theme chrome + the two custom widgets only —
   Elementor-authored widgets use Elementor's own Font Awesome icons)
--------------------------------------------------------------------- */
.hs-service-card__icon svg { width: 23px; height: 23px; }
.hs-review-card__stars svg { width: 15px; height: 15px; }
.hs-nav__phone svg { width: 15px; height: 15px; }
.hs-nav__hamburger svg { width: 20px; height: 20px; }
.hs-btn svg, a.hs-btn svg { width: 16px; height: 16px; }
.hs-info-card .elementor-icon-box-icon i { font-size: 17px; }
.hs-info-card .elementor-icon-box-icon svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------
   Keyframes
--------------------------------------------------------------------- */
@keyframes hs-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hs-floaty2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes hs-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes hs-pulse-ring { 0% { transform: scale(.9); opacity: .7; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes hs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   Layout helpers
--------------------------------------------------------------------- */
.hs-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hs-container--narrow { max-width: 820px; }
.hs-main { padding: 64px 24px; }

.hs-eyebrow .elementor-heading-title  { display: block; font-size: 13px; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--hs-primary) !important; margin-bottom: 14px; }
.hs-eyebrow--muted-center .elementor-heading-title  { color: var(--hs-text-faint) !important; text-align: center; margin-bottom: 22px; }
.hs-section-title .elementor-heading-title  { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(28px, 4.4vw, 50px); letter-spacing: -.03em !important; line-height: 1.06; margin: 0; color: var(--hs-ink) !important; }
.hs-section-lead .elementor-text-editor  { font-size: 18px; color: var(--hs-text-soft) !important; line-height: 1.6; font-weight: 500 !important; margin: 18px 0 0; }
.hs-section-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 48px;
}
.hs-flex-header.elementor-section .elementor-container  { align-items: flex-end; }
.hs-flex-header { margin-bottom: 40px; }
.hs-flex-header__aside { display: flex; justify-content: flex-end; }
@media (max-width: 767px) {
	.hs-flex-header .elementor-container  { flex-wrap: wrap; }
	.hs-flex-header__aside { justify-content: flex-start; margin-top: 16px; }
}

/* ---------------------------------------------------------------------
   Reveal-on-scroll (applied via CSS class; handysalon.js / a tiny
   Elementor "Motion Effects" equivalent toggles .hs-revealed)
--------------------------------------------------------------------- */
.hs-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
}
.hs-reveal.hs-revealed,
.hs-reveal.hs-no-js {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------------
   Buttons
   `.hs-btn*` is applied via Elementor's "CSS Classes" advanced control,
   which lands on the outer `.elementor-element` wrapper — not on the
   real `<a class="elementor-button">` tag — so every rule below reaches
   in with a descendant selector. The classic PHP header/footer fallback
   instead puts `.hs-btn` directly on its own `<a>` tags, which the
   plain `.hs-btn` fallback rule at the end of this block covers.
--------------------------------------------------------------------- */
.hs-btn .elementor-button,
a.hs-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 26px;
	border-radius: var(--hs-radius-sm);
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	line-height: 1.2;
}
.hs-btn--primary .elementor-button, a.hs-btn--primary  { background: linear-gradient(135deg, var(--hs-primary), var(--hs-primary-dark)) !important; color: #fff !important; box-shadow: var(--hs-shadow-blue) !important; }
.hs-btn--primary .elementor-button:hover, a.hs-btn--primary:hover  { filter: brightness(1.04); color: #fff !important; }
.hs-btn--dark .elementor-button, a.hs-btn--dark  { background: var(--hs-ink) !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(11,18,32,.6) !important; }
.hs-btn--outline .elementor-button, a.hs-btn--outline  { background: rgba(255,255,255,0.8) !important; border: 1px solid var(--hs-border) !important; color: var(--hs-ink) !important; backdrop-filter: blur(10px); }
.hs-btn--gradient .elementor-button, a.hs-btn--gradient  { background: linear-gradient(135deg, var(--hs-primary), var(--hs-cyan)) !important; color: #fff !important; }
.hs-btn--sm .elementor-button, a.hs-btn--sm  { padding: 10px 18px; font-size: 14px; border-radius: 11px !important; }
.hs-btn--block .elementor-button, a.hs-btn--block  { display: flex; justify-content: center; margin-top: 10px; padding: 14px; border-radius: 12px !important; }
.hs-btn--link .elementor-button, a.hs-btn--link  { background: none !important; box-shadow: none !important; padding: 0; color: var(--hs-primary) !important; }

/* ---------------------------------------------------------------------
   Row gaps. Elementor's classic Section/Column model creates its
   default ~20px column gap via PADDING on an inner
   `.elementor-element-populated` wrapper, not a real flex `gap`. Every
   row here puts a card/pillar background directly on the *column*
   itself (so the colour spans the full column width) — an element
   Elementor's padding-based gap never touches — so those columns ended
   up rendering with ZERO space between them (confirmed by live-
   measuring: 0px between the two pillar cards, 0px between process
   cards). Fix: a real flexbox `gap` on `.elementor-container` per row,
   with Elementor's own padding contribution zeroed out so the two
   mechanisms don't stack into double spacing.
--------------------------------------------------------------------- */
.hs-row-gap-14 > .elementor-container,
.hs-row-gap-16 > .elementor-container,
.hs-row-gap-18 > .elementor-container,
.hs-row-gap-20 > .elementor-container,
.hs-row-gap-22 > .elementor-container,
.hs-row-gap-24 > .elementor-container,
.hs-row-gap-32 > .elementor-container,
.hs-row-gap-hero > .elementor-container,
.hs-row-gap-cta > .elementor-container {
	row-gap: 20px;
}
.hs-row-gap-14 > .elementor-container { column-gap: 14px !important; }
.hs-row-gap-16 > .elementor-container { column-gap: 16px !important; }
.hs-row-gap-18 > .elementor-container { column-gap: 18px !important; }
.hs-row-gap-20 > .elementor-container { column-gap: 20px !important; }
.hs-row-gap-22 > .elementor-container { column-gap: 22px !important; }
.hs-row-gap-24 > .elementor-container { column-gap: 24px !important; }
.hs-row-gap-32 > .elementor-container { column-gap: 32px !important; }
.hs-row-gap-hero > .elementor-container { column-gap: clamp(32px,5vw,64px) !important; }
.hs-row-gap-cta > .elementor-container { column-gap: clamp(30px,5vw,60px) !important; }
.hs-row-gap-14 > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-16 > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-18 > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-20 > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-22 > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-24 > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-32 > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-hero > .elementor-container > .elementor-column > .elementor-element-populated,
.hs-row-gap-cta > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
@media (max-width: 767px) {
	.hs-row-gap-14 > .elementor-container,
	.hs-row-gap-16 > .elementor-container,
	.hs-row-gap-18 > .elementor-container,
	.hs-row-gap-20 > .elementor-container,
	.hs-row-gap-22 > .elementor-container,
	.hs-row-gap-24 > .elementor-container,
	.hs-row-gap-32 > .elementor-container,
	.hs-row-gap-hero > .elementor-container,
	.hs-row-gap-cta > .elementor-container {
		row-gap: 16px;
	}
}

/* ---------------------------------------------------------------------
   Navigation (classic PHP fallback — see header.php)
--------------------------------------------------------------------- */
.hs-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	width: 100%;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	background: rgba(255,255,255,0.72);
	border-bottom: 1px solid rgba(15,23,42,0.07);
}
.hs-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.hs-nav__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--hs-ink); flex-shrink: 0; }
.hs-nav__logo-mark {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 11px;
	background: linear-gradient(135deg, var(--hs-primary), var(--hs-cyan));
	box-shadow: 0 8px 20px -6px rgba(37,99,235,.5);
	color: #fff;
}
.hs-nav__logo-mark i, .hs-nav__logo-mark svg { width: 20px; height: 20px; }
.hs-footer .hs-nav__logo-mark { width: 36px; height: 36px; border-radius: 10px; }
.hs-footer .hs-nav__logo-mark i, .hs-footer .hs-nav__logo-mark svg { width: 19px; height: 19px; }
.hs-nav__logo-text { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.hs-nav__menu-list { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 600; color: var(--hs-text); list-style: none; margin: 0; padding: 0; }
.hs-nav__menu-list a { color: inherit; text-decoration: none; white-space: nowrap; }
.hs-nav__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hs-nav__phone { display: flex; align-items: center; gap: 7px; color: var(--hs-ink); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.hs-nav__cta, .hs-nav__actions .hs-btn { white-space: nowrap; }
.hs-nav__hamburger {
	display: none;
	align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 11px;
	border: 1px solid rgba(15,23,42,.1); background: #fff; cursor: pointer;
}
.hs-nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 20px 20px; }
.hs-nav__mobile.is-open { display: flex; }
.hs-nav__mobile-list { list-style: none; margin: 0; padding: 0; }
.hs-nav__mobile-list li a,
.hs-nav__mobile a {
	display: block; padding: 12px 8px; color: var(--hs-ink); text-decoration: none;
	font-weight: 600; border-bottom: 1px solid rgba(15,23,42,.06);
}

@media (max-width: 900px) {
	.hs-nav__menu, .hs-nav__actions { display: none; }
	.hs-nav__hamburger { display: flex; }
}

/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */
.hs-hero { position: relative; padding: clamp(56px,9vw,110px) 0 clamp(40px,7vw,72px); overflow: hidden; }
.hs-hero__bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(1200px 700px at 78% -8%, rgba(37,99,235,0.10), transparent 60%),
		radial-gradient(900px 600px at 8% 4%, rgba(6,182,212,0.10), transparent 55%);
}
.hs-badge {
	display: inline-block;
	align-self: flex-start; /* Elementor columns are flex; prevent the pill from stretching full-width */
	width: -moz-fit-content;
	width: fit-content !important; /* Elementor stretches flex items full-width; fit-content beats align-items:stretch */
	max-width: 100%;
	border-radius: 999px;
	background: rgba(255,255,255,0.7); border: 1px solid rgba(15,23,42,.08);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 18px -12px rgba(11,18,32,.4);
}
.hs-badge .elementor-text-editor,
.hs-badge .elementor-text-editor p  { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; margin: 0; font-size: 13px; font-weight: 600 !important; color: var(--hs-text) !important; }
.hs-badge__dot { position: relative; display: flex; width: 8px; height: 8px; }
.hs-badge__dot::before, .hs-badge__dot::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--hs-green);
}
.hs-badge__dot::after { animation: hs-pulse-ring 2.4s infinite; }

.hs-h1 h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px,6vw,68px); line-height: 1.02; letter-spacing: -.035em; margin: 22px 0 0; color: var(--hs-ink) !important; }
.hs-gradient-text {
	background: linear-gradient(115deg, var(--hs-primary), var(--hs-cyan));
	background-size: 200% 200%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: hs-gradient-shift 7s ease infinite;
}
.hs-lead p { font-size: clamp(17px,2vw,20px); line-height: 1.6; color: var(--hs-text-soft); max-width: 520px; margin: 24px 0 0; font-weight: 500; }
.hs-trust-row .elementor-icon-list-items  { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; font-size: 14px; list-style: none; padding: 0; }
.hs-trust-row .elementor-icon-list-item  { gap: 8px; color: var(--hs-text-soft) !important; font-weight: 600 !important; }
.hs-trust-row .elementor-icon-list-icon i, .hs-trust-row .elementor-icon-list-icon svg{ color: var(--hs-amber) !important; fill: var(--hs-amber) !important; }
.hs-trust-row .elementor-icon-list-item:first-child .elementor-icon-list-icon i, .hs-trust-row .elementor-icon-list-item:first-child .elementor-icon-list-icon svg{ color: var(--hs-primary) !important; fill: var(--hs-primary) !important; }

/* Hero glass phone illustration — the "frosted, one-with-the-glass"
   silhouette from the design (see chat1.md: back-of-phone → front-view →
   single frosted-glass element, iterated three times before landing here). */
.hs-hero__visual { position: relative; justify-self: center; }
.hs-phone {
	position: relative;
	width: min(268px,66vw);
	aspect-ratio: 42/90;
	border-radius: 52px;
	background: linear-gradient(158deg, rgba(255,255,255,0.82), rgba(230,238,248,0.5) 55%, rgba(219,229,243,0.62));
	border: 1px solid rgba(255,255,255,0.9);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	box-shadow:
		0 56px 100px -32px rgba(37,99,235,.42),
		0 14px 32px -14px rgba(15,23,42,.2),
		inset 0 1px 0 rgba(255,255,255,.98),
		inset 0 0 0 1.5px rgba(15,23,42,.05),
		inset 0 0 0 7px rgba(255,255,255,.16);
}
.hs-phone::before { /* inner brand glow */
	content: ''; position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
	width: 82%; height: 46%; border-radius: 50%;
	background: radial-gradient(circle, rgba(37,99,235,.16), rgba(6,182,212,.10) 46%, transparent 72%);
	filter: blur(16px); pointer-events: none;
}
.hs-phone::after { /* top sheen */
	content: ''; position: absolute; inset: 0; border-radius: 52px;
	background: linear-gradient(152deg, rgba(255,255,255,.55), transparent 32%);
	pointer-events: none;
}
.hs-phone__frame {
	position: absolute; inset: 13px; border-radius: 40px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 0 2px rgba(15,23,42,.03);
	pointer-events: none;
}
.hs-phone__button {
	position: absolute; border-radius: 2px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95), -1px 0 3px rgba(15,23,42,.08);
}
.hs-phone__button--left-1 { left: -1%; top: 25%; width: 1.5%; height: 6.5%; background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.3)); }
.hs-phone__button--left-2 { left: -1%; top: 34.5%; width: 1.5%; height: 7%; background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.3)); }
.hs-phone__button--right { right: -1%; top: 29%; width: 1.5%; height: 9.5%; background: linear-gradient(270deg, rgba(255,255,255,.85), rgba(255,255,255,.3)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 1px 0 3px rgba(15,23,42,.08); }
.hs-phone__island {
	position: absolute; top: 7.5%; left: 50%; transform: translateX(-50%);
	width: 30%; height: 4.2%; border-radius: 999px;
	background: rgba(16,22,36,.74);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 8px rgba(15,23,42,.3);
	display: flex; align-items: center; justify-content: flex-end; padding-right: 7%;
}
.hs-phone__island-cam { width: 15%; aspect-ratio: 1; border-radius: 50%; background: #3a4150; box-shadow: inset 0 0 1px rgba(0,0,0,.55); }
.hs-phone__home-bar {
	position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%);
	width: 29%; height: .65%; border-radius: 999px; background: rgba(15,23,42,.26);
}

/* Hero chips: Icon Box widget (layout "left" — icon beside content),
   `.hs-chip*` on the widget wraps Elementor's own
   .elementor-icon-box-wrapper/-icon/-content/-title/-description markup. */
.hs-chip {
	position: absolute;
	border-radius: 16px;
	background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.9);
	backdrop-filter: blur(16px);
	box-shadow: 0 18px 40px -18px rgba(11,18,32,.28);
}
.hs-chip--top { top: -40px; left: -40px; animation: hs-floaty 6s ease-in-out infinite; }
.hs-chip--bottom { bottom: -38px; right: -40px; animation: hs-floaty2 7s ease-in-out infinite; }
.hs-chip .elementor-icon-box-wrapper  { display: flex; align-items: center; gap: 10px; padding: 13px 16px; text-align: left; }
.hs-chip .elementor-icon-box-icon  { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px !important; flex-shrink: 0; }
.hs-chip--top .elementor-icon-box-icon  { background: rgba(37,99,235,.12) !important; color: var(--hs-primary) !important; }
.hs-chip--bottom .elementor-icon-box-icon  { background: rgba(6,182,212,.14) !important; color: var(--hs-cyan-dark) !important; }
.hs-chip .elementor-icon-box-title  { font-weight: 800 !important; font-size: 14px; margin: 0; }
.hs-chip .elementor-icon-box-description  { font-size: 12px; color: var(--hs-text-mute) !important; margin: 0; }

/* On mobile, columns keep their natural (text-first) source order —
   headline/CTA before the decorative phone visual — rather than
   reordering the visual to the top, which pushed hero copy below the
   fold entirely on narrow viewports (confirmed via live-testing at
   390px width). */
@media (max-width: 620px) {
	.hs-chip { position: static; margin-top: 16px; animation: none; }
	.hs-hero__visual { display: flex; flex-direction: column; align-items: center; gap: 12px; }
}

/* ---------------------------------------------------------------------
   Brand marquee
--------------------------------------------------------------------- */
.hs-marquee {
	position: relative; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hs-marquee .elementor-icon-list-items  { display: flex; flex-wrap: nowrap; gap: 56px; width: max-content; animation: hs-marquee 26s linear infinite; list-style: none; margin: 0; padding: 0; }
.hs-marquee .elementor-icon-list-item  { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 22px; color: #AEB6C4 !important; white-space: nowrap; }
.hs-marquee .elementor-icon-list-icon  { display: none; }

/* ---------------------------------------------------------------------
   Stats (native Elementor Counter widget)
--------------------------------------------------------------------- */
/* The "bordered grid with hairline dividers" look needs a *real* 1px
   flex gap between columns (the gray background shows through as the
   divider) — `display:grid` on the section itself does nothing since
   Elementor's actual flex row is one level deeper, in `.elementor-container`. */
.hs-stats { background: var(--hs-border); border: 1px solid var(--hs-border); border-radius: 24px; overflow: hidden; }
/* No flex-wrap here: 4 × 25% + 3 × 1px gap adds up to just over 100%,
   which — with wrap enabled — pushed the 4th cell onto its own row on
   every desktop width (confirmed by live-screenshotting). Real
   responsive stacking to 2x2/1x4 on narrow screens is handled by
   Elementor's own mobile column-width classes regardless of this. */
.hs-stats > .elementor-container { column-gap: 1px !important; row-gap: 1px !important; }
.hs-stats > .elementor-container > .elementor-column > .elementor-element-populated { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 767px) {
	.hs-stats > .elementor-container { flex-wrap: wrap; }
}
.hs-stats .elementor-widget-counter  { background: #fff !important; padding: 32px 26px; text-align: center; }
.hs-stats .elementor-counter-number-wrapper  { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(32px,4vw,44px); letter-spacing: -.03em !important; color: var(--hs-ink) !important; }
.hs-stats .elementor-counter-title  { color: var(--hs-text-mute) !important; font-weight: 600 !important; margin-top: 6px; font-size: 15px; }

/* ---------------------------------------------------------------------
   Two pillars
--------------------------------------------------------------------- */
.hs-pillar { position: relative; overflow: hidden; padding: 34px; border-radius: var(--hs-radius-lg); height: 100%; }
.hs-pillar--dark { background: linear-gradient(160deg, var(--hs-ink), var(--hs-ink-soft)); color: #fff; }
.hs-pillar--dark::before { content:''; position:absolute; top:-60px; right:-40px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(37,99,235,.5), transparent 68%); filter: blur(10px); }
.hs-pillar--light { background: rgba(255,255,255,0.7); border: 1px solid var(--hs-border); backdrop-filter: blur(16px); box-shadow: 0 30px 60px -34px rgba(37,99,235,.28); }
.hs-pillar--light::before { content:''; position:absolute; top:-60px; right:-40px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(6,182,212,.22), transparent 68%); filter: blur(10px); }
/* Pillar icon badge: Icon Box widget, icon only (no title/description set),
   position:"top" default — sized down to a plain 52px rounded icon chip. */
.hs-pillar__icon .elementor-icon-box-wrapper  { display: inline-flex; }
.hs-pillar__icon .elementor-icon-box-icon  { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px !important; }
.hs-pillar--dark .hs-pillar__icon .elementor-icon-box-icon  { background: rgba(37,99,235,.22) !important; border: 1px solid rgba(59,130,246,.3) !important; color: #7CA9FF !important; }
.hs-pillar--light .hs-pillar__icon .elementor-icon-box-icon  { background: linear-gradient(135deg, var(--hs-primary), var(--hs-cyan)) !important; color: #fff !important; }
.hs-pillar__title .elementor-heading-title  { position: relative; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 26px; letter-spacing: -.02em !important; margin: 22px 0 0; }
.hs-pillar--dark .hs-pillar__title .elementor-heading-title  { color: #fff !important; }
.hs-pillar--light .hs-pillar__title .elementor-heading-title  { color: var(--hs-ink) !important; }
.hs-pillar__desc .elementor-text-editor  { position: relative; line-height: 1.6; margin: 12px 0 22px; font-size: 16px; }
.hs-pillar--dark .hs-pillar__desc .elementor-text-editor  { color: #AEB8CC !important; }
.hs-pillar--light .hs-pillar__desc .elementor-text-editor  { color: var(--hs-text-soft) !important; }
.hs-pillar .elementor-icon-list-items  { position: relative; display: grid; gap: 10px; margin-bottom: 26px; list-style: none; padding: 0; }
.hs-pillar .elementor-icon-list-item  { display: flex; align-items: center; gap: 11px; font-size: 15px; }
.hs-pillar--dark .elementor-icon-list-item  { color: #DCE3EF !important; }
.hs-pillar--dark .elementor-icon-list-icon i, .hs-pillar--dark .elementor-icon-list-icon svg{ color: #3B82F6 !important; fill: #3B82F6 !important; }
.hs-pillar--light .elementor-icon-list-item  { color: var(--hs-text) !important; }
.hs-pillar--light .elementor-icon-list-icon i, .hs-pillar--light .elementor-icon-list-icon svg{ color: var(--hs-cyan) !important; fill: var(--hs-cyan) !important; }
.hs-pillar .hs-btn { position: relative; }

/* ---------------------------------------------------------------------
   Process (3-step)
--------------------------------------------------------------------- */
.hs-process-card { padding: 30px; border-radius: 22px; background: rgba(255,255,255,0.75); border: 1px solid var(--hs-border); backdrop-filter: blur(12px); height: 100%; }
.hs-process-card--accent { background: linear-gradient(160deg, var(--hs-primary), var(--hs-primary-dark)); color: #fff; box-shadow: 0 26px 50px -22px rgba(37,99,235,.6); border: none; }
.hs-process-card__head > .elementor-container { display: flex !important; align-items: center; justify-content: space-between; column-gap: 12px !important; }
.hs-process-card__num .elementor-text-editor  { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 15px; color: var(--hs-primary) !important; margin: 0; }
.hs-process-card--accent .hs-process-card__num .elementor-text-editor  { color: #BFD3FF !important; }
.hs-process-card__icon .elementor-icon-box-icon  { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px !important; background: rgba(37,99,235,.1) !important; color: var(--hs-primary) !important; }
.hs-process-card--accent .hs-process-card__icon .elementor-icon-box-icon  { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.hs-process-card__title .elementor-heading-title  { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 20px; margin: 20px 0 8px; display: block; color: var(--hs-ink) !important; }
.hs-process-card--accent .hs-process-card__title .elementor-heading-title  { color: #fff !important; }
.hs-process-card__desc .elementor-text-editor  { line-height: 1.6; font-size: 15px; margin: 0; color: var(--hs-text-soft) !important; }
.hs-process-card--accent .hs-process-card__desc .elementor-text-editor  { color: #DCE6FF !important; }

/* ---------------------------------------------------------------------
   Services grid (custom Elementor widget output)
--------------------------------------------------------------------- */
.hs-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hs-service-card { padding: 26px; border-radius: var(--hs-radius-md); background: #fff; border: 1px solid var(--hs-border); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
.hs-service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -26px rgba(37,99,235,.4); border-color: rgba(37,99,235,.25); }
.hs-service-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(6,182,212,.12)); color: var(--hs-primary); }
.hs-service-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 18px 0 7px; letter-spacing: -.01em; }
.hs-service-card__desc { color: var(--hs-text-mute); font-size: 14px; line-height: 1.55; margin: 0; }

@media (max-width: 980px) { .hs-services-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .hs-services-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Mobilfunk section
--------------------------------------------------------------------- */
.hs-mobilfunk { position: relative; padding: clamp(56px,8vw,100px) 0; background: linear-gradient(180deg, var(--hs-offwhite), #FFFFFF); }
.hs-reviews-section { position: relative; padding: clamp(52px,8vw,100px) 0; background: linear-gradient(180deg, #FFFFFF, var(--hs-offwhite)); }
.hs-provider-card { padding: 28px; border-radius: var(--hs-radius-md); background: rgba(255,255,255,0.8); border: 1px solid var(--hs-border); backdrop-filter: blur(12px); text-align: center; height: 100%; }
.hs-provider-card__name .elementor-heading-title  { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 24px; color: var(--hs-ink) !important; }
.hs-provider-card__desc .elementor-text-editor  { color: var(--hs-text-mute) !important; font-size: 14px; line-height: 1.55; margin: 12px 0 0; }

.hs-mobilfunk-panel { padding: 34px; border-radius: 24px; background: #fff; border: 1px solid var(--hs-border); box-shadow: 0 30px 60px -40px rgba(11,18,32,.3); }
.hs-mobilfunk-panel .elementor-icon-list-items  { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px 30px; list-style: none; margin: 0; padding: 0; }
.hs-mobilfunk-panel .elementor-icon-list-item  { display: flex; align-items: center; gap: 11px; font-weight: 600 !important; font-size: 15px; color: #2E3648 !important; }
.hs-mobilfunk-panel .elementor-icon-list-icon i, .hs-mobilfunk-panel .elementor-icon-list-icon svg{ color: var(--hs-cyan) !important; fill: var(--hs-cyan) !important; }
.hs-mobilfunk-panel__divider { height: 1px; background: var(--hs-border); margin: 26px 0; }
/* CTA row: inner Section (2 columns: text column + button column) — Elementor
   sections are already flex rows, so this class just fine-tunes alignment. */
.hs-mobilfunk-panel__cta > .elementor-container { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px !important; row-gap: 16px; }
.hs-mobilfunk-panel__cta > .elementor-container > .elementor-column > .elementor-element-populated { padding-left: 0 !important; padding-right: 0 !important; }
/* Fixed 50/50 (etc.) percentage column widths plus a real flex `gap`
   sum to *more* than 100% (50%+50%+16px), which silently forces an
   unwanted wrap even on a plenty-wide desktop viewport — confirmed by
   live-measuring the two elements landing on separate lines at 1440px.
   Original design used auto-width flex children here, not fixed
   columns, so switch these to size-to-content instead. */
.hs-mobilfunk-panel__cta > .elementor-container > .elementor-column { width: auto !important; flex: 0 1 auto !important; }
.hs-mobilfunk-panel__cta-text .elementor-text-editor  { margin: 0; color: var(--hs-text-soft) !important; font-size: 15px; max-width: 560px; line-height: 1.55; }

/* ---------------------------------------------------------------------
   VS Hotline comparison
--------------------------------------------------------------------- */
.hs-compare-card { padding: 34px; border-radius: 24px; height: 100%; }
.hs-compare-card--muted { background: #F6F7F9; border: 1px solid var(--hs-border-soft); }
.hs-compare-card--dark { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--hs-ink), #152036); color: #fff; box-shadow: 0 34px 70px -34px rgba(37,99,235,.5); }
.hs-compare-card--dark::before { content:''; position:absolute; top:-50px; right:-30px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(6,182,212,.4), transparent 68%); filter: blur(8px); }
/* Compare-card header: one Icon Box widget, layout "left" (icon beside title). */
.hs-compare-card__head .elementor-icon-box-wrapper  { position: relative; display: flex; align-items: center; gap: 11px; margin-bottom: 22px; text-align: left; }
.hs-compare-card__head .elementor-icon-box-icon  { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px !important; }
.hs-compare-card--muted .hs-compare-card__head .elementor-icon-box-icon  { background: #EAECEF !important; color: #8A94A6 !important; }
.hs-compare-card--dark .hs-compare-card__head .elementor-icon-box-icon  { background: linear-gradient(135deg, var(--hs-primary), var(--hs-cyan)) !important; color: #fff !important; }
.hs-compare-card__head .elementor-icon-box-title  { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 20px; margin: 0; }
.hs-compare-card--muted .hs-compare-card__head .elementor-icon-box-title  { color: var(--hs-text-mute) !important; }
.hs-compare-card--dark .hs-compare-card__head .elementor-icon-box-title  { color: #fff !important; }
.hs-compare-card .elementor-icon-list-items  { position: relative; display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.hs-compare-card .elementor-icon-list-item  { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; }
.hs-compare-card--muted .elementor-icon-list-item  { color: #7A8397 !important; }
.hs-compare-card--muted .elementor-icon-list-icon i, .hs-compare-card--muted .elementor-icon-list-icon svg{ color: #C0C6D0 !important; fill: #C0C6D0 !important; }
.hs-compare-card--dark .elementor-icon-list-item  { color: #DCE3EF !important; }
.hs-compare-card--dark .elementor-icon-list-icon i, .hs-compare-card--dark .elementor-icon-list-icon svg{ color: #3B82F6 !important; fill: #3B82F6 !important; }

/* ---------------------------------------------------------------------
   Reviews (custom Elementor widget output)
--------------------------------------------------------------------- */
.hs-rating-badge { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--hs-border); box-shadow: 0 16px 34px -22px rgba(11,18,32,.3); }
.hs-rating-badge__num { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; }
.hs-rating-badge__count { font-size: 13px; color: var(--hs-text-mute); margin-top: 3px; font-weight: 600; }

.hs-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hs-review-card { display: flex; flex-direction: column; padding: 26px; border-radius: var(--hs-radius-md); background: #fff; border: 1px solid var(--hs-border-soft); box-shadow: var(--hs-shadow-soft); }
.hs-review-card__stars { color: var(--hs-amber); margin-bottom: 14px; letter-spacing: 2px; }
.hs-review-card__stars i, .hs-review-card__stars svg { width: 15px; height: 15px; }
.hs-review-card__text { color: #2E3648; font-size: 15px; line-height: 1.6; margin: 0 0 20px; flex: 1; }
.hs-review-card__author { display: flex; align-items: center; gap: 12px; }
.hs-review-card__avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--hs-primary), var(--hs-cyan)); color: #fff; font-weight: 700; font-size: 15px; }
.hs-review-card__name { font-weight: 700; font-size: 14px; }
.hs-review-card__date { font-size: 12px; color: var(--hs-text-faint); }

@media (max-width: 900px) { .hs-reviews-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .hs-reviews-grid { grid-template-columns: 1fr; } }

.hs-elementor-placeholder { padding: 24px; border: 1px dashed var(--hs-border); border-radius: 12px; color: var(--hs-text-mute); font-size: 14px; }

/* ---------------------------------------------------------------------
   FAQ — styling the native Elementor Accordion widget
--------------------------------------------------------------------- */
.hs-faq .elementor-accordion  { display: grid; gap: 12px; }
.hs-faq .elementor-accordion-item  { border-radius: 16px !important; background: #fff !important; border: 1px solid var(--hs-border) !important; overflow: hidden; }
.hs-faq .elementor-tab-title  { padding: 22px 24px; font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 17px; color: var(--hs-ink) !important; }
.hs-faq .elementor-tab-title .elementor-accordion-icon  { color: var(--hs-primary) !important; }
.hs-faq .elementor-tab-content  { padding: 0 24px 24px; color: var(--hs-text-soft) !important; font-size: 15px; line-height: 1.65; }

/* ---------------------------------------------------------------------
   Final CTA + contact
--------------------------------------------------------------------- */
.hs-cta { position: relative; overflow: hidden; border-radius: 32px; background: linear-gradient(150deg, var(--hs-ink), #152036 60%, #112233); padding: clamp(38px,6vw,72px); color: #fff; }
.hs-cta__blob-a { position: absolute; top: -80px; right: -40px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.45), transparent 65%); filter: blur(20px); pointer-events: none; }
.hs-cta__blob-b { position: absolute; bottom: -120px; left: 10%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(6,182,212,.28), transparent 66%); filter: blur(20px); pointer-events: none; }
.hs-cta__title .elementor-heading-title  { position: relative; font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(30px,4.4vw,52px); letter-spacing: -.03em !important; line-height: 1.05; margin: 0; color: #fff !important; }
.hs-cta__lead .elementor-text-editor  { position: relative; color: #AEB8CC !important; font-size: 18px; line-height: 1.6; margin: 20px 0 30px; max-width: 460px; }
.hs-cta__actions > .elementor-container { display: flex !important; flex-wrap: wrap; column-gap: 14px !important; row-gap: 14px; }
.hs-cta__actions > .elementor-container > .elementor-column > .elementor-element-populated { padding-left: 0 !important; padding-right: 0 !important; }
.hs-cta__actions > .elementor-container > .elementor-column { width: auto !important; flex: 0 1 auto !important; }
.hs-cta .hs-btn--outline .elementor-button, .hs-cta a.hs-btn--outline  { background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.2) !important; color: #fff !important; }
/* Info cards (location / opening hours): Icon Box widget, layout "left". */
.hs-info-card.elementor-widget { margin-bottom: 14px; }
.hs-info-card.elementor-widget:last-child { margin-bottom: 0; }
.hs-info-card .elementor-icon-box-wrapper  { display: flex; align-items: flex-start; gap: 12px; padding: 22px; border-radius: 18px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.14) !important; backdrop-filter: blur(10px); text-align: left; }
.hs-info-card .elementor-icon-box-icon  { color: #7CA9FF !important; flex-shrink: 0; margin-top: 2px; }
.hs-info-card .elementor-icon-box-title  { font-weight: 700 !important; font-size: 15px; margin: 0 0 8px; color: #fff !important; }
.hs-info-card .elementor-icon-box-description  { margin: 0; color: #AEB8CC !important; font-size: 14px; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.hs-footer { border-top: 1px solid var(--hs-border); background: #FBFCFE; }
.hs-footer__top { max-width: 1200px; margin: 0 auto; padding: 48px 24px 36px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.hs-footer__brand { max-width: 300px; }
.hs-footer__brand p { color: var(--hs-text-mute); font-size: 14px; line-height: 1.6; margin: 16px 0 0; }
.hs-footer__col-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.hs-footer__list { display: grid; gap: 9px; font-size: 14px; list-style: none; margin: 0; padding: 0; }
.hs-footer__list a, .hs-footer__list span { color: var(--hs-text-mute); text-decoration: none; }
.hs-footer-widget-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.hs-footer__bottom { border-top: 1px solid rgba(15,23,42,.06); }
.hs-footer__bottom-inner {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
	max-width: 1200px; margin: 0 auto; padding: 20px 24px; color: var(--hs-text-faint); font-size: 13px;
}
.hs-footer__legal { display: flex; gap: 20px; }
.hs-footer__legal a { color: var(--hs-text-faint); text-decoration: none; }

@media (max-width: 760px) { .hs-footer__top { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------
   Generic blog/archive/404/search chrome (non-Elementor content)
--------------------------------------------------------------------- */
.hs-page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,4vw,42px); letter-spacing: -.02em; }
.hs-post__title { font-family: var(--font-display); font-weight: 700; }
.hs-post__title a { color: var(--hs-ink); text-decoration: none; }
.hs-post__thumb img { border-radius: var(--hs-radius-md); }
.hs-post__excerpt, .hs-post__content { color: var(--hs-text-soft); line-height: 1.7; }
.hs-archive-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; margin-top: 24px; }
.hs-pagination { margin-top: 40px; }
.hs-404 { text-align: center; padding: 100px 24px; }
.hs-404__code { display: block; font-family: var(--font-display); font-weight: 800; font-size: 96px; color: var(--hs-border); line-height: 1; }

/* ---------------------------------------------------------------------
   Elementor Pro Theme Builder header/footer (elementor/templates/
   header.json, footer.json) — BEST EFFORT, not live-testable in this
   environment (no Elementor Pro license available). `.hs-nav`/`.hs-footer`
   above already cover positioning/background since both templates reuse
   those same classes on their outer section; these rules only style the
   Pro-specific Site Logo / Nav Menu widgets. See DEVELOPER.md "Known
   limitations" — the classic PHP header.php/footer.php fallback is the
   tested, guaranteed-working path and renders automatically if this
   template isn't imported or Elementor Pro isn't active.
--------------------------------------------------------------------- */
.hs-tb-logo .elementor-widget-container  { display: flex; align-items: center; }
.hs-tb-menu .elementor-nav-menu  { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 600 !important; }
.hs-tb-menu .elementor-nav-menu a  { color: var(--hs-text) !important; text-decoration: none !important; }
.hs-tb-phone .elementor-text-editor  { margin: 0; font-weight: 600 !important; font-size: 14px; }
.hs-tb-phone a { color: var(--hs-ink); text-decoration: none; }
.hs-footer__legal-list .elementor-icon-list-items  { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; justify-content: flex-end; }
.hs-footer__legal-list .elementor-icon-list-icon  { display: none; }
.hs-footer__legal-list .elementor-icon-list-item a  { color: var(--hs-text-faint) !important; text-decoration: none !important; font-size: 13px; }


/* Icon color overrides for the *inner* icon element (Elementor's
   generated Kit CSS sets `fill`/`color` directly on `.elementor-icon`
   / the `i`/`svg` tag itself, which — being a direct rule on the
   element rather than an inherited one — beats a `color` set only on
   the ancestor `.elementor-icon-box-icon`/`.elementor-icon-list-icon`
   wrapper, even with !important on the ancestor. Confirmed via
   live-testing: wrapper color applied correctly (verified via
   getComputedStyle) while the icon glyph itself stayed kit-blue. */
.hs-chip--top .elementor-icon-box-icon .elementor-icon, .hs-chip--top .elementor-icon-box-icon i, .hs-chip--top .elementor-icon-box-icon svg { color: var(--hs-primary) !important; fill: var(--hs-primary) !important; }
.hs-chip--bottom .elementor-icon-box-icon .elementor-icon, .hs-chip--bottom .elementor-icon-box-icon i, .hs-chip--bottom .elementor-icon-box-icon svg { color: var(--hs-cyan-dark) !important; fill: var(--hs-cyan-dark) !important; }
.hs-pillar--dark .hs-pillar__icon .elementor-icon-box-icon .elementor-icon, .hs-pillar--dark .hs-pillar__icon .elementor-icon-box-icon i, .hs-pillar--dark .hs-pillar__icon .elementor-icon-box-icon svg { color: #7CA9FF !important; fill: #7CA9FF !important; }
.hs-pillar--light .hs-pillar__icon .elementor-icon-box-icon .elementor-icon, .hs-pillar--light .hs-pillar__icon .elementor-icon-box-icon i, .hs-pillar--light .hs-pillar__icon .elementor-icon-box-icon svg { color: #fff !important; fill: #fff !important; }
.hs-process-card__icon .elementor-icon-box-icon .elementor-icon, .hs-process-card__icon .elementor-icon-box-icon i, .hs-process-card__icon .elementor-icon-box-icon svg { color: var(--hs-primary) !important; fill: var(--hs-primary) !important; }
.hs-process-card--accent .hs-process-card__icon .elementor-icon-box-icon .elementor-icon, .hs-process-card--accent .hs-process-card__icon .elementor-icon-box-icon i, .hs-process-card--accent .hs-process-card__icon .elementor-icon-box-icon svg { color: #fff !important; fill: #fff !important; }
.hs-compare-card--muted .hs-compare-card__head .elementor-icon-box-icon .elementor-icon, .hs-compare-card--muted .hs-compare-card__head .elementor-icon-box-icon i, .hs-compare-card--muted .hs-compare-card__head .elementor-icon-box-icon svg { color: #8A94A6 !important; fill: #8A94A6 !important; }
.hs-compare-card--dark .hs-compare-card__head .elementor-icon-box-icon .elementor-icon, .hs-compare-card--dark .hs-compare-card__head .elementor-icon-box-icon i, .hs-compare-card--dark .hs-compare-card__head .elementor-icon-box-icon svg { color: #fff !important; fill: #fff !important; }
.hs-info-card .elementor-icon-box-icon .elementor-icon, .hs-info-card .elementor-icon-box-icon i, .hs-info-card .elementor-icon-box-icon svg { color: #7CA9FF !important; fill: #7CA9FF !important; }