/* ============================================================
 * Direction A · Noir — a showroom at night
 * Near-black surfaces, Manrope 200 display, hairlines, glass. Shelly blue is
 * spent sparingly: glows, the active state, one hairline per component.
 * Scoped to body.shelly-design-a. See docs/design-directions.md.
 * ========================================================== */
.shelly-design-a {
	--a-night: #0B1419; --a-ink: #070808; --a-black: #121519; --a-white: #FDFDFD;
	--a-dim: rgba(253, 253, 253, 0.68); --a-faint: rgba(253, 253, 253, 0.42);
	--a-line: rgba(253, 253, 253, 0.14); --a-line-light: rgba(18, 21, 25, 0.12);
	--a-glass: rgba(11, 20, 25, 0.58); --a-blue: #4594D1; --a-sky: #9CDBF6; --a-paper: #F9F9F9;
}

/* ---------- Type system ---------- */
.shelly-design-a .va-eyebrow,
.shelly-design-a.home .shelly-eyebrow { display: block; margin: 0 0 16px; font: 700 11px/1 'Manrope', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--a-blue); }
.shelly-design-a.home :is(.shelly-benefits__title, .shelly-journey__title, .shelly-carousel__title, .shelly-prolane__title, .shelly-categories__title, .shelly-apppromo__title, .shelly-ecosystem__head h2, .shelly-how__head h2, main > .wp-block-group.alignfull > .wp-block-group > h2.wp-block-heading) { font-weight: 200 !important; letter-spacing: -0.035em !important; font-size: clamp(34px, 4.4vw, 60px) !important; line-height: 1.04 !important; }

/* ---------- Buttons: square, caps, tracked ---------- */
.shelly-design-a .va-btn,
.shelly-design-a.home .shelly-btn,
.shelly-design-a .shelly-header__shop { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; font: 700 12px/1 'Manrope', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 0; color: var(--a-black) !important; background: var(--a-white); border: 1px solid var(--a-white); transition: background 220ms ease, color 220ms ease, border-color 220ms ease; }
.shelly-design-a .va-btn:hover,
.shelly-design-a.home .shelly-btn:hover,
.shelly-design-a .shelly-header__shop:hover { color: var(--a-white) !important; background: #2481C7; border-color: #2481C7; }
.shelly-design-a .va-btn--ghost,
.shelly-design-a.home .shelly-btn--ghost { color: var(--a-white) !important; background: transparent; border-color: rgba(253, 253, 253, 0.4); }
.shelly-design-a .va-btn--ghost:hover { color: var(--a-black) !important; background: var(--a-white); border-color: var(--a-white); }
.shelly-design-a.home .shelly-btn--outline { color: var(--a-black) !important; background: transparent; border-color: var(--a-black); }
.shelly-design-a.home .shelly-btn--outline:hover { color: var(--a-white) !important; background: var(--a-black); border-color: var(--a-black); }
.shelly-design-a.home .shelly-btn--sm { min-height: 42px; padding: 0 18px; font-size: 11px; }

/* ---------- Announcement + header: dark glass, white wordmark ---------- */
.shelly-design-a .shelly-announcement { background: var(--a-ink); border-bottom: 1px solid var(--a-line); }
.shelly-design-a .shelly-announcement__msg { font-weight: 400; letter-spacing: 0.04em; }
.shelly-design-a .shelly-header { background: rgba(11, 20, 25, 0.97); border-bottom: 1px solid var(--a-line); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); }
.shelly-design-a .shelly-header__logo-img { filter: brightness(0) invert(1); }
.shelly-design-a .shelly-nav .shelly-nav__link { color: var(--a-dim); font-weight: 500; }
.shelly-design-a .shelly-nav .shelly-nav__item:hover > .shelly-nav__link,
.shelly-design-a .shelly-nav .shelly-nav__item:focus-within > .shelly-nav__link,
.shelly-design-a .shelly-nav .shelly-nav__link:hover { color: var(--a-white); }
.shelly-design-a .shelly-nav__badge { background: var(--a-blue); }
.shelly-design-a .shelly-header__icon,
.shelly-design-a .shelly-header__utils .wp-block-search__button,
.shelly-design-a .shelly-header__utils .wc-block-mini-cart__button { color: var(--a-dim) !important; }
.shelly-design-a .shelly-header__icon:hover,
.shelly-design-a .shelly-header__utils .wp-block-search__button:hover,
.shelly-design-a .shelly-header__utils .wc-block-mini-cart__button:hover { color: var(--a-white) !important; }
.shelly-design-a .shelly-header__burger span { background: var(--a-white); }
.shelly-design-a .shelly-header__shop { min-height: 40px; height: 40px; padding: 0 20px; font-size: 11px; }
.shelly-design-a .shelly-header__search:hover .wp-block-search__inside-wrapper,
.shelly-design-a .shelly-header__search .wp-block-search__inside-wrapper:focus-within { background: var(--a-night) !important; }
.shelly-design-a .shelly-header__utils .wp-block-search__input { color: var(--a-white) !important; }
.shelly-design-a .shelly-nav .shelly-nav__panel { background: rgba(11, 20, 25, 0.97); border-color: var(--a-line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); }
.shelly-design-a .shelly-nav .shelly-nav__panel a { color: var(--a-dim); }
.shelly-design-a .shelly-nav .shelly-nav__panel a:hover { color: var(--a-white); }
.shelly-design-a .shelly-nav .shelly-nav__col-title { color: var(--a-faint); border-color: var(--a-line); }
.shelly-design-a .shelly-nav .shelly-nav__quick { border-color: var(--a-line); }

/* ============================================================
 * Hero: the 3D home is the stage
 * ========================================================== */
.shelly-design-a .va-hero { position: relative; min-height: clamp(620px, calc(100vh - var(--shelly-header-h) - 40px), 900px); background: var(--a-ink); color: var(--a-white); display: flex; flex-direction: column; isolation: isolate; }
.shelly-design-a .va-hero__stage { position: absolute; inset: 0; z-index: 0; height: auto; min-height: 0; background-size: cover; background-position: 60% center; transition: filter 600ms ease, opacity 600ms ease; }
.shelly-design-a .va-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 8, 8, 0.94) 0%, rgba(7, 8, 8, 0.7) 32%, rgba(7, 8, 8, 0.06) 62%, rgba(7, 8, 8, 0) 100%), linear-gradient(180deg, rgba(7, 8, 8, 0.55) 0%, rgba(7, 8, 8, 0) 18%, rgba(7, 8, 8, 0) 74%, rgba(7, 8, 8, 0.9) 100%); transition: background 600ms ease; }
/* Campaign and retrofit panels need the whole width: dim the home behind them. */
.shelly-design-a .va-hero:has(.shelly-hs__panel--campaign.is-active) .va-hero__stage,
.shelly-design-a .va-hero:has(.shelly-hs__panel--retrofit.is-active) .va-hero__stage { filter: blur(14px) brightness(0.45); }
.shelly-design-a .va-hero .shelly-hs__inner { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: var(--shelly-page-max); margin-inline: auto; padding: 0 var(--shelly-pad-x); }
.shelly-design-a .va-hero .shelly-hs__panels { flex: 1 1 auto; align-items: center; }
.shelly-design-a .va-hero .shelly-hs__panel { background: none; align-self: center; padding: 44px 0 104px; }
.shelly-design-a .va-hero .shelly-hs__panel::before { content: none; }
.shelly-design-a .va-hero__col { max-width: 640px; }
.shelly-design-a .va-hero__col .va-glass { max-width: 560px; }
.shelly-design-a .va-hero__split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.shelly-design-a .va-hero__title { margin: 0 0 24px; font: 200 clamp(38px, 4.5vw, 68px)/1.02 'Manrope', sans-serif; letter-spacing: -0.04em; color: var(--a-white); text-wrap: balance; }
.shelly-design-a .va-hero__lead { margin: 0 0 30px; max-width: 52ch; font: 400 16px/1.65 'Manrope', sans-serif; color: var(--a-dim); }
.shelly-design-a .va-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.shelly-design-a .va-hero__enter { position: absolute; right: 0; bottom: 104px; display: inline-flex; align-items: center; gap: 12px; padding: 0 22px 0 8px; height: 46px; font: 700 12px/1 'Manrope', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-white); background: var(--a-glass); border: 1px solid var(--a-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color 200ms ease, background 200ms ease; }
.shelly-design-a .va-hero__enter span { padding: 8px 9px; letter-spacing: 0.08em; color: var(--a-black); background: var(--a-white); }
.shelly-design-a .va-hero__enter:hover { border-color: var(--a-sky); background: rgba(11, 20, 25, 0.85); color: var(--a-white); }

/* Glass discovery panel */
.shelly-design-a .va-glass { min-height: 0; padding: 22px 24px 16px; color: var(--a-white); background: var(--a-glass); border: 1px solid var(--a-line); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
.shelly-design-a .va-glass .shelly-discover__head { border-color: var(--a-line); margin-bottom: 18px; padding-bottom: 14px; }
.shelly-design-a .va-glass .shelly-discover__kicker { color: var(--a-sky); letter-spacing: 0.18em; font-size: 10.5px; }
.shelly-design-a .va-glass .shelly-discover__steps li { color: var(--a-faint); }
.shelly-design-a .va-glass .shelly-discover__steps li.is-done { color: var(--a-dim); }
.shelly-design-a .va-glass .shelly-discover__steps li.is-current { color: var(--a-white); }
.shelly-design-a .va-glass .shelly-discover__steps li.is-current span { background: var(--a-white); border-color: var(--a-white); color: var(--a-black); }
.shelly-design-a .va-glass .shelly-discover__q { font: 300 22px/1.25 'Manrope', sans-serif; letter-spacing: -0.015em; color: var(--a-white); margin-bottom: 16px; }
.shelly-design-a .va-glass .shelly-discover__q--result { font-size: 19px; }
.shelly-design-a .va-glass .shelly-discover__goals { gap: 10px; flex: 0 0 auto; }
.shelly-design-a .va-glass .shelly-discover__goal { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 16px 18px; background: rgba(253, 253, 253, 0.04); border: 1px solid var(--a-line); }
.shelly-design-a .va-glass .shelly-discover__goal:hover,
.shelly-design-a .va-glass .shelly-discover__goal:focus-visible { background: rgba(69, 148, 209, 0.16); border-color: var(--a-blue); transform: none; }
.shelly-design-a .va-glass .shelly-discover__goal-icon { width: 40px; height: 40px; margin: 0; color: var(--a-sky); background: rgba(69, 148, 209, 0.16); }
.shelly-design-a .va-glass .shelly-discover__goal-label { font: 500 18px/1 'Manrope', sans-serif; color: var(--a-white); }
.shelly-design-a .va-glass .shelly-discover__goal-list { display: none; }
.shelly-design-a .va-glass .shelly-discover__back,
.shelly-design-a .va-glass .shelly-discover__reset { color: var(--a-faint); }
.shelly-design-a .va-glass .shelly-discover__back:hover,
.shelly-design-a .va-glass .shelly-discover__reset:hover { color: var(--a-white); }
.shelly-design-a .va-glass .shelly-discover__areas { gap: 8px; }
.shelly-design-a .va-glass .shelly-discover__area { min-height: 52px; background: rgba(253, 253, 253, 0.04); border-color: var(--a-line); }
.shelly-design-a .va-glass .shelly-discover__area:hover,
.shelly-design-a .va-glass .shelly-discover__area:focus-visible { background: rgba(69, 148, 209, 0.16); border-color: var(--a-blue); }
.shelly-design-a .va-glass .shelly-discover__area-icon { color: var(--a-sky); }
.shelly-design-a .va-glass .shelly-discover__area-label { color: var(--a-white); font-weight: 500; }
.shelly-design-a .va-glass .shelly-discover__how { color: var(--a-dim); }
.shelly-design-a .va-glass .shelly-discover__pick { background: rgba(69, 148, 209, 0.14); border-color: rgba(69, 148, 209, 0.6); }
.shelly-design-a .va-glass .shelly-discover__tag { color: var(--a-sky); }
.shelly-design-a .va-glass .shelly-discover__name,
.shelly-design-a .va-glass .shelly-discover__price,
.shelly-design-a .va-glass .shelly-discover__view { color: var(--a-white); }
.shelly-design-a .va-glass .shelly-discover__later-title { color: var(--a-faint); }
.shelly-design-a .va-glass .shelly-discover__later-item { border-color: var(--a-line); }
.shelly-design-a .va-glass .shelly-discover__later-item .shelly-discover__price { color: var(--a-dim); }
.shelly-design-a .va-glass .shelly-discover__thumb,
.shelly-design-a .va-glass .shelly-discover__later-item .shelly-discover__thumb { background: #FFFFFF; }
.shelly-design-a .va-glass .shelly-discover__note { color: var(--a-dim); background: rgba(253, 253, 253, 0.04); border-color: var(--a-blue); }
.shelly-design-a .va-glass .shelly-discover__planner { color: var(--a-sky); }
.shelly-design-a .va-glass .shelly-discover__links .shelly-btn--outline { color: var(--a-white) !important; border-color: rgba(253, 253, 253, 0.4); }
.shelly-design-a .va-glass .shelly-discover__links .shelly-btn--outline:hover { color: var(--a-black) !important; background: var(--a-white); border-color: var(--a-white); }
.shelly-design-a .va-glass .shelly-discover__foot { color: var(--a-faint); border-color: var(--a-line); margin-top: 16px; }
.shelly-design-a .va-glass .shelly-discover__foot a { color: var(--a-white); }

/* Campaign set: white vitrines in dark frames */
.shelly-design-a .va-set { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; }
.shelly-design-a .va-set a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 12px 18px; color: var(--a-white); background: var(--a-glass); border: 1px solid var(--a-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color 200ms ease, transform 300ms ease; }
.shelly-design-a .va-set a:hover { border-color: var(--a-blue); transform: translateY(-4px); color: var(--a-white); }
.shelly-design-a .va-set__media { display: block; margin-bottom: 10px; background: #FFFFFF; }
.shelly-design-a .va-set__media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 14px; }
.shelly-design-a .va-set__role { font: 700 10px/1.3 'Manrope', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-sky); }
.shelly-design-a .va-set__name { font: 500 15px/1.3 'Manrope', sans-serif; }
.shelly-design-a .va-set__price { margin-top: auto; font: 300 15px/1.2 'Manrope', sans-serif; color: var(--a-dim); }

.shelly-design-a .va-how { list-style: none; counter-reset: vah; display: grid; gap: 0; margin: 0 0 34px; padding: 0; border-top: 1px solid var(--a-line); }
.shelly-design-a .va-how li { counter-increment: vah; position: relative; padding: 14px 0 14px 46px; font: 400 15px/1.5 'Manrope', sans-serif; color: var(--a-dim); border-bottom: 1px solid var(--a-line); }
.shelly-design-a .va-how li strong { font-weight: 500; color: var(--a-white); }
.shelly-design-a .va-how li::before { content: "0" counter(vah); position: absolute; left: 0; top: 15px; font: 200 18px/1 'Manrope', sans-serif; color: var(--a-sky); }
.shelly-design-a .va-figure { padding: 20px; background: var(--a-glass); border: 1px solid var(--a-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.shelly-design-a .va-figure .shelly-retrofit { box-shadow: none; }

/* Controls: a thin progress line */
.shelly-design-a .va-hero .shelly-hs__controls { position: absolute; left: var(--shelly-pad-x); right: var(--shelly-pad-x); bottom: 0; max-width: none; padding: 0; }
.shelly-design-a .va-hero .shelly-hs__controls::before { left: 0; right: 0; border-color: var(--a-line); }
.shelly-design-a .va-hero .shelly-hs__tab { padding: 22px 0 26px; font: 500 12px/1 'Manrope', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-faint); border-top-width: 1px; }
.shelly-design-a .va-hero .shelly-hs__tab span { color: var(--a-faint); letter-spacing: 0.1em; }
.shelly-design-a .va-hero .shelly-hs__tab.is-active { color: var(--a-white); border-top-color: var(--a-white); }
.shelly-design-a .va-hero .shelly-hs__tab.is-active span { color: var(--a-sky); }
.shelly-design-a .va-hero .shelly-hs__arrow { background: transparent; border-color: var(--a-line); }

/* ============================================================
 * Sections
 * ========================================================== */
.shelly-design-a.home .shelly-metrics { background: var(--a-ink); border-top: 1px solid var(--a-line); padding: 0; }
.shelly-design-a.home .shelly-metrics__inner { gap: 0; }
.shelly-design-a.home .shelly-metrics__item { padding: 44px 32px 44px 0; border-left: 0; border-right: 1px solid var(--a-line); }
.shelly-design-a.home .shelly-metrics__item + .shelly-metrics__item { padding-left: 32px; }
.shelly-design-a.home .shelly-metrics__item:last-child { border-right: 0; }
.shelly-design-a.home .shelly-metrics__value { font-weight: 200; letter-spacing: -0.04em; font-size: clamp(40px, 4.4vw, 64px); }
.shelly-design-a.home .shelly-metrics__label { font: 700 10.5px/1.4 'Manrope', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--a-faint); }

.shelly-design-a.home .shelly-benefits { background: var(--a-paper); padding: 120px 0; border: 0; }
.shelly-design-a.home .shelly-benefits__grid { gap: 0; border: 1px solid var(--a-line-light); background: #FFFFFF; }
.shelly-design-a.home .shelly-benefits__card { border: 0; border-right: 1px solid var(--a-line-light); padding: 36px 30px 28px; background: transparent; }
.shelly-design-a.home .shelly-benefits__card:last-child { border-right: 0; }
.shelly-design-a.home .shelly-benefits__card:hover { transform: none; background: #F0F4F7; }
.shelly-design-a.home .shelly-benefits__icon { width: auto; height: auto; place-items: start; background: none; color: var(--a-blue); margin-bottom: 40px; }
.shelly-design-a.home .shelly-benefits__icon svg { width: 34px; height: 34px; stroke-width: 1.1; }
.shelly-design-a.home .shelly-benefits__label { font: 300 24px/1.2 'Manrope', sans-serif; letter-spacing: -0.02em; }
.shelly-design-a.home .shelly-benefits__more { font: 700 11px/1 'Manrope', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }

.shelly-design-a.home .shelly-journey { background: var(--a-night); color: var(--a-white); padding: 128px 0; border: 0; }
.shelly-design-a.home .shelly-journey__title { color: var(--a-white); }
.shelly-design-a.home .shelly-journey__lead { color: var(--a-dim); }
.shelly-design-a.home .shelly-journey__step { border-top-color: var(--a-line); }
.shelly-design-a.home .shelly-journey__step::before { height: 1px; background: var(--a-sky); box-shadow: 0 0 18px 1px rgba(69, 148, 209, 0.8); }
.shelly-design-a.home .shelly-journey__num { font: 200 84px/0.9 'Manrope', sans-serif; letter-spacing: -0.05em; color: var(--a-white); margin-bottom: 28px; }
.shelly-design-a.home .shelly-journey__step h3 { font: 300 24px/1.2 'Manrope', sans-serif; letter-spacing: -0.02em; color: var(--a-white); }
.shelly-design-a.home .shelly-journey__step p { color: var(--a-dim); }
.shelly-design-a.home .shelly-journey__from { color: var(--a-white); font-weight: 500; }
.shelly-design-a.home .shelly-journey__link { font: 700 11px/1 'Manrope', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-white); border-color: rgba(253, 253, 253, 0.4); }
.shelly-design-a.home .shelly-journey__link:hover { color: var(--a-sky); }

/* Popular devices: vitrines on paper */
.shelly-design-a.home .shelly-carousel { background: var(--a-paper); }
.shelly-design-a.home .shelly-carousel .wc-block-product,
.shelly-design-a.home .shelly-carousel li.product { padding: 0 0 22px !important; border: 1px solid var(--a-line-light); box-shadow: none; background: #FFFFFF; overflow: hidden; }
.shelly-design-a.home .shelly-carousel .wc-block-components-product-image { margin: 0 0 18px; background: #F2F5F8; }
.shelly-design-a.home .shelly-carousel img { margin: 0 !important; padding: 24px; background: transparent !important; mix-blend-mode: multiply; }
.shelly-design-a.home .shelly-carousel .wp-block-post-title { margin: 0 20px 6px !important; font-weight: 400 !important; }
.shelly-design-a.home .shelly-carousel .wp-block-woocommerce-product-price { margin: 0 20px 16px !important; font-weight: 500 !important; }
.shelly-design-a.home .shelly-carousel .wc-block-components-product-button { margin: auto 20px 0 !important; width: auto !important; }
.shelly-design-a.home .shelly-carousel .wc-block-components-product-button .wp-block-button__link { width: 100%; min-height: 44px; font: 700 11px/1 'Manrope', sans-serif !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-black) !important; background: transparent !important; border: 1px solid var(--a-black) !important; }
.shelly-design-a.home .shelly-carousel .wc-block-product:hover .wp-block-button__link { color: #FFFFFF !important; background: var(--a-black) !important; }
.shelly-design-a.home .shelly-carousel__arrow { border-radius: 0 !important; }

.shelly-design-a.home .shelly-prolane { background: var(--a-ink); padding: 112px 0; border-top: 1px solid var(--a-line); }
.shelly-design-a.home .shelly-prolane__group a { border-color: var(--a-line); font-weight: 500; letter-spacing: 0.02em; }
.shelly-design-a.home .shelly-prolane__group-title { letter-spacing: 0.2em; color: var(--a-faint); }

.shelly-design-a.home .shelly-categories { background: var(--a-paper); }
.shelly-design-a.home .shelly-apppromo,
.shelly-design-a.home .shelly-ecosystem { background: #FFFFFF; }
.shelly-design-a.home .shelly-how { background: var(--a-paper); }

/* Photo stage when the 3D home is switched off */
.shelly-design-a .va-hero__stage--photo { background-size: cover; background-position: 68% center; }
.shelly-design-a .va-hero:has(.va-hero__stage--photo) .va-hero__veil { background: linear-gradient(90deg, #070808 0%, rgba(7, 8, 8, 0.96) 30%, rgba(7, 8, 8, 0.55) 55%, rgba(7, 8, 8, 0.15) 100%), linear-gradient(180deg, rgba(7, 8, 8, 0.2) 0%, rgba(7, 8, 8, 0) 40%, rgba(7, 8, 8, 0.85) 100%); }

/* Scenes: the flat Experience Centre for Noir */
.shelly-design-a .va-scenes { background: var(--a-ink); color: var(--a-white); padding: 128px 0; border-top: 1px solid var(--a-line); scroll-margin-top: var(--shelly-header-h); }
.shelly-design-a .va-scenes__inner { max-width: var(--shelly-page-max); margin-inline: auto; padding: 0 var(--shelly-pad-x); }
.shelly-design-a .va-scenes__head { max-width: 760px; margin-bottom: 64px; }
.shelly-design-a .va-scenes__title { margin: 0 0 18px; font: 200 clamp(38px, 4.8vw, 68px)/1.02 'Manrope', sans-serif; letter-spacing: -0.035em; color: var(--a-white); }
.shelly-design-a .va-scenes__lead { margin: 0; font: 400 17px/1.65 'Manrope', sans-serif; color: var(--a-dim); }
.shelly-design-a .va-scenes__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--a-line); }
.shelly-design-a .va-scene { display: grid; grid-template-columns: 120px minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 48px; padding: 40px 0; border-bottom: 1px solid var(--a-line); }
.shelly-design-a .va-scene__num { font: 200 72px/0.9 'Manrope', sans-serif; letter-spacing: -0.05em; color: var(--a-white); }
.shelly-design-a .va-scene__time { margin: 0 0 12px; font: 700 11px/1 'Manrope', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--a-blue); }
.shelly-design-a .va-scene__title { margin: 0 0 12px; font: 300 30px/1.1 'Manrope', sans-serif; letter-spacing: -0.02em; color: var(--a-white); }
.shelly-design-a .va-scene__copy { margin: 0; font: 400 16px/1.65 'Manrope', sans-serif; color: var(--a-dim); max-width: 48ch; }
.shelly-design-a .va-scene__devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--a-line); border: 1px solid var(--a-line); align-self: start; }
.shelly-design-a .va-scene__devices a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px; background: var(--a-ink); color: var(--a-white); transition: background 180ms ease; }
.shelly-design-a .va-scene__devices a:hover { background: rgba(69, 148, 209, 0.14); }
.shelly-design-a .va-scene__ico { color: var(--a-sky); display: grid; place-items: center; }
.shelly-design-a .va-scene__dev { font: 500 14.5px/1.2 'Manrope', sans-serif; }
.shelly-design-a .va-scene__prod { font: 400 12px/1.2 'Manrope', sans-serif; color: var(--a-faint); text-align: right; }
.shelly-design-a .va-scenes__foot { margin: 40px 0 0; }
@media (max-width: 989px) {
	.shelly-design-a .va-scenes { padding: 72px 0; }
	.shelly-design-a .va-scenes__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-design-a .va-scene { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
	.shelly-design-a .va-scene__num { font-size: 44px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.shelly-design-a .va-hero__split { gap: 40px; }
	.shelly-design-a.home .shelly-benefits__card:nth-child(2) { border-right: 0; }
	.shelly-design-a.home .shelly-benefits__card:nth-child(-n+2) { border-bottom: 1px solid var(--a-line-light); }
}
@media (max-width: 989px) {
	.shelly-design-a .va-hero { min-height: 0; }
	.shelly-design-a .va-hero__stage { inset: 0 0 auto 0; height: clamp(300px, 46vh, 420px); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); background-position: 72% center; }
	.shelly-design-a .va-hero__veil { background: linear-gradient(180deg, rgba(7, 8, 8, 0.2) 0%, rgba(7, 8, 8, 0.1) 22%, rgba(7, 8, 8, 0.96) 44%, #070808 100%); }
	.shelly-design-a .va-hero .shelly-hs__inner { padding: 0 var(--shelly-pad-x-mobile); }
	.shelly-design-a .va-hero .shelly-hs__panel { padding: clamp(210px, 34vh, 310px) 0 96px; }
	.shelly-design-a .va-hero .shelly-hs__panel--campaign,
	.shelly-design-a .va-hero .shelly-hs__panel--retrofit { padding-top: 56px; }
	.shelly-design-a .va-hero__split { grid-template-columns: 1fr; gap: 32px; }
	.shelly-design-a .va-hero__enter { position: static; margin-top: 18px; }
	.shelly-design-a .va-hero .shelly-hs__controls { left: var(--shelly-pad-x-mobile); right: var(--shelly-pad-x-mobile); }
	.shelly-design-a .va-hero .shelly-hs__tab { letter-spacing: 0.08em; font-size: 11px; }
	.shelly-design-a .va-set { grid-template-columns: 1fr; }
	.shelly-design-a .va-set a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px; }
	.shelly-design-a .va-set__media { width: 72px; margin: 0; }
	.shelly-design-a .va-set__media img { padding: 6px; }
	.shelly-design-a.home .shelly-metrics__inner { grid-template-columns: 1fr 1fr; }
	.shelly-design-a.home .shelly-metrics__item { padding: 28px 16px 28px 0 !important; border-bottom: 1px solid var(--a-line); }
	.shelly-design-a.home .shelly-metrics__item:nth-child(even) { border-right: 0; padding-left: 20px !important; }
	.shelly-design-a.home .shelly-benefits, .shelly-design-a.home .shelly-journey, .shelly-design-a.home .shelly-prolane { padding: 72px 0; }
	.shelly-design-a.home .shelly-benefits__card { border-right: 0 !important; border-bottom: 1px solid var(--a-line-light); }
	.shelly-design-a.home .shelly-journey__num { font-size: 60px; }
}

/* ============================================================
 * Homepage in the shelly.com structure (theme 1.9.2): the shared sections
 * (sections.css) in Noir's look. A showroom at night: near-black bands,
 * Manrope 200 display, hairlines instead of fills, square corners, tracked
 * caps, and Shelly blue only where something can be pressed or is active.
 * ========================================================== */
.shelly-design-a.vs-home {
	--v-bg: #0B1419; --v-text: #FDFDFD; --v-w-title: 200;
	--v-r-xs: 0; --v-r-sm: 0; --v-r: 0; --v-r-lg: 0; --v-r-pill: 0;
	--s-well: #121B21; --s-chip: rgba(69, 148, 209, 0.14); --s-grey: rgba(253, 253, 253, 0.62);
	--s-grad: linear-gradient(90deg, #4594D1 0%, #2481C7 100%);
	--s-navy: #070808; --s-mid: #9CDBF6;
	--sc-white: #FDFDFD; --sc-ink: #FDFDFD;
	background: #0B1419;
}
/* Type */
.shelly-design-a.vs-home .vs-eyebrow { font: 700 11px/1 'Manrope', sans-serif; letter-spacing: 0.22em; color: #4594D1; margin-bottom: 18px; }
.shelly-design-a.vs-home .vs-h2 { font-weight: 200; letter-spacing: -0.02em; font-size: clamp(34px, 3.4vw, 52px); }
.shelly-design-a.vs-home .vs-statement { font-weight: 200; letter-spacing: -0.035em; font-size: clamp(40px, 5vw, 76px); line-height: 1.05; }
.shelly-design-a.vs-home .vs-grad { background: none; color: #9CDBF6; -webkit-text-fill-color: #9CDBF6; }
/* Buttons: square, tracked caps */
.shelly-design-a.vs-home :is(.vs-btn, .sc-slide__btn, .sc-app .vs-btn) { border-radius: 0 !important; font: 700 12px/1 'Manrope', sans-serif !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; min-height: 50px; padding: 0 28px; }
.shelly-design-a.vs-home .vs-btn.vs-btn--outline, .shelly-design-a.vs-home .sc-slide__btn.sc-slide__btn--ghost { background: transparent !important; color: #FDFDFD !important; border: 1px solid rgba(253, 253, 253, 0.4) !important; }
.shelly-design-a.vs-home .vs-btn.vs-btn--outline:hover { background: #FDFDFD !important; color: #121519 !important; }
.shelly-design-a.vs-home .vs-round { color: #FDFDFD; border-color: rgba(253, 253, 253, 0.3); }
.shelly-design-a.vs-home .vs-round:hover { background: #FDFDFD; color: #121519; }
/* Hero */
.shelly-design-a.vs-home .sc-slide__title { font-weight: 200 !important; letter-spacing: -0.02em; font-size: clamp(32px, 3.2vw, 48px); }
.shelly-design-a.vs-home .sc-slider--funnels .sc-slide__content { max-width: 480px; }
.shelly-design-a.vs-home .sc-slider--funnels .sc-slide__ctas { max-width: 420px; }
.shelly-design-a.vs-home .sc-slide__eyebrow { font-size: 11px; letter-spacing: 0.22em; }
.shelly-design-a.vs-home .sc-slider__arrow { border-radius: 0; }
.shelly-design-a.vs-home .sc-slider__dot { border-radius: 0 !important; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px !important; }
/* Stat tiles: hairline cells, thin numerals */
.shelly-design-a.vs-home .vs-metrics { background: #0B1419; border-bottom: 1px solid rgba(253, 253, 253, 0.1); }
.shelly-design-a.vs-home .vs-metrics__grid { gap: 0; border: 1px solid rgba(253, 253, 253, 0.14); }
.shelly-design-a.vs-home .vs-metrics__tile { background: transparent; border-right: 1px solid rgba(253, 253, 253, 0.14); color: rgba(253, 253, 253, 0.62); }
.shelly-design-a.vs-home .vs-metrics__value, .shelly-design-a.vs-home .vs-metrics__unit { font-weight: 200; font-size: clamp(32px, 2.8vw, 44px); color: #FDFDFD; }
.shelly-design-a.vs-home .vs-metrics__label { font-weight: 500; letter-spacing: 0.04em; }
.shelly-design-a.vs-home .vs-metrics__tile--link { color: #FDFDFD; background: linear-gradient(135deg, rgba(69, 148, 209, 0.35), rgba(69, 148, 209, 0.05)); border-right: 0; }
/* Products: lit plinths on the dark floor */
.shelly-design-a.vs-home .vs-products { background: #0B1419; }
.shelly-design-a.vs-home .vs-pill { color: rgba(253, 253, 253, 0.62); border-color: rgba(253, 253, 253, 0.18); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.shelly-design-a.vs-home .vs-pill.is-active { color: #FDFDFD; background: transparent; border-color: #4594D1; }
.shelly-design-a.vs-home .vs-card__media { background: radial-gradient(70% 70% at 50% 40%, #FFFFFF 0%, #DCE3E9 100%); }
.shelly-design-a.vs-home .vs-card__badge { border-radius: 0; background: #070808; color: #9CDBF6; border-color: #070808; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
.shelly-design-a.vs-home .vs-card__name { font-weight: 300; }
.shelly-design-a.vs-home .vs-card__price { color: rgba(253, 253, 253, 0.62); }
.shelly-design-a.vs-home .vs-card__pills li { background: transparent; border: 1px solid rgba(253, 253, 253, 0.16); color: rgba(253, 253, 253, 0.7); }
/* Why + film */
.shelly-design-a.vs-home .vs-why { background: #070808; padding-top: 96px; }
.shelly-design-a.vs-home .sc-video { background: #070808; }
.shelly-design-a.vs-home .sc-video__frame { border-radius: 0; outline: 1px solid rgba(253, 253, 253, 0.14); outline-offset: 10px; }
/* App + features */
.shelly-design-a.vs-home .sc-app { background: #0B1419; }
.shelly-design-a.vs-home .sc-app__title { font-weight: 200; color: #FDFDFD; letter-spacing: -0.02em; }
.shelly-design-a.vs-home .sc-app__lead { color: rgba(253, 253, 253, 0.68); }
.shelly-design-a.vs-home .sc-app .vs-grad { color: #9CDBF6; }
.shelly-design-a.vs-home .sc-features { background: #070808; border-top: 1px solid rgba(253, 253, 253, 0.1); border-bottom: 1px solid rgba(253, 253, 253, 0.1); }
.shelly-design-a.vs-home .sc-features__grid { gap: 0; }
.shelly-design-a.vs-home .sc-feature { padding: 8px 28px 8px 0; border-right: 1px solid rgba(253, 253, 253, 0.1); margin-right: 28px; }
.shelly-design-a.vs-home .sc-feature:last-child { border-right: 0; }
.shelly-design-a.vs-home .sc-feature h3 { font-weight: 300; color: #FDFDFD; }
.shelly-design-a.vs-home .sc-feature p { color: rgba(253, 253, 253, 0.62); }
.shelly-design-a.vs-home .sc-feature img { filter: brightness(0) invert(1); opacity: 0.85; }
/* Solutions accordion */
.shelly-design-a.vs-home .vs-solutions { background: #0B1419; }
.shelly-design-a.vs-home .vs-solutions__row { gap: 2px; }
.shelly-design-a.vs-home .vs-solution__body h3 { font-weight: 300; }
/* Journey + compatibility */
.shelly-design-a.vs-home .sc-journey { background: #0B1419; color: #FDFDFD; }
.shelly-design-a.vs-home .sc-journey__card { border-radius: 0; }
.shelly-design-a.vs-home .sc-journey__title { font-weight: 300; }
.shelly-design-a.vs-home .sc-journey__arrow { border-radius: 0; }
.shelly-design-a.vs-home .vs-compat { background: #0B1419; }
.shelly-design-a.vs-home .vs-compat__copy .vs-h2 { font-weight: 200 !important; }
.shelly-design-a.vs-home .vs-compat__tiles li { background: rgba(11, 20, 25, 0.78); color: #FDFDFD; border: 1px solid rgba(253, 253, 253, 0.18); backdrop-filter: blur(8px); }
.shelly-design-a.vs-home .vs-compat__mark { border-radius: 0; }
@media (max-width: 989px) {
	.shelly-design-a.vs-home .vs-metrics__tile { border-bottom: 1px solid rgba(253, 253, 253, 0.14); }
	.shelly-design-a.vs-home .sc-feature { border-right: 0; margin-right: 0; padding-right: 0; }
}
/* Planner: the night room with a lit configurator panel */
.shelly-design-a.vs-home .shelly-builder { background: radial-gradient(ellipse 50% 40% at 10% 0%, rgba(69, 148, 209, 0.22) 0%, rgba(69, 148, 209, 0) 65%), radial-gradient(ellipse 50% 50% at 95% 100%, rgba(69, 148, 209, 0.16) 0%, rgba(69, 148, 209, 0) 65%), #0B1419; }
.shelly-design-a.vs-home .shelly-builder__head h2 { color: #FDFDFD; font-weight: 200; letter-spacing: -0.02em; }
.shelly-design-a.vs-home .shelly-builder__lead, .shelly-design-a.vs-home .shelly-builder__trust li { color: rgba(253, 253, 253, 0.68); }
.shelly-design-a.vs-home .shelly-builder__app { border-radius: 0; }