/* =====================================================================
   builditup — brand reskin over the saasoX template.
   Loaded AFTER style.css. Remaps the theme palette to builditup
   (black + violet→cyan) and swaps in Hebrew-capable fonts.
   The DESIGN of the template is untouched — only colours, fonts, RTL.
   ===================================================================== */

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

:root {
  /* Dark sections / header / footer: forest-green → builditup black */
  --accent-color: #07070f;

  /* Primary accent: purple → builditup violet */
  --theme-color-2: #8b5cf6;

  /* Secondary accents (were yellow / orange / bright-green) → cyan */
  --theme-color-3: #22d3ee;
  --theme-color-5: #22d3ee;
  --green-color: #22d3ee;

  /* Light tint bands / soft buttons (were mint green) → soft violet */
  --theme-color-1: #efeaff;
  --theme-color-4: #ece7ff;

  /* Hebrew-capable geometric fonts (match Sora / DM Sans feel) */
  --heading-font: "Rubik", "Heebo", sans-serif;
  --body-font: "Heebo", "Assistant", sans-serif;
}

/* ---- Primary gradient button: pink→purple  →  violet→cyan ---- */
.cs_btn.cs_style_1.cs_bg_1 {
  background: linear-gradient(245deg, #22d3ee -67.04%, #7c3aed 129.05%);
}
.cs_btn.cs_style_1:hover.cs_bg_1 {
  background: linear-gradient(245deg, #7c3aed -77.04%, #22d3ee 119.05%);
}

/* Any leftover hardcoded brand gradients in the theme → violet→cyan */
.cs_gray_bg_3::before {
  background: linear-gradient(270deg, #8b5cf6 0%, #22d3ee 100%) !important;
}
.cs_gray_bg_5 { background-color: #22d3ee !important; }

/* Icon accents / dots that were bright green */
.cs_accent_color_2, .cs_green_color { color: #22d3ee !important; }

/* Keep Hebrew readable — the theme uppercases button labels, which is a
   no-op in Hebrew, but tighten letter-spacing so it looks intentional. */
.text-uppercase { letter-spacing: 0 !important; }

/* Subtle: make the odometer/counter numbers use the display font */
.odometer, .cs_hero_title, .cs_section_title { font-family: var(--heading-font); }

/* builditup logo (wide PNG has transparent padding — size by height) */
.cs_site_branding img,
img[src*="builditup-logo"] { height: 62px; width: auto; max-width: 240px; }
.cs_footer img[src*="builditup-logo"] { height: 66px; }

/* Counters/odometer: keep numbers + K/+ suffix LTR so they don't reverse in RTL */
.cs_counter_number, .odometer, .cs_funfact .cs_counter_number { direction: ltr; unicode-bidi: isolate; }

/* =====================================================================
   HEADER: even nav spacing + mobile hamburger fix
   ===================================================================== */
/* Even nav gaps in RTL. The theme spaces items with margin-right:30px +
   :last-child{margin-right:0}. In RTL the last item is the LEFT-most, so
   zeroing its margin-right collapsed the "אודות"↔"צור קשר" gap. Re-space
   with margin-left (the correct logical side for RTL) at desktop widths. */
@media (min-width: 1200px) {
  html[dir="rtl"] .cs_nav .cs_nav_list > li { margin-right: 0; margin-left: 34px; }
  html[dir="rtl"] .cs_nav .cs_nav_list > li:last-child { margin-left: 0; }
}

/* Inner pages share home's dark header (cs_type_2). Their breadcrumb hero is
   light, so the header needs a solid dark fill at the top too (the theme only
   fills it once scrolled) — keeps the white logo + nav readable. */
.cs_site_header.cs_biu_solid_header { background-color: #07070f; }
/* The inner-page header ships a white floating "header-shape.svg" bar that
   covers the whole header — hide it so the dark fill (and white logo) show. */
.cs_site_header.cs_biu_solid_header .cs_header_shape { display: none !important; }

@media (max-width: 991px) {
  /* Logo must never cover the hamburger */
  .cs_site_branding img, img[src*="builditup-logo"] { height: 42px !important; max-width: 158px !important; }
  /* RTL: logo is on the RIGHT, so the hamburger must go LEFT (was overlapping the logo) */
  html[dir="rtl"] .cs_nav .cs_menu_toggle { right: auto !important; left: 6px !important; }
  .cs_nav .cs_menu_toggle { z-index: 40; }
  .cs_main_header_in { position: relative; align-items: center; }
  .cs_main_header_right { margin-inline-end: 44px; }        /* clear the hamburger */
  .cs_main_header_right .cs_btn { padding: 11px 18px; font-size: 13px; }
}
@media (max-width: 575px) {
  .cs_main_header_right { display: none; }                  /* CTA lives inside the menu on small screens */
}

/* =====================================================================
   INTERACTIVITY & POLISH (round 2)
   ===================================================================== */

/* Emphasize the hero "מותג-על": bold animated gradient + glow, drop dated box */
.cs_hero.cs_style_3 .cs_has_shape { padding: 0 4px; }
.cs_hero.cs_style_3 .cs_has_shape > img { display: none; }
.cs_hero.cs_style_3 .cs_hero_title .cs_has_shape {
  background: linear-gradient(110deg, #a855f7 0%, #7c3aed 38%, #6366f1 62%, #22d3ee 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 30px rgba(124, 58, 237, 0.4));
  animation: biu-grad-pan 5s linear infinite alternate;
  font-weight: 800;
}
@keyframes biu-grad-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Testimonial: crop the portrait into a clean rounded panel, mirrored for RTL */
.cs_testimonial.cs_style_3 { align-items: stretch; }
.cs_testimonial.cs_style_3 .cs_testimonial_thumbnail {
  flex: none; padding: 0; overflow: hidden; width: 300px; align-self: stretch;
  min-height: 400px; border-radius: 22px 150px 22px 22px;
}
html[dir="rtl"] .cs_testimonial.cs_style_3 .cs_testimonial_thumbnail { border-radius: 150px 22px 22px 22px; }
.cs_testimonial.cs_style_3 .cs_testimonial_thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
html[dir="rtl"] .cs_testimonial.cs_style_3 .cs_testimonial_info { padding-right: 0; padding-left: 60px; }
html[dir="rtl"] .cs_testimonial.cs_style_3 .cs_quote_icon { right: auto; left: 70px; bottom: 40px; }
@media (max-width: 991px) {
  .cs_testimonial.cs_style_3 .cs_testimonial_thumbnail { width: 100%; min-height: 320px; border-radius: 22px; }
  html[dir="rtl"] .cs_testimonial.cs_style_3 .cs_testimonial_info { padding-left: 0; }
}

/* Integration tiles: gentle float + lively hover */
@keyframes biu-tile-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cs_iconbox.cs_style_3 { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s; animation: biu-tile-float 6.5s ease-in-out infinite; }
.cs_iconbox.cs_style_3:nth-child(2n) { animation-delay: -1.6s; }
.cs_iconbox.cs_style_3:nth-child(3n) { animation-delay: -3.4s; }
.cs_iconbox.cs_style_3:nth-child(4n) { animation-delay: -5s; }
.cs_iconbox.cs_style_3:hover { transform: translateY(-9px) scale(1.04); box-shadow: 0 30px 60px -26px rgba(124, 58, 237, 0.5); animation-play-state: paused; }

/* Animated gradient on primary CTAs for life */
.cs_btn.cs_style_1.cs_bg_1 { background-size: 190% 190%; animation: biu-grad-pan 5s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .cs_iconbox.cs_style_3, .cs_btn.cs_style_1.cs_bg_1, .cs_hero.cs_style_3 .cs_hero_title .cs_has_shape { animation: none !important; }
}

/* Branded product screenshots (biu-*.png): frame them as clean floating windows */
img[src*="/biu-editor"], img[src*="/biu-analytics"], img[src*="/biu-crm"],
img[src*="/biu-inbox"], img[src*="/biu-ai"] {
  border-radius: 18px;
  box-shadow: 0 50px 100px -34px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Pricing: hide the irrelevant billing toggle (we show capability tiers, no prices) */
.cs_pricing_control { display: none !important; }
/* "Most popular" badge — bulletproof: a clean centered pill in NORMAL FLOW above the
   card content on ALL screen sizes, so the absolute pill can never overlap the tier
   name (the template pins it position:absolute; top:-10px, which caused the overlap). */
.cs_pricing_table.cs_style_1 .cs_pricing_badge {
  position: static !important;
  transform: none !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  display: block; width: -moz-fit-content; width: fit-content; max-width: none !important;
  margin: 0 auto 18px !important;
  z-index: 4; white-space: nowrap;
}
/* Give the card room at the top so the in-flow pill sits cleanly above the heading. */
.cs_pricing_table.cs_style_1:has(.cs_pricing_badge) { padding-top: 28px !important; }
.cs_pricing_table.cs_style_1.cs_active { padding-top: 28px !important; }

/* =====================================================================
   RTL — Hebrew reading direction over an LTR template
   ===================================================================== */
html[dir="rtl"] body { direction: rtl; text-align: right; }

/* Bootstrap float/whitespace helpers that break in RTL */
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .ms-auto { margin-inline-start: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-inline-end: auto !important; margin-right: 0 !important; }

/* The theme animates button icons with a leftward translate on hover.
   In RTL, arrows should point/slide the other way. */
html[dir="rtl"] .cs_btn.cs_style_1 i { text-shadow: 20px 0 0 currentColor; }
html[dir="rtl"] .cs_btn.cs_style_1:hover i { transform: translateX(-20px); }

/* =====================================================================
   PREMIUM POLISH — lift the template from "clean reskin" to high-end:
   real depth on cards, glow on primary buttons, a luminous hero.
   ===================================================================== */

/* Hide the template's off-brand orange 3D decor shapes — the brand glow replaces them */
.cs_hero.cs_style_3 .cs_hero_shape_1,
.cs_hero.cs_style_3 .cs_hero_shape_2 { display: none !important; }

/* Luminous violet→cyan glow blooming behind the hero content */
.cs_hero.cs_style_3 .cs_hero_content { position: relative; overflow: hidden; }
.cs_hero.cs_style_3 .cs_hero_content::after {
  content: "";
  position: absolute;
  inset-inline-start: -8%;
  top: 18%;
  width: 62%;
  height: 80%;
  background:
    radial-gradient(42% 46% at 40% 40%, rgba(124, 58, 237, 0.28), transparent 62%),
    radial-gradient(40% 40% at 65% 65%, rgba(34, 211, 238, 0.2), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.cs_hero.cs_style_3 .cs_hero_text,
.cs_hero.cs_style_3 .cs_hero_thumbnail { position: relative; z-index: 1; }

/* Depth + hover-lift on the main card families */
.cs_iconbox.cs_style_4,
.cs_pricing.cs_style_1,
.cs_post.cs_style_1,
.cs_card.cs_style_1,
.cs_review.cs_style_1 {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
}
.cs_iconbox.cs_style_4:hover,
.cs_pricing.cs_style_1:hover,
.cs_post.cs_style_1:hover,
.cs_card.cs_style_1:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px -34px rgba(124, 58, 237, 0.5);
}

/* Primary gradient buttons: add a soft brand glow */
.cs_btn.cs_style_1.cs_bg_1 {
  box-shadow: 0 16px 40px -14px rgba(124, 58, 237, 0.6);
}
.cs_btn.cs_style_1.cs_bg_1:hover {
  box-shadow: 0 22px 52px -14px rgba(34, 211, 238, 0.55);
}

/* Section eyebrows: refined pill with subtle glow */
.cs_section_subtitle, .cs_hero_subtitle {
  box-shadow: 0 8px 24px -14px rgba(124, 58, 237, 0.5);
}

/* Dark sections: add an inner top highlight so they feel dimensional, not flat */
.cs_accent_bg, [class*="cs_gray_bg"] { position: relative; }

/* Breadcrumb: Bootstrap floats the "/" separator LEFT and pads items left —
   both wrong in RTL (the "/" lands on the far side and the items collapse
   together). Float it right and re-pad on the correct logical sides. */
html[dir="rtl"] .cs_page_heading .breadcrumb { direction: rtl; }
html[dir="rtl"] .cs_page_heading .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
html[dir="rtl"] .cs_page_heading .breadcrumb-item + .breadcrumb-item::before {
  float: right; padding-right: 12px; padding-left: 12px;
}

/* Flip the arrow glyphs (fontawesome long arrows) so they point RTL */
html[dir="rtl"] .cs_btn_icon i,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-right-long { transform: scaleX(-1); }

/* ---- Hero (cs_style_3): the tablet is absolutely pinned right in LTR;
   under RTL the text is on the right too, so pin the tablet left. ---- */
html[dir="rtl"] .cs_hero.cs_style_3 .cs_hero_thumbnail { right: auto; left: 0; }
html[dir="rtl"] .cs_hero.cs_style_3 .cs_has_shape img { left: auto; right: 0; }
@media (min-width: 1600px) {
  html[dir="rtl"] .cs_hero.cs_style_3 .cs_hero_text { transform: translateX(100px); }
}
html[dir="rtl"] .cs_hero.cs_style_3 .cs_hero_shape_1 { left: auto; right: 55%; }
html[dir="rtl"] .cs_hero.cs_style_3 .cs_hero_shape_2 { left: auto; right: 5%; }

/* =====================================================================
   ROUND-3 POLISH: typography, seamless marquee, mobile finishing
   ===================================================================== */

/* ---- Typography: larger, more comfortable, premium ---- */
.cs_hero.cs_style_3 .cs_hero_desc { font-size: 20px; line-height: 1.75; max-width: 46ch; }
.cs_hero.cs_style_3 .cs_hero_title { line-height: 1.12; letter-spacing: -0.01em; }
.cs_section_heading .cs_section_subtitle,
.cs_hero_subtitle { font-size: 19px; letter-spacing: .01em; }
.cs_card_desc,
.cs_section_heading > p,
.cs_iconbox_info p,
.cs_iconbox p,
.cs_pricing_feature_list li,
.cs_post_subtitle { font-size: 16.5px; line-height: 1.72; }
.cs_iconbox_info h3, .cs_iconbox h3.cs_fs_18 { font-size: 19px; }
/* Counter / funfact labels read too small in the stats band */
.cs_funfact .cs_funfact_subtitle,
.cs_funfact_subtitle,
.cs_iconbox.cs_style_6 .cs_iconbox_subtitle,
[class*="funfact"] .cs_body_color { font-size: 16px; }

/* Eyebrow star: sit as a crisp, intentional accent next to the label */
.cs_section_subtitle img,
.cs_hero_subtitle img,
.cs_brand_title img { width: 18px; height: 18px; vertical-align: -3px; }

/* ---- Brand marquee: ONE seamless infinite loop (was leaving a long gap) ----
   Animate the track (two identical lists) by exactly one list-width. */
.cs_horizontal_slider_wrapper .cs_slider_in {
  width: max-content;
  min-width: 100%;
  animation: biu-marquee 34s linear infinite;
}
.cs_horizontal_slider_wrapper .cs_brands_list { animation: none; min-width: 0; }
.cs_horizontal_slider_wrapper:hover .cs_slider_in { animation-play-state: paused; }
@keyframes biu-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Real client-logo chips (from sites we built) */
.cs_horizontal_slider_wrapper .cs_brands_list { gap: 34px; margin: 0 17px; }
.cs_brands_list img[src*="/clients/"] { height: 52px; width: auto; filter: drop-shadow(0 9px 20px rgba(7, 7, 15, 0.16)); transition: transform 0.3s ease; }
.cs_brands_list .cs_center:hover img[src*="/clients/"] { transform: translateY(-3px); }
@media (max-width: 575px) { .cs_brands_list img[src*="/clients/"] { height: 42px; } }
@media (max-width: 575px) {
  .cs_horizontal_slider_wrapper .cs_brands_list { gap: 46px; margin: 0 23px; }
  .cs_horizontal_slider_wrapper .cs_brands_list img { max-height: 30px; width: auto; }
}

/* ---- Benefits card: heading/content BEFORE the image on mobile + centered ---- */
@media (max-width: 991px) {
  .cs_card.cs_style_1.cs_type_2 .row { flex-direction: column-reverse; }
  .cs_card.cs_style_1.cs_type_2 .cs_card_content { text-align: center; }
  .cs_card.cs_style_1.cs_type_2 .cs_section_heading { align-items: center; }
  .cs_card.cs_style_1.cs_type_2 .cs_card_desc { margin-inline: auto; }
  .cs_card.cs_style_1.cs_type_2 .cs_iconbox.cs_style_5 { flex-direction: column; align-items: center; text-align: center; }
}

/* (Pricing badge is now handled globally near the top — a static centered pill on
   all breakpoints — so the old mobile-only override was removed to avoid duplication.) */

/* ---- Header account / login widget (mirrors the app Navbar dropdown) ---- */
.cs_main_header_right { gap: 14px; }
.cs_biu_account { position: relative; display: inline-flex; }
.cs_biu_account_btn {
  /* Sized to MATCH the primary CTA (.cs_btn.cs_style_1: padding 21px 30px, 14px, radius 100px,
     line-height 1em) so the login control and "נתחיל לבנות" read as a balanced pair. */
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 21px 26px; border-radius: 100px; line-height: 1em;
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06);
  color: #fff; font-family: var(--heading-font); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: background 0.25s, border-color 0.25s;
}
/* Logged-in avatar chip: circular initial + name, same height as the CTA */
.cs_biu_account_avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(245deg, #22d3ee, #7c3aed); color: #fff;
  font-family: var(--heading-font); font-weight: 700; font-size: 12.5px; line-height: 1;
}
.cs_biu_account_name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs_biu_account_btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.42); }
.cs_biu_account_btn svg { transition: transform 0.25s; }
.cs_biu_account.is-open .cs_biu_account_btn svg { transform: rotate(180deg); }
.cs_biu_account_menu {
  position: absolute; top: calc(100% + 12px); inset-inline-start: 0;
  min-width: 200px; padding: 8px; border-radius: 18px; background: #fff;
  box-shadow: 0 28px 70px -30px rgba(7, 7, 15, 0.55), 0 0 0 1px rgba(7, 7, 15, 0.05);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 60;
}
.cs_biu_account.is-open .cs_biu_account_menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cs_biu_account_menu a,
.cs_biu_account_menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 14px; border-radius: 12px;
  color: #171334; font-family: var(--heading-font); font-weight: 600; font-size: 15px; line-height: 1.2;
  text-align: inherit; background: transparent; border: 0; cursor: pointer;
  text-decoration: none; transition: background 0.18s, color 0.18s;
}
.cs_biu_account_menu a:hover,
.cs_biu_account_menu button:hover { background: #f3f0ff; color: #7c3aed; }
.cs_biu_account_menu [hidden] { display: none !important; }
/* Sign-out is a subtle destructive action */
.cs_biu_account_menu .cs_biu_signout { color: #d64550; }
.cs_biu_account_menu .cs_biu_signout:hover { background: #fdecec; color: #d64550; }
/* While auth is resolving, dim the label so it doesn't flash the wrong state jarringly */
.cs_biu_account[data-auth-state="loading"] .cs_biu_account_btn { opacity: 0.9; }

/* Mobile: the header pill is hidden < 991px; login lives inside the slide-in menu instead. */
@media (max-width: 991px) { .cs_biu_account { display: none; } }
/* Mobile in-menu auth entry (injected by builditup.js into .cs_nav_list).
   Hidden on the desktop horizontal nav; shown only inside the mobile slide-in menu. */
.cs_biu_mobile_auth { display: none; margin-top: 6px; border-top: 1px solid rgba(23, 19, 52, 0.1); padding-top: 6px; }
@media (max-width: 991px) { .cs_biu_mobile_auth { display: block; } }
.cs_biu_mobile_auth > a,
.cs_biu_mobile_auth > button {
  display: flex !important; align-items: center; gap: 10px; width: 100%;
  font-family: var(--heading-font); font-weight: 700; background: transparent; border: 0; cursor: pointer;
}
.cs_biu_mobile_auth .cs_biu_mobile_avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(245deg, #22d3ee, #7c3aed); color: #fff; font-size: 12.5px; font-weight: 700;
}
.cs_biu_mobile_auth .cs_biu_signout { color: #d64550; }
.cs_biu_mobile_auth [hidden] { display: none !important; }

/* ---- Customer reviews: honest trust row + real reviewer identities
   (replaced the inaccurate review-platform logos). ---- */
/* Brand the star glyphs violet→cyan instead of the template orange. */
.cs_customer_review .cs_rating,
.cs_customer_review .cs_rating .cs_rating_percentage { color: #a78bfa; }
.cs_customer_review .cs_rating_percentage::before {
  background: linear-gradient(245deg, #22d3ee, #a855f7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cs_biu_trust { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cs_biu_trust_avatars { display: inline-flex; direction: ltr; }
.cs_biu_trust_avatars img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85); margin-inline-start: -12px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.cs_biu_trust_avatars img:first-child { margin-inline-start: 0; }
.cs_biu_trust_text { text-align: start; }
.cs_biu_trust_stars { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cs_biu_trust_score { color: #fff; font-family: var(--heading-font); font-weight: 700; font-size: 20px; line-height: 1; }
.cs_biu_trust_text p { font-size: 15px; opacity: 0.92; }
/* Reviewer identity inside each quote card (replaces the platform logo) */
.cs_biu_review_person { display: inline-flex; align-items: center; gap: 12px; }
.cs_biu_review_person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); }
.cs_biu_review_meta { text-align: start; display: flex; flex-direction: column; gap: 2px; }
.cs_biu_review_meta b { font-family: var(--heading-font); font-weight: 600; font-size: 16px; line-height: 1.2; }
.cs_biu_review_meta span { color: rgba(255, 255, 255, 0.65); font-size: 13.5px; line-height: 1.2; }
@media (max-width: 575px) {
  .cs_biu_trust { gap: 14px; }
  .cs_biu_trust_avatars img { width: 40px; height: 40px; }
}

/* ---- Lead forms: honeypot, consent, result states, assurance, home card ---- */
.cs_hp_field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs_consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.55; }
.cs_consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: #7c3aed; flex: none; }
.cs_result { display: none; margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.cs_result_pending { background: #f3f0ff; color: #6d28d9; display: block; }
.cs_result_ok { background: #e7fbf3; color: #0f9d6b; display: block; }
.cs_result_err { background: #fdecec; color: #d64550; display: block; }

/* Contact reassurance points (replaced the fake video) */
.cs_contact_points { display: flex; flex-direction: column; gap: 15px; margin-top: 32px; list-style: none; padding: 0; }
.cs_contact_points li { display: flex; align-items: center; gap: 13px; font-size: 17px; font-weight: 500; }
.cs_contact_point_ic { flex: none; width: 30px; height: 30px; font-size: 12px; color: #fff; background: linear-gradient(245deg, #22d3ee, #7c3aed); }

/* Home contact form card */
.cs_home_form_card { background: #fff; padding: 40px; box-shadow: 0 40px 90px -46px rgba(7, 7, 15, 0.4), 0 0 0 1px rgba(7, 7, 15, 0.04); }
@media (max-width: 575px) { .cs_home_form_card { padding: 26px 20px; } }

/* ---- Hero guided-tour caption + progress dots over the product shot ---- */
.cs_hero.cs_style_3 .cs_hero_thumbnail { position: relative; }
.cs_hero_caption {
  position: absolute; inset-inline-start: 16px; top: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 50px;
  background: rgba(7, 7, 15, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); max-width: calc(100% - 32px);
}
.cs_hero_caption_dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(245deg, #22d3ee, #7c3aed); animation: biu-pulse 1.8s ease-in-out infinite; }
@keyframes biu-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28); } 50% { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0.12); } }
.cs_hero_caption_text { color: #fff; font-family: var(--heading-font); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease; }
.cs_hero_dots { position: absolute; inset-inline-start: 18px; top: 68px; z-index: 3; display: flex; gap: 7px; }
.cs_hero_dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: all 0.35s ease; }
.cs_hero_dots span.is-active { width: 22px; border-radius: 4px; background: linear-gradient(245deg, #22d3ee, #7c3aed); }
@media (max-width: 575px) {
  .cs_hero_caption { top: 12px; padding: 7px 13px; }
  .cs_hero_caption_text { font-size: 13px; }
  .cs_hero_dots { top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cs_hero_caption_dot { animation: none; } }

/* =====================================================================
   HERO — real client-site screenshots framed as browser windows
   (replaces the old animated fake dashboard). A single pre-composed PNG
   of 2-3 layered site mockups + two honest floating pills over it.
   ===================================================================== */
.cs_biu_showcase { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; }
.cs_biu_showcase > img {
  display: block; width: 100%; height: auto; max-width: 100%;
  filter: drop-shadow(0 44px 90px rgba(9, 7, 25, 0.42));
}
/* The image column is col-lg-5 (narrow); on large screens let the wide layered
   mockups grow a touch and pull toward the page edge, without ever overflowing off
   screen. Works in RTL (image column sits on the LEFT) via a safe left pull. */
@media (min-width: 1200px) {
  .cs_biu_showcase { width: 128%; max-width: 640px; margin-inline-end: auto; }
}

/* Floating honest pills over the showcase (reuse the premium pill look) */
.cs_biu_float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 50px; background: rgba(255, 255, 255, 0.96); color: #171334; font: 700 13px/1 var(--heading-font); box-shadow: 0 20px 44px -18px rgba(9, 7, 25, 0.6); white-space: nowrap; }
.cs_biu_float_ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(245deg, #22d3ee, #7c3aed); color: #fff; font-size: 11px; }
.cs_biu_float_1 { inset-inline-end: 2%; top: 14%; animation: biu-tile-float 5.5s ease-in-out infinite; }
.cs_biu_float_2 { inset-inline-start: 4%; bottom: 12%; animation: biu-tile-float 6.5s ease-in-out infinite -2s; }
@media (max-width: 1199px) { .cs_biu_float { display: none; } }
@media (prefers-reduced-motion: reduce) { .cs_biu_float { animation: none; } }