/* ============================================================
styles-new.css — CBS Site unified stylesheet
Structure: GLOBAL → HEBREW (html[lang="he"]) → ENGLISH (html[lang="en"])
NO anywhere in this file.
============================================================ */
/* ===== GLOBAL ===== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@400;500;600;700;800&display=swap');
@font-face {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
font-family: 'Inter';
font-display: swap;
src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
scroll-behavior: auto;
}
}
/* Animation keyframes — global */
@keyframes bk-gp {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
@keyframes bk-ring {
0% { r: 20; opacity: .55; }
100% { r: 62; opacity: 0; }
}
@keyframes bk-pp {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes scroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes scrollMobile {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translate3d(0, 30px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Animation helper classes — global (used by both pages) */
.bk-pd { opacity: 0; }
.bk-ggl { animation: bk-gp 2.8s ease-in-out infinite; }
.bk-rng1 { animation: bk-ring 2.2s ease-out infinite; }
.bk-rng2 { animation: bk-ring 2.2s ease-out 1.1s infinite; }
.bk-pill { animation: bk-pp 2.8s ease-in-out infinite; transform-origin: 340px 130px; }
@media (prefers-reduced-motion: reduce) {
.bk-pd, .bk-ggl, .bk-rng1, .bk-rng2, .bk-pill { animation: none; }
}
/* Carousel global */
.clients-carousel {
margin-top: 2rem;
position: relative;
overflow: hidden;
width: 100%;
height: 120px;
}
.carousel-container {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 100%;
}
.carousel-track {
display: flex;
animation: scroll 20s linear infinite;
gap: 30px;
width: 400%;
height: 100%;
align-items: center;
}
.carousel-item {
min-width: 150px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border-radius: 12px;
box-shadow: none;
transition: transform 0.3s ease;
flex-shrink: 0;
cursor: pointer;
}
.carousel-item:hover {
transform: scale(1.05) translateY(-5px);
box-shadow: none;
}
.carousel-logo {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: transform 0.3s ease;
}
.carousel-item:hover .carousel-logo {
transform: scale(1.02);
}
.carousel-track:hover {
animation-play-state: paused;
}
html[dir="rtl"] .carousel-track {
direction: ltr;
}
@media (max-width: 768px) {
.clients-carousel { height: 100px; margin-top: 1.5rem; }
.carousel-item { min-width: 80px; height: 70px; }
.carousel-track { animation: scrollMobile 15s linear infinite; gap: 20px; width: 800%; }
}
@media (max-width: 480px) {
.clients-carousel { height: 90px; }
.carousel-item { min-width: 60px; height: 60px; }
.carousel-track { animation: scrollMobile 12s linear infinite; gap: 15px; width: 800%; }
}
@media (prefers-reduced-motion: reduce) {
.carousel-track { animation: none; }
.carousel-item { transition: none; }
}
/* Footer menu RTL — shared by both languages via dir attribute */
html[lang="he"] .footer-menu,
html[dir="rtl"] .footer-menu {
direction: rtl;
width: max-content;
margin-right: 0;
margin-left: auto;
justify-self: end;
align-items: flex-end;
text-align: right;
}
html[lang="he"] .footer-menu li,
html[dir="rtl"] .footer-menu li,
html[lang="he"] .footer-menu .footer-link,
html[dir="rtl"] .footer-menu .footer-link {
width: 100%;
display: block;
text-align: right;
}
@media (max-width: 768px) {
html[lang="he"] .footer-menu,
html[dir="rtl"] .footer-menu {
align-items: center;
text-align: center;
}
html[lang="he"] .footer-menu li,
html[dir="rtl"] .footer-menu li,
html[lang="he"] .footer-menu .footer-link,
html[dir="rtl"] .footer-menu .footer-link {
text-align: center;
}
}
/* bdi utility */
bdi { unicode-bidi: isolate; }
/* ===== HEBREW ===== */
html[lang="he"] .skip-link {
position: absolute;
top: -44px;
right: 1rem;
background: #000;
color: #fff;
padding: .5rem .75rem;
border-radius: 4px;
z-index: 2000;
}
html[lang="he"] .skip-link:focus {
top: .5rem;
}
/* Root variables */
html[lang="he"] {
--black: #1a1a1a;
--text: #111827;
--muted: #6b7280;
--muted-strong: #4b5563;
--line: #e5e7eb;
--soft: #f8fafc;
--blue: #2563eb;
--red: #C62828;
--red-dark: #B71C1C;
--green: #16a34a;
--container: 1200px;
--reading: 960px;
--rail: 1000px;
--cbs-page-rail: 1000px;
--cbs-page-pad: 1.25rem;
}
html[lang="he"] *,
html[lang="he"] *::before,
html[lang="he"] *::after {
box-sizing: border-box;
}
html[lang="he"],
html[lang="he"] body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}
html[lang="he"] body {
font-family: "IBM Plex Sans Hebrew", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
color: var(--text);
background: #fff;
line-height: 1.6;
overflow-x: hidden;
text-align: right;
}
html[lang="he"] img,
html[lang="he"] video {
max-width: 100%;
}
html[lang="he"] a {
color: inherit;
}
/* Header */
html[lang="he"] .header {
position: sticky;
top: 0;
z-index: 1000;
height: 84px;
background: var(--black);
color: #fff;
}
html[lang="he"] .nav-container {
width: min(100%, var(--container));
height: 84px;
margin-inline: auto;
padding-inline: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
html[lang="he"] .logo {
direction: ltr;
text-decoration: none;
color: #fff;
font-weight: 800;
font-size: 1.5rem;
line-height: 1.05;
white-space: nowrap;
letter-spacing: 0;
}
html[lang="he"] .logo .cbs {
color: var(--blue);
}
html[lang="he"] .nav-menu {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin: 0;
padding: 0;
list-style: none;
}
html[lang="he"] .nav-link {
text-decoration: none;
color: #fff;
font-weight: 700;
font-size: 1rem;
line-height: 1;
transition: color .2s ease;
}
html[lang="he"] .nav-link:hover,
html[lang="he"] .nav-link.active {
color: #ff6b6b;
}
html[lang="he"] .nav-actions {
display: flex;
align-items: center;
gap: .75rem;
height: 28px;
direction: ltr;
}
html[lang="he"] .language-selector {
height: 20px;
display: inline-flex;
align-items: center;
gap: .45rem;
padding: 0;
color: #fff;
text-decoration: none;
font-weight: 700;
line-height: 1;
background: transparent;
border: none;
cursor: pointer;
font-size: inherit;
font-family: inherit;
}
html[lang="he"] .language-selector svg {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
html[lang="he"] .hamburger-menu {
display: none;
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
flex-direction: column;
justify-content: space-around;
}
html[lang="he"] .hamburger-line {
display: block;
width: 28px;
height: 3px;
background: #fff;
}
html[lang="he"] .nav-menu.mobile-open {
display: flex;
position: fixed;
top: 72px;
left: 50%;
right: auto;
transform: translateX(-50%);
width: 90%;
max-width: 520px;
height: auto;
max-height: 70vh;
overflow: auto;
background: rgba(26, 26, 26, 0.85);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
z-index: 1000;
padding: 1.25rem;
border-radius: 12px;
}
html[lang="he"] .nav-menu.mobile-open .nav-link {
font-size: 1.25rem;
padding: 0.75rem 1rem;
text-align: center;
width: 100%;
}
@media (max-width: 1023px) {
html[lang="he"] .header .nav-container,
html[lang="he"] .nav-container {
padding: 0 1rem;
gap: 0.75rem;
width: 100%;
max-width: 100%;
overflow: hidden;
}
html[lang="he"] .header .logo,
html[lang="he"] .logo {
min-width: 0;
max-width: 58vw;
overflow: hidden;
text-overflow: clip;
font-size: 0.9rem;
}
html[lang="he"] .header .nav-actions,
html[lang="he"] .nav-actions {
flex-shrink: 0;
gap: 0.5rem;
}
html[lang="he"] .header .language-selector,
html[lang="he"] .language-selector {
padding: 0.35rem 0.45rem;
}
html[lang="he"] .header .nav-menu,
html[lang="he"] .nav-menu {
display: none;
}
html[lang="he"] .header .nav-menu.mobile-open,
html[lang="he"] .nav-menu.mobile-open {
display: flex;
}
html[lang="he"] .header .hamburger-menu,
html[lang="he"] .hamburger-menu {
display: flex;
}
}
@media (min-width: 700px) and (max-width: 1023px) {
html[lang="he"] .header .logo,
html[lang="he"] .logo {
max-width: 70vw;
font-size: 1.35rem;
}
}
@media (max-width: 480px) {
html[lang="he"] .header .nav-container {
min-height: 62px;
}
html[lang="he"] .header .logo {
max-width: 24vw;
font-size: 0;
line-height: 1;
letter-spacing: 0.02em;
white-space: nowrap;
}
html[lang="he"] .header .logo .cbs {
font-size: 1.45rem;
}
}
@media (hover: none) and (pointer: coarse) {
html[lang="he"] .header .nav-menu,
html[lang="he"] .nav-menu {
display: none;
}
html[lang="he"] .header .nav-menu.mobile-open,
html[lang="he"] .nav-menu.mobile-open {
display: flex;
}
html[lang="he"] .header .hamburger-menu,
html[lang="he"] .hamburger-menu {
display: flex;
}
html[lang="he"] .header .nav-container {
gap: 0.75rem;
overflow: hidden;
}
}
@media (min-width: 768px) {
html[lang="he"] .header {
height: 70px;
min-height: 70px;
padding: 0;
}
html[lang="he"] .header .nav-container {
height: 70px;
min-height: 70px;
align-items: center;
}
}
/* Buttons */
html[lang="he"] .btn {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.65rem;
border-radius: 8px;
text-decoration: none;
font-size: 1rem;
font-weight: 800;
line-height: 1;
border: 1px solid transparent;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
html[lang="he"] .btn-primary {
background: var(--red);
color: #fff;
}
html[lang="he"] .btn-primary:hover {
background: var(--red-dark);
}
html[lang="he"] .btn-secondary {
background: #fff;
color: var(--text);
border-color: #d9dee7;
}
html[lang="he"] .btn-secondary:hover {
border-color: #b9c0cf;
}
html[lang="he"] .btn.btn-primary,
html[lang="he"] .hero .btn.btn-primary,
html[lang="he"] .results-cta .btn.btn-primary,
html[lang="he"] .final-cta .btn.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
border-radius: 10px;
font-weight: 700;
font-size: 1rem;
background: #C62828;
color: #ffffff;
border: 1px solid #C62828;
text-decoration: none;
width: auto;
max-width: none;
box-shadow: none;
}
html[lang="he"] .btn.btn-primary:hover,
html[lang="he"] .hero .btn.btn-primary:hover,
html[lang="he"] .results-cta .btn.btn-primary:hover,
html[lang="he"] .final-cta .btn.btn-primary:hover {
background: #B71C1C;
border-color: #B71C1C;
transform: translateY(-1px);
}
html[lang="he"] .btn-hero-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
border-radius: 10px;
font-weight: 700;
font-size: 1rem;
background: transparent;
color: #C62828;
border: 1px solid #C62828;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
html[lang="he"] .btn-hero-secondary:hover {
background: #FEF2F2;
border-color: #B71C1C;
color: #B71C1C;
transform: translateY(-1px);
}
/* Hero */
html[lang="he"] .hero {
background: #fff;
padding: 2rem 0 1.5rem;
}
html[lang="he"] .hero .hero-container,
html[lang="he"] .hero-content {
width: min(100%, var(--rail));
margin-inline: auto;
text-align: center;
}
html[lang="he"] .hero-title {
margin: 0 0 1.4rem;
color: var(--text);
font-size: clamp(2.75rem, 3.9vw, 4.1rem);
line-height: 1.12;
font-weight: 800;
letter-spacing: 0;
}
html[lang="he"] .hero-description {
margin: 0 0 1.2rem;
max-width: 760px;
color: var(--text);
font-size: 1.08rem;
line-height: 1.75;
font-weight: 600;
}
html[lang="he"] .hero-subheadline-normal {
display: block;
margin-top: 0.75rem;
color: #c82121;
font-size: 1.25rem;
line-height: 1.35;
font-weight: 800;
text-wrap: balance;
}
html[lang="he"] .hero-buttons {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
margin-top: 1.05rem;
}
html[lang="he"] .hero-bg-anim {
position: absolute;
left: 0;
right: auto;
top: 50%;
transform: translateY(-50%);
width: 62%;
pointer-events: none;
z-index: 0;
}
html[lang="he"] .hero-bg-anim svg {
width: 100%;
height: auto;
display: block;
}
html[lang="he"] .hero-text-layer {
position: relative;
z-index: 1;
}
html[lang="he"] .he-hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: min(1080px, calc(100vw - 96px));
max-width: 1080px;
margin-right: 0;
margin-left: auto;
padding: 0 1.5rem;
box-sizing: border-box;
}
/* Hero image */
html[lang="he"] .hero-image {
display: block;
max-width: 504px;
width: 100%;
height: auto;
}
html[lang="he"] .hero-image-img {
width: 100%;
height: auto;
object-fit: contain;
margin: 0;
animation: none;
display: block;
max-width: 504px;
min-height: 0;
}
html[lang="he"] .hero-image-img:hover {
transform: scale(1.05) translateY(-5px);
filter: none;
box-shadow: none;
opacity: 1;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 820px) {
html[lang="he"] .hero {
padding-top: 60px;
overflow: visible;
}
html[lang="he"] .hero-image {
margin-top: -50px;
margin-bottom: -40px;
}
html[lang="he"] .hero-bg-anim {
position: relative;
top: auto;
transform: none;
width: 100%;
margin-top: 1.5rem;
opacity: 0.7;
}
}
@media (max-width: 480px) {
html[lang="he"] .hero-image { max-width: 309px; }
}
@media (min-width: 481px) and (max-width: 1024px) {
html[lang="he"] .hero-image {
max-width: 500px;
margin: -30px auto 0 auto;
display: flex;
justify-content: center;
}
}
/* Hero typography from block ~316 */
html[lang="he"] .hero .hero-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="he"] .hero-content.hero-content--single .hero-text {
justify-self: center;
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
html[lang="he"] .hero-text {
direction: rtl;
text-align: right;
}
html[lang="he"] .hero-stats-strip {
direction: rtl;
margin-top: 0.75rem;
display: flex;
flex-wrap: nowrap;
gap: 0.75rem;
align-items: flex-start;
max-width: 40rem;
}
html[lang="he"] .hero-stats-strip .stat-item {
text-align: right;
}
html[lang="he"] .hero-buttons,
html[lang="he"] .he-hero-cta-row,
html[lang="he"] .hero .hero-text .hero-buttons,
html[lang="he"] .hero .hero-text .he-hero-cta-row,
html[lang="he"] .hero .hero-text .hero-buttons.he-hero-cta-row {
justify-content: flex-start;
direction: rtl;
}
/* Value strip */
html[lang="he"] .value-strip {
background: #fff;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 1rem 0;
}
html[lang="he"] .value-label,
html[lang="he"] .section-kicker {
margin: 0 0 1rem;
color: var(--muted);
font-size: 1rem;
line-height: 1.3;
font-weight: 800;
text-align: right;
}
html[lang="he"] .stats-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
html[lang="he"] .stat-card {
min-height: 102px;
padding: 1rem .75rem;
border: 1px solid #dfe5ec;
border-radius: 10px;
background: var(--soft);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: right;
}
html[lang="he"] .stat-number {
color: var(--text);
font-size: clamp(1.7rem, 3.4vw, 2.45rem);
line-height: 1.1;
font-weight: 800;
direction: rtl;
white-space: nowrap;
text-align: right;
width: 100%;
}
html[lang="he"] .stat-label {
margin-top: .45rem;
color: #374151;
font-size: 1rem;
line-height: 1.25;
font-weight: 700;
}
/* He-value-strip (from he/index.html blocks) */
html[lang="he"] .he-value-strip {
background: #fff;
padding: 1rem 0;
border-bottom: 1px solid #e5e7eb;
}
html[lang="he"] .he-value-strip-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem;
--align-hero-max: 60rem;
--align-strip-max: 48rem;
}
html[lang="he"] .he-value-strip .hero-stats-strip {
box-sizing: border-box;
width: 100%;
max-width: var(--align-strip-max);
margin-left: max(0px, calc((100% - var(--align-hero-max)) / 2 + (var(--align-hero-max) - var(--align-strip-max))));
margin-right: max(0px, calc((100% - var(--align-hero-max)) / 2));
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.55rem;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
html[lang="he"] .he-value-strip .stat-item {
flex: 1 1 0;
min-width: 0;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 11px;
box-shadow: none;
padding: 0.81rem 0.45rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: 0.3rem;
}
html[lang="he"] .he-value-strip .stat-number {
display: block;
font-size: 1.64rem;
line-height: 1;
font-weight: 800;
color: #111827;
letter-spacing: -0.02em;
margin: 0;
min-height: 1em;
white-space: nowrap;
}
html[lang="he"] .he-value-strip .stat-label {
font-weight: 700;
color: #374151;
font-size: 0.81rem;
line-height: 1.35;
margin: 0;
}
html[lang="he"] .he-value-strip .hero-stats-strip .stat-divider {
display: none;
}
html[lang="he"] .he-value-strip-label {
box-sizing: border-box;
max-width: var(--align-strip-max);
margin-left: max(0px, calc((100% - var(--align-hero-max))/2 + (var(--align-hero-max) - var(--align-strip-max))));
margin-right: max(0px, calc((100% - var(--align-hero-max))/2));
margin-top: 0;
margin-bottom: 0.5rem;
text-align: right;
}
/* Real-problem section */
html[lang="he"] .he-real-problem {
background: #f8fafc;
padding-top: 4rem;
padding-bottom: 4rem;
border-top: 0;
}
html[lang="he"] .he-real-problem-inner {
max-width: 62.5rem;
margin: 0 auto;
padding: 0 1.25rem;
}
html[lang="he"] .he-real-problem-label {
text-align: right;
margin: 0 0 0.4rem;
font-size: 0.9rem;
font-weight: 700;
color: #6b7280;
}
html[lang="he"] .he-real-problem h2 {
font-size: clamp(2rem, 3.2vw, 2.5rem);
font-weight: 800;
color: #111827;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 1rem;
text-align: right;
max-width: 850px;
}
html[lang="he"] .he-real-problem-lead {
font-size: 1.06rem;
color: #4b5563;
line-height: 1.85;
margin: 0 0 2.25rem;
text-align: right;
max-width: 52rem;
margin-right: 0;
margin-left: auto;
}
html[lang="he"] .he-real-problem-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
html[lang="he"] .he-real-problem-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 2rem 1.75rem;
text-align: right;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
transition: box-shadow 0.25s ease, transform 0.25s ease;
align-self: stretch;
}
html[lang="he"] .he-real-problem-card:hover {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
transform: translateY(-2px);
}
html[lang="he"] .he-real-problem-card h3 {
font-size: 1rem;
font-weight: 800;
color: #111827;
margin: 0 0 0.45rem;
line-height: 1.35;
}
html[lang="he"] .he-real-problem-card p {
font-size: 0.94rem;
color: #4b5563;
margin: 0;
line-height: 1.65;
}
html[lang="he"] .he-real-problem-fit {
font-size: 0.94rem;
color: #6b7280;
line-height: 1.7;
margin: 0 auto;
text-align: right;
max-width: 48rem;
}
/* Section rhythm */
html[lang="he"] .section {
padding: 4.5rem 0;
}
html[lang="he"] .section-soft {
background: var(--soft);
}
html[lang="he"] .section h2 {
margin: 0 0 1.25rem;
color: var(--text);
font-size: clamp(2.35rem, 4.2vw, 4.25rem);
line-height: 1.15;
font-weight: 900;
letter-spacing: 0;
text-align: center;
}
html[lang="he"] .section-lead {
max-width: 900px;
margin: 0 auto 2.5rem;
color: var(--muted-strong);
font-size: 1.35rem;
line-height: 1.75;
text-align: center;
}
/* Shared section rhythm (from block ~483) */
html[lang="he"] .testimonial,
html[lang="he"] .real-results,
html[lang="he"] .he-logos-static,
html[lang="he"] .about,
html[lang="he"] .solution,
html[lang="he"] .faq,
html[lang="he"] .final-cta {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
@media (max-width: 768px) {
html[lang="he"] .testimonial,
html[lang="he"] .real-results,
html[lang="he"] .he-logos-static,
html[lang="he"] .about,
html[lang="he"] .solution,
html[lang="he"] .faq,
html[lang="he"] .final-cta {
padding-top: 3.25rem;
padding-bottom: 3.25rem;
}
}
html[lang="he"] .testimonial-container,
html[lang="he"] .trusted-by-container,
html[lang="he"] .faq-container,
html[lang="he"] .cta-container {
max-width: 1100px;
margin: 0 auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="he"] .results-container {
max-width: 1120px;
margin: 0 auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="he"] .about-container {
max-width: 1080px;
margin: 0 auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
text-align: center;
}
html[lang="he"] .testimonial h2,
html[lang="he"] .real-results h2,
html[lang="he"] .about h2,
html[lang="he"] .solution h2,
html[lang="he"] .faq h2,
html[lang="he"] .final-cta h2 {
font-size: clamp(2rem, 3vw, 2.5rem);
line-height: 1.15;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 1rem;
}
html[lang="he"] .testimonial h2 { color: #ffffff; }
html[lang="he"] .real-results h2,
html[lang="he"] .about h2,
html[lang="he"] .solution h2,
html[lang="he"] .faq h2 {
color: #111827;
}
/* Section backgrounds */
html[lang="he"] .testimonial { background: #111827; color: #ffffff; }
html[lang="he"] .real-results { background: #ffffff; }
html[lang="he"] .he-logos-static { background: #f8fafc; border-top: 1px solid #e5e7eb; }
html[lang="he"] .about { background: #f8fafc; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
html[lang="he"] .solution { background: #ffffff; }
html[lang="he"] .faq { background: #ffffff; }
html[lang="he"] .final-cta { background: #111827; color: #ffffff; }
html[lang="he"] .final-cta h2 { color: #ffffff; }
html[lang="he"] .final-cta .cta-text { color: #d1d5db; }
/* Cards */
html[lang="he"] .faq-content,
html[lang="he"] .he-logo-cell {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[lang="he"] .result-card {
position: relative;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 20px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
padding: 2rem 1.75rem;
text-align: right;
display: flex;
flex-direction: column;
align-self: stretch;
min-height: 100%;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
html[lang="he"] .result-card:hover {
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}
/* Testimonials */
html[lang="he"] .testimonial-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
align-items: stretch;
}
html[lang="he"] .testimonial-content,
html[lang="he"] .testimonial-content.secondary {
position: relative;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
padding: 2.25rem 1.75rem 1.75rem;
min-height: 220px;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: none;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
html[lang="he"] .testimonial-content.secondary {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-10px);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
html[lang="he"] .testimonial-content:hover,
html[lang="he"] .testimonial-content.secondary:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
html[lang="he"] .testimonial-content.secondary:hover {
transform: translateY(-12px);
}
html[lang="he"] .testimonial-quote {
position: relative;
font-size: 1.12rem;
line-height: 1.9;
font-weight: 500;
letter-spacing: -0.01em;
color: #f3f4f6;
margin: 0 0 1.8rem;
padding-top: 1.6rem;
}
html[lang="he"] .testimonial-quote::before {
content: '"';
position: absolute;
top: -0.2rem;
right: 0;
font-size: 3.2rem;
line-height: 1;
color: rgba(255, 255, 255, 0.22);
font-weight: 800;
}
html[lang="he"] .testimonial-author {
display: flex;
justify-content: center;
align-items: center;
margin-top: auto;
padding-top: 1.1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html[lang="he"] .author-info h3 {
font-size: 1.22rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 0.35rem;
}
html[lang="he"] .author-info p {
font-size: 0.94rem;
color: #d1d5db;
margin: 0;
line-height: 1.6;
}
html[lang="he"] .testimonial-actions {
display: flex;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-top: 3.4rem;
}
html[lang="he"] .testimonial-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
background: #C62828;
color: #ffffff;
border: 1px solid #C62828;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
html[lang="he"] .testimonial-link-btn:hover {
background: #B71C1C;
border-color: #B71C1C;
}
html[lang="he"] .testimonial-link-btn--secondary {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
html[lang="he"] .testimonial-link-btn--secondary:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.55);
}
/* Results */
html[lang="he"] .real-results h2 { text-align: center; }
html[lang="he"] .real-results h2::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
margin: 0.85rem auto 0;
background: #C62828;
}
html[lang="he"] .real-results,
html[lang="he"] .real-results h2,
html[lang="he"] .real-results p,
html[lang="he"] .real-results .metric-label {
font-family: 'IBM Plex Sans Hebrew', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
html[lang="he"] .results-subtitle {
max-width: 580px;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
margin-bottom: 1.9rem;
color: #6b7280;
line-height: 1.7;
text-align: center;
}
html[lang="he"] .about-subtitle {
max-width: 620px;
margin-left: auto;
margin-right: auto;
margin-top: 1.05rem;
margin-bottom: 2.15rem;
color: #6b7280;
line-height: 1.75;
}
html[lang="he"] .results-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
align-items: stretch;
}
html[lang="he"] .company-logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 78px;
margin: 0 0 1.45rem;
background: transparent;
border: 0;
padding: 0;
width: auto;
}
html[lang="he"] .company-logo img,
html[lang="he"] .company-logo-img {
max-width: 312px;
max-height: 78px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(75%);
opacity: 0.86;
transition: filter 0.3s ease, opacity 0.3s ease;
}
html[lang="he"] .company-logo--army .company-logo-img {
max-width: 338px;
max-height: 78px;
filter: grayscale(75%);
opacity: 0.9;
}
html[lang="he"] .result-card:hover .company-logo img,
html[lang="he"] .result-card:hover .company-logo-img {
filter: grayscale(0%);
opacity: 1;
}
html[lang="he"] .result-metrics {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 0;
}
html[lang="he"] .metric {
display: grid;
grid-template-columns: 22px 1fr;
gap: .75rem;
align-items: start;
margin-bottom: 1rem;
color: #374151;
font-size: 1.02rem;
line-height: 1.55;
font-weight: 700;
}
html[lang="he"] .metric:last-child { margin-bottom: 0; }
html[lang="he"] .metric-icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: #dcfce7;
color: var(--green);
display: flex;
align-items: center;
justify-content: center;
margin-top: .15rem;
}
html[lang="he"] .metric-icon svg { width: 12px; height: 12px; }
html[lang="he"] .metric-text {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
word-wrap: break-word;
hyphens: auto;
line-height: 1.4;
}
html[lang="he"] .metric-label {
font-size: 1rem;
color: #111827;
line-height: 1.55;
font-weight: 400;
word-wrap: break-word;
hyphens: auto;
line-height: 1.4;
white-space: normal;
text-align: right;
direction: rtl;
}
html[lang="he"] .result-kpi {
text-align: center;
margin: 0 0 1.15rem;
padding: 0 0 1rem;
border-bottom: 1px solid #d1d5db;
}
html[lang="he"] .result-kpi-value {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.2rem;
margin: 0;
color: #111827;
line-height: 0.95;
font-weight: 800;
direction: ltr;
}
html[lang="he"] .result-kpi-number {
font-size: clamp(2.7rem, 3.8vw, 4.2rem);
letter-spacing: -0.05em;
}
html[lang="he"] .result-kpi-suffix {
font-size: 1.5rem;
color: #C62828;
font-weight: 800;
}
html[lang="he"] .result-kpi-label {
margin: 0.5rem 0 0;
font-size: 0.98rem;
line-height: 1.6;
color: #6b7280;
text-align: center;
}
html[lang="he"] .results-cta,
html[lang="he"] .testimonial-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 2.4rem;
flex-wrap: wrap;
}
/* Each CTA follows its own section's text, as English does. The results section
is right-aligned in Hebrew, so its CTA sits at the right edge — under
dir="rtl" that is flex-start, not flex-end. Testimonials is a centred
section, so its buttons stay centred. */
html[lang="he"] .results-cta {
justify-content: flex-start;
}
html[lang="he"] .testimonial-actions {
justify-content: center;
}
html[lang="he"] .results-link {
display: inline-flex;
}
html[lang="he"] .results-link a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
background: transparent;
color: #1A1A1A;
border: 1px solid #E5E7EB;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
html[lang="he"] .results-link a:hover {
border-color: #1A1A1A;
background: #F8F9FA;
}
html[lang="he"] .text-link {
color: var(--text);
font-weight: 800;
text-underline-offset: 3px;
}
/* Results — #results overrides */
html[lang="he"] #results .result-card {
text-align: right;
padding: 2rem 1.75rem;
}
html[lang="he"] #results .company-logo {
min-height: 78px;
margin: 0 0 1.45rem;
padding: 0;
width: auto;
background: transparent;
border: 0;
display: flex;
align-items: center;
justify-content: center;
}
html[lang="he"] #results .company-logo img,
html[lang="he"] #results .company-logo-img {
width: 170px;
max-width: 82%;
max-height: 78px;
height: auto;
object-fit: contain;
filter: grayscale(75%);
opacity: 0.86;
transform: none;
}
html[lang="he"] #results .result-card:hover .company-logo img,
html[lang="he"] #results .result-card:hover .company-logo-img {
filter: grayscale(0%);
opacity: 1;
}
html[lang="he"] #results .kpi {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
text-align: center;
}
html[lang="he"] #results .kpi-value {
font-size: clamp(3.75rem, 6vw, 5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.06em;
color: #111827;
}
html[lang="he"] #results .kpi-label {
margin: 0.5rem 0 0;
font-size: 0.95rem;
color: #6b7280;
line-height: 1.4;
}
html[lang="he"] #results .metric {
direction: rtl;
text-align: right;
justify-content: flex-start;
}
html[lang="he"] #results .results-cta {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2.15rem;
}
html[lang="he"] #results .text-link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Logos */
html[lang="he"] .he-logos-static #trusted-heading {
font-size: clamp(1.7rem, 2.5vw, 2.15rem);
font-weight: 800;
letter-spacing: -0.02em;
color: #111827;
margin: 0 0 1.6rem;
text-align: center;
}
html[lang="he"] .he-logos-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.9rem 1rem;
align-items: center;
justify-items: center;
max-width: 1020px;
margin: 0 auto;
}
html[lang="he"] .he-logo-cell {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.55rem 0.7rem;
border: 1px solid #edf0f4;
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 20px rgba(15, 23, 42, 0.035);
}
html[lang="he"] .he-logos-grid img {
max-width: 162px;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.92;
}
html[lang="he"] .he-logos-grid .he-logo-cell:nth-child(4) img { max-width: 150px; }
html[lang="he"] .he-logos-grid .he-logo-cell:nth-child(5) img { max-width: 142px; opacity: 0.8; }
html[lang="he"] .he-logos-grid .he-logo-cell:nth-child(8) img { max-width: 172px; opacity: 0.98; }
html[lang="he"] .he-logos-grid .he-logo-cell:nth-child(9) img { max-width: 192px; max-height: 60px; opacity: 0.98; transform: scale(1.55); transform-origin: center; }
html[lang="he"] .he-logos-grid .he-logo-cell:nth-child(10) img { max-width: 184px; }
/* Logo grid from old styles.css path */
html[lang="he"] .logos-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.5rem;
}
html[lang="he"] .logo-cell {
min-height: 96px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
html[lang="he"] .logo-cell img { max-width: 74%; max-height: 64px; object-fit: contain; }
html[lang="he"] .logo-cell .logo-ntrig { max-width: 88%; max-height: 76px; }
/* ------------------------------------------------------------------
Item 6 — client-logo hover animation, BOTH languages, EVERY logo.
The lift lives on the CELL, not the ![]()
: the images carry their own
transform: scale() (e.g. .carousel-logo-iai / -ntrig), which has higher
specificity and used to cancel an img-level hover translateY — that's why
only some English logos appeared to animate and the Hebrew ones never did
(the Hebrew markup has no .client-logo class at all).
------------------------------------------------------------------ */
html[lang="en"] .he-logo-cell,
html[lang="he"] .logo-cell {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
html[lang="en"] .he-logo-cell:hover,
html[lang="he"] .logo-cell:hover {
transform: translateY(-4px);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}
@media (prefers-reduced-motion: reduce) {
html[lang="en"] .he-logo-cell,
html[lang="he"] .logo-cell { transition: none; }
html[lang="en"] .he-logo-cell:hover,
html[lang="he"] .logo-cell:hover { transform: none; }
}
/* Execution-shift */
html[lang="he"] .execution-shift {
background: #ffffff;
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
html[lang="he"] .execution-shift-container {
max-width: 1180px;
margin: 0 auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="he"] .execution-shift-panel {
position: relative;
margin: 0 auto;
padding: 2.2rem 2.2rem 2.4rem;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
border: 1px solid #e5e7eb;
border-radius: 32px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 50px rgba(15, 23, 42, 0.07);
overflow: hidden;
}
html[lang="he"] .execution-shift-panel::before {
content: "";
position: absolute;
top: 0;
right: 50%;
transform: translateX(50%);
width: 96px;
height: 4px;
border-radius: 999px;
background: #C62828;
}
html[lang="he"] .execution-shift-header {
max-width: 760px;
margin: 0 auto 2rem;
text-align: center;
}
html[lang="he"] .execution-shift h2 {
margin: 0 0 0.9rem;
font-size: clamp(2.2rem, 4.4vw, 4rem);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.04em;
color: #111827;
}
html[lang="he"] .execution-shift-subhead {
margin: 0;
font-size: 1.06rem;
line-height: 1.8;
color: #6b7280;
}
html[lang="he"] .execution-shift-layout {
display: grid;
grid-template-columns: minmax(320px, 500px) minmax(0, 1fr);
gap: 3rem;
align-items: center;
}
html[lang="he"] .execution-shift-visual {
margin: 0;
border-radius: 26px;
overflow: hidden;
border: 1px solid #e5e7eb;
background: #f8fafc;
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}
html[lang="he"] .execution-shift-visual picture,
html[lang="he"] .execution-shift-visual img {
display: block;
width: 100%;
}
html[lang="he"] .execution-shift-visual img { height: auto; }
html[lang="he"] .execution-shift-copy { max-width: 39rem; }
html[lang="he"] .execution-shift-text,
html[lang="he"] .execution-shift-summary {
margin: 0;
font-size: 1.08rem;
line-height: 1.9;
}
html[lang="he"] .execution-shift-text { color: #4b5563; }
html[lang="he"] .execution-shift-summary { margin-top: 1rem; color: #111827; }
/* Solution */
html[lang="he"] .solution-container {
max-width: 860px;
margin: 0 auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="he"] .solution-content {
display: flex;
flex-direction: column;
gap: 0.95rem;
}
html[lang="he"] .solution-text-section {
width: 100%;
text-align: right;
}
html[lang="he"] .solution h2 {
width: fit-content;
text-align: right;
margin: 0 0 0.25rem auto;
color: #111827;
}
html[lang="he"] .solution h2::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
margin: 0.85rem auto 0;
background: #C62828;
}
html[lang="he"] #solution-heading { text-align: right; }
html[lang="he"] .solution-text { text-align: right; direction: rtl; }
html[lang="he"] .solution-text-content {
max-width: 680px;
margin-right: 0;
margin-left: auto;
}
html[lang="he"] .solution-text {
font-size: 1.04rem;
line-height: 1.78;
color: #4b5563;
margin-bottom: 0.85rem;
text-align: right;
}
html[lang="he"] .solution-text:last-child { margin-bottom: 0; }
html[lang="he"] .solution .cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
border-radius: 10px;
font-weight: 700;
font-size: 1rem;
background: #C62828;
color: #ffffff;
border: 1px solid #C62828;
text-decoration: none;
margin-top: 0.35rem;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
html[lang="he"] .solution .cta-button:hover {
background: #B71C1C;
border-color: #B71C1C;
transform: translateY(-1px);
}
html[dir="rtl"] .solution h2::after {
margin-right: auto;
margin-left: auto;
}
/* Video */
html[lang="he"] .video-inner { text-align: center; }
html[lang="he"] .video-inner .section-kicker {
width: min(100%, var(--reading));
margin-inline: auto;
text-align: right;
}
html[lang="he"] .video-frame {
width: min(100%, var(--reading));
margin: 1.25rem auto 0;
border-top: 6px solid #2f80ed;
border-radius: 10px;
overflow: hidden;
background: #e5e7eb;
box-shadow: 0 20px 60px rgba(15, 23, 42, .14);
}
html[lang="he"] .video-frame iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: none;
}
html[lang="he"] .video-frame .video-lazy {
display: flex;
width: 100%;
aspect-ratio: 16 / 9;
border: none;
cursor: pointer;
color: #fff;
/* Video preview: show a real frame from the video (was a flat blue
gradient). maxresdefault = 1280x720, sharp at desktop size; mobile-en.css
keeps hqdefault for the small viewport. The dark tint is a background
LAYER (not ::after) so it can't cover the play icon / label, which are
flex children of this button. */
background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
url('https://img.youtube.com/vi/gGS2Yq9BV-4/maxresdefault.jpg') center / cover no-repeat,
#000;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem;
font: inherit;
text-align: center;
}
html[lang="he"] .video-frame .video-lazy-play {
width: 4.25rem;
height: 4.25rem;
border-radius: 999px;
background: #fff;
display: grid;
place-items: center;
box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
html[lang="he"] .video-frame .video-lazy-play::before {
content: "";
display: block;
width: 0;
height: 0;
/* PHYSICAL properties on purpose: border-inline-start flips to border-right
under dir="rtl", which pointed the play triangle LEFT on the Hebrew page.
A play glyph always points right, in every language. */
border-top: 0.85rem solid transparent;
border-bottom: 0.85rem solid transparent;
border-left: 1.25rem solid #1e3a8a;
margin-left: 0.25rem;
}
html[lang="he"] .video-frame .video-lazy-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Two-card / compare grids */
html[lang="he"] .two-card-grid,
html[lang="he"] .compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
html[lang="he"] .info-card,
html[lang="he"] .compare-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
html[lang="he"] .info-card:hover,
html[lang="he"] .compare-card:hover {
background: #fff;
border-color: #d8e0ea;
box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
transform: translateY(-2px);
}
html[lang="he"] .info-card h3,
html[lang="he"] .compare-card h3 {
margin: 0 0 .85rem;
font-size: 1.35rem;
line-height: 1.25;
color: var(--text);
}
html[lang="he"] .info-card p,
html[lang="he"] .compare-card p {
margin: 0;
color: var(--muted-strong);
font-size: 1.08rem;
line-height: 1.75;
}
html[lang="he"] .fit-line {
margin: 2rem 0 0;
color: var(--muted);
font-size: 1.2rem;
text-align: center;
}
/* Pace panel */
html[lang="he"] .pace-panel {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
border: 1px solid var(--line);
border-radius: 32px;
padding: 2.25rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 50px rgba(15, 23, 42, 0.07);
overflow: hidden;
}
html[lang="he"] .pace-panel::before {
content: "";
position: absolute;
top: 0;
right: 50%;
transform: translateX(50%);
width: 96px;
height: 4px;
border-radius: 999px;
background: #C62828;
}
html[lang="he"] .pace-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: 2rem;
align-items: center;
}
html[lang="he"] .pace-copy p {
margin: 0 0 1.25rem;
color: var(--muted-strong);
font-size: 1.15rem;
line-height: 1.8;
}
html[lang="he"] .pace-copy p:last-child {
margin-bottom: 0;
color: var(--text);
font-weight: 800;
}
html[lang="he"] .pace-visual {
margin: 0;
border-radius: 14px;
overflow: hidden;
background: #edf2f7;
}
html[lang="he"] .pace-visual img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
html[lang="he"] .work-copy {
max-width: 900px;
margin: 0 auto;
}
html[lang="he"] .work-copy p {
margin: 0 0 1.35rem;
color: var(--muted-strong);
font-size: 1.24rem;
line-height: 1.85;
}
html[lang="he"] .work-copy p:last-child { margin-bottom: 0; }
html[lang="he"] .work-cta {
margin-top: 2rem;
/* The CTA follows its section's text. This section's heading and body are
start-aligned (right in RTL), so the button is too — same as the hero and
the results section, and mirroring the English page. */
text-align: right;
}
html[lang="he"] .compare-card-highlight {
border-color: #bfdbfe;
background: #f8fbff;
}
html[lang="he"] .compare-card-highlight h3 { color: #1d4ed8; }
/* KPI */
html[lang="he"] .kpi {
text-align: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid #d1d5db;
margin-bottom: 1.35rem;
}
html[lang="he"] .kpi-value {
color: #05070b;
font-size: 4rem;
line-height: 1;
font-weight: 900;
direction: ltr;
}
html[lang="he"] .kpi-label {
margin: .7rem 0 0;
color: var(--muted);
font-size: 1.1rem;
line-height: 1.3;
}
/* FAQ */
html[lang="he"] .faq-container {
width: min(100%, 1100px);
margin-inline: auto;
padding-inline: 2rem;
}
html[lang="he"] .faq h2 {
text-align: center;
margin-bottom: 2rem;
color: #111827;
}
html[lang="he"] .faq h2::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
margin: 0.85rem auto 0;
background: #C62828;
}
html[lang="he"] .faq-box {
background: #fff;
border-radius: 12px;
box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
padding: 1.5rem 2rem;
}
html[lang="he"] .faq-item {
border-bottom: 1px solid #edf1f5;
}
html[lang="he"] .faq-item:last-child { border-bottom: 0; }
html[lang="he"] .faq-content { overflow: hidden; }
html[lang="he"] .faq-item + .faq-item { border-top: 1px solid #f3f4f6; }
html[lang="he"] .faq-question {
width: 100%;
border: 0;
background: transparent;
padding: 1.45rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: #374151;
text-align: right;
cursor: pointer;
font: inherit;
}
html[lang="he"] .faq-question h3 {
margin: 0;
font-size: 1.18rem;
line-height: 1.4;
font-weight: 800;
flex: 1;
padding-right: 1rem;
}
html[lang="he"] .faq-icon {
color: var(--blue);
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
min-width: 20px;
text-align: center;
}
html[lang="he"] .faq-answer {
display: none;
padding: 0 0 1.4rem;
color: var(--muted);
font-size: 1.08rem;
line-height: 1.75;
}
html[lang="he"] .faq-answer p { margin: 0; }
html[lang="he"] .faq-question[aria-expanded="true"] + .faq-answer { display: block; }
html[lang="he"] .faq-question:hover { background: #f9fafb; }
/* Final CTA */
html[lang="he"] .final-cta {
padding-top: 5.5rem;
padding-bottom: 5.5rem;
}
html[lang="he"] .cta-container {
text-align: center;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
html[lang="he"] .final-cta h2 {
font-size: clamp(2.1rem, 3.2vw, 2.65rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.12;
margin-bottom: 1.35rem;
}
html[lang="he"] .final-cta h2::after {
content: "";
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
margin: 0.85rem auto 0;
background: #C62828;
}
html[lang="he"] .final-cta .cta-text {
font-size: 1.05rem;
max-width: 640px;
margin-left: auto;
margin-right: auto;
line-height: 1.75;
margin-bottom: 2.25rem;
color: rgba(255, 255, 255, 0.82);
}
/* Final CTA rail overrides */
html[lang="he"] .final-cta {
padding: 4.25rem 0;
}
html[lang="he"] .final-cta .container {
width: min(100%, var(--cbs-page-rail));
max-width: var(--cbs-page-rail);
margin-inline: auto;
padding-inline: var(--cbs-page-pad);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
html[lang="he"] .final-cta h2#cta-heading {
max-width: 46rem;
margin: 0 auto 1rem;
font-size: clamp(1.9rem, 3vw, 2.6rem);
line-height: 1.15;
font-weight: 900;
letter-spacing: 0;
text-align: center;
}
html[lang="he"] .final-cta h2#cta-heading::after { margin: 1rem auto 0; }
html[lang="he"] .final-cta .section-lead {
max-width: 40rem;
margin: 1.8rem auto 0;
font-size: clamp(1.05rem, 1.5vw, 1.35rem);
line-height: 1.65;
text-align: center;
}
html[lang="he"] .final-cta .btn.btn-primary {
margin-top: 2rem;
margin-right: auto;
margin-left: auto;
min-width: 18rem;
}
/* Quick links */
html[lang="he"] .he-quick-links {
background: #f8fafc;
padding: 1.9rem 1.25rem 2.35rem;
border-top: 1px solid #e5e7eb;
}
html[lang="he"] .he-quick-links h2 {
font-size: 1.2rem;
font-weight: 700;
color: #111827;
margin: 0 0 0.5rem;
text-align: center;
line-height: 1.3;
}
html[lang="he"] .he-quick-links .learn-more-text {
color: #6b7280;
line-height: 1.65;
margin: 0 auto 1rem;
max-width: 32rem;
text-align: center;
font-size: 0.95rem;
}
html[lang="he"] .he-quick-links ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.6rem 0.75rem;
max-width: 52rem;
direction: rtl;
}
html[lang="he"] .he-quick-links li { margin: 0; }
html[lang="he"] .he-quick-links a {
display: inline-block;
padding: 0.55rem 1rem;
font-size: 0.88rem;
font-weight: 600;
color: #111827;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
white-space: nowrap;
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 .95rem;
font-size: 1rem;
line-height: 1.25;
box-shadow: 0 1px 2px rgba(16, 24, 39, .06);
}
html[lang="he"] .he-quick-links a:hover,
html[lang="he"] .he-quick-links a:focus-visible {
background: #f9fafb;
border-color: #d1d5db;
color: #111827;
text-decoration: none;
outline: none;
transform: translateY(-1px);
}
html[lang="he"] .he-quick-links a:focus-visible {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(198, 40, 40, 0.4);
}
html[lang="he"] .he-quick-links a.primary-cta {
background-color: #C62828;
color: #ffffff;
border: 1px solid #C62828;
box-shadow: none;
}
html[lang="he"] .he-quick-links a.primary-cta:hover,
html[lang="he"] .he-quick-links a.primary-cta:focus-visible {
background-color: #B71C1C;
border-color: #B71C1C;
color: #ffffff;
}
html[lang="he"] .quick-links {
background: var(--soft);
padding: 2rem 0 2.25rem;
text-align: center;
background: #f8fafc;
border-top: 1px solid #e5e7eb;
}
html[lang="he"] .quick-links h2 {
margin: 0 0 .45rem;
font-size: clamp(1.35rem, 2vw, 1.75rem);
line-height: 1.25;
text-align: center;
}
html[lang="he"] .quick-links p {
max-width: 42rem;
margin: 0 auto 1rem;
color: #6b7280;
line-height: 1.6;
text-align: center;
}
html[lang="he"] .quick-links ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: .7rem;
margin: 0;
padding: 0;
list-style: none;
direction: rtl;
}
html[lang="he"] .quick-links a {
min-height: 42px;
display: inline-flex;
align-items: center;
padding: 0 1.1rem;
border: 1px solid #d9dee7;
border-radius: 8px;
background: #fff;
text-decoration: none;
font-weight: 800;
}
html[lang="he"] .quick-links .primary-cta {
background: var(--red);
border-color: var(--red);
color: #fff;
}
/* Container / rail utilities */
html[lang="he"] .container,
html[lang="he"] .faq-container,
html[lang="he"] .footer-container {
width: min(100%, var(--cbs-page-rail));
max-width: var(--cbs-page-rail);
margin-inline: auto;
padding-inline: var(--cbs-page-pad);
box-sizing: border-box;
}
html[lang="he"] .rail {
width: min(100%, var(--rail));
margin-inline: auto;
}
html[lang="he"] .reading {
width: min(100%, var(--reading));
margin-inline: auto;
}
html[lang="he"] .hero-content,
html[lang="he"] .rail,
html[lang="he"] .reading,
html[lang="he"] .video-inner .section-kicker,
html[lang="he"] .video-frame {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
/* Text alignment */
html[lang="he"] .hero-content,
html[lang="he"] .hero-title,
html[lang="he"] .hero-description,
html[lang="he"] .hero-subheadline-normal,
html[lang="he"] .value-label,
html[lang="he"] .section-kicker,
html[lang="he"] .section h2,
html[lang="he"] .section-lead,
html[lang="he"] .fit-line,
html[lang="he"] .pace-panel,
html[lang="he"] .work-copy,
html[lang="he"] .compare-card,
html[lang="he"] .result-card,
html[lang="he"] .testimonial h2,
html[lang="he"] .trusted h2,
html[lang="he"] .faq-container,
html[lang="he"] .faq-container h2,
html[lang="he"] .final-cta h2,
html[lang="he"] .final-cta .section-lead,
html[lang="he"] .quick-links {
text-align: right;
}
html[lang="he"] .hero-description,
html[lang="he"] .section-lead,
html[lang="he"] .fit-line,
html[lang="he"] .final-cta .section-lead {
margin-right: 0;
margin-left: auto;
}
/* The final CTA is a CENTERED section: its heading and its button are centered,
so the lead text centres too. The generic RTL blocks above force
text-align:right + margin-left:auto on every .section-lead, which pushed this
one to the right edge while the button stayed centred — the two ended up ~320px
apart ("השאירו הודעה" not lining up with the button). Must come after them. */
html[lang="he"] .final-cta .section-lead {
text-align: center;
margin-right: auto;
margin-left: auto;
}
/* Testimonials is a centred section in English — heading and both buttons centre
together. Hebrew centred the buttons but the generic RTL block above pushed the
heading to the right edge, so the buttons no longer followed their own section.
Centring the heading matches English and moves no buttons. */
html[lang="he"] .testimonial h2 {
text-align: center;
}
/* how-it-works section */
html[lang="he"] #how-it-works .work-copy {
width: 100%;
max-width: 100%;
margin-right: 0;
margin-left: auto;
padding-right: 0;
padding-left: 0;
text-align: right;
}
html[lang="he"] #how-it-works .work-copy p {
margin-right: 0;
margin-left: 0;
text-align: right;
}
html[lang="he"] #how-it-works,
html[lang="he"] #what-sets-the-pace {
scroll-margin-top: 96px;
}
/* testimonial-link */
html[lang="he"] .testimonial-link {
min-height: 44px;
padding: 0 1.25rem;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 8px;
display: inline-flex;
align-items: center;
color: #fff;
text-decoration: none;
font-weight: 800;
}
/* Hero final production overrides from block ~3769 */
html[lang="he"] .hero {
background: #f4f7fb;
padding: 4.2rem 0 3.8rem;
}
html[lang="he"] .hero .hero-title {
color: #2f3b52;
font-weight: 680;
letter-spacing: 0;
font-size: 2.95rem;
line-height: 1.17;
margin: 0 0 1.25rem;
text-align: right;
}
html[lang="he"] .hero .hero-description {
max-width: 620px;
margin: 0;
color: #475467;
text-align: right;
}
html[lang="he"] .hero .hero-subheadline-normal {
color: #5f6b7c;
font-weight: 440;
font-size: 1.03rem;
line-height: 1.66;
letter-spacing: 0;
margin-top: 0.7rem;
text-align: right;
}
html[lang="he"] .hero .hero-subheadline-strong {
color: #2f3b52;
font-weight: 620;
font-size: 1.18rem;
line-height: 1.55;
text-align: right;
}
html[lang="he"] .hero .hero-buttons {
margin-top: 1.2rem;
justify-content: flex-start;
}
/* Hebrew responsive */
@media (max-width: 1024px) {
html[lang="he"] .nav-menu { gap: 1.1rem; }
html[lang="he"] .hero { padding-top: 4.25rem; }
html[lang="he"] .logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[lang="he"] .results-grid,
html[lang="he"] .testimonial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
html[lang="he"] .testimonial-grid,
html[lang="he"] .results-grid,
html[lang="he"] .he-logos-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
html[lang="he"] html,
html[lang="he"] body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
html[lang="he"] .hero {
padding-top: 1.25rem;
padding-bottom: 1.5rem;
}
html[lang="he"] .hero-title {
font-size: clamp(2rem, 10vw, 2.35rem);
line-height: 1.15;
text-align: right;
max-width: 100%;
overflow-wrap: anywhere;
}
html[lang="he"] .hero-content.hero-content--single .hero-text {
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
html[lang="he"] .hero-description,
html[lang="he"] .hero-proof {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
html[lang="he"] .hero-buttons,
html[lang="he"] .he-hero-cta-row,
html[lang="he"] .hero .hero-text .hero-buttons,
html[lang="he"] .hero .hero-text .he-hero-cta-row,
html[lang="he"] .hero .hero-text .hero-buttons.he-hero-cta-row {
width: 100%;
margin-top: 1.4rem;
gap: 0.65rem;
}
html[lang="he"] .hero-buttons,
html[lang="he"] .he-hero-cta-row,
html[lang="he"] .hero .hero-text .hero-buttons,
html[lang="he"] .hero .hero-text .he-hero-cta-row,
html[lang="he"] .hero .hero-text .hero-buttons.he-hero-cta-row {
justify-content: stretch;
}
html[lang="he"] .hero .btn.btn-primary,
html[lang="he"] .btn-hero-secondary {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
min-height: 50px;
padding-left: 1rem;
padding-right: 1rem;
}
html[lang="he"] .he-value-strip .hero-stats-strip {
grid-template-columns: 1fr;
gap: 0.55rem;
max-width: 100%;
margin-left: auto;
margin-right: auto;
width: 100%;
}
html[lang="he"] .he-value-strip .stat-item { padding: 0.77rem 0.45rem; gap: 0.27rem; }
html[lang="he"] .he-value-strip .stat-number { font-size: 1.26rem; line-height: 1.1; }
html[lang="he"] .he-value-strip .stat-label { font-size: 0.79rem; line-height: 1.3; }
html[lang="he"] .he-real-problem { padding-top: 3rem; padding-bottom: 3rem; }
html[lang="he"] .he-real-problem-grid { grid-template-columns: 1fr; gap: 0.85rem; }
html[lang="he"] .testimonial-grid,
html[lang="he"] .results-grid,
html[lang="he"] .about-cards,
html[lang="he"] .he-logos-grid {
grid-template-columns: 1fr;
}
html[lang="he"] .results-grid { grid-template-columns: 1fr; gap: 0.85rem; }
html[lang="he"] .about-cards {
grid-template-columns: 1fr;
gap: 0.85rem;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
html[lang="he"] .testimonial-content,
html[lang="he"] .testimonial-content.secondary {
padding: 1.25rem;
}
html[lang="he"] .testimonial-content.secondary,
html[lang="he"] .testimonial-content.secondary:hover {
transform: none;
}
html[lang="he"] .result-card { padding: 1.05rem; }
html[lang="he"] .result-kpi-number { font-size: 2.8rem; }
html[lang="he"] .result-kpi-suffix { font-size: 1.2rem; }
html[lang="he"] .about-card {
padding: 1.4rem 1.1rem;
background: rgba(255, 255, 255, 0.92);
border: 1px solid #e5e7eb;
border-radius: 18px;
border-inline-start: 0;
}
html[lang="he"] .execution-shift { padding-top: 3.25rem; padding-bottom: 3.25rem; }
html[lang="he"] .execution-shift-panel { padding: 1.5rem 1rem 1.7rem; border-radius: 24px; }
html[lang="he"] .execution-shift-header { margin-bottom: 1.5rem; }
html[lang="he"] .execution-shift h2 { font-size: 1.85rem; line-height: 1.1; }
html[lang="he"] .execution-shift-subhead { font-size: 0.98rem; line-height: 1.75; }
html[lang="he"] .execution-shift-layout { grid-template-columns: 1fr; gap: 1.4rem; }
html[lang="he"] .execution-shift-copy { max-width: 100%; text-align: center; }
html[lang="he"] .execution-shift-visual { border-radius: 20px; }
html[lang="he"] .execution-shift-text,
html[lang="he"] .execution-shift-summary { font-size: 0.98rem; line-height: 1.8; }
html[lang="he"] .he-logo-cell { min-height: 64px; }
html[lang="he"] .solution-container { max-width: 100%; }
html[lang="he"] .solution-text-content { max-width: 100%; }
html[lang="he"] .final-cta { padding-top: 4rem; padding-bottom: 4rem; }
html[lang="he"] .final-cta .cta-text { margin-bottom: 2rem; }
html[lang="he"] .he-quick-links { padding: 1.7rem 1rem 2rem; }
html[lang="he"] .he-quick-links ul { flex-direction: column; gap: 0.55rem; max-width: 18rem; }
html[lang="he"] .he-quick-links a { width: 100%; text-align: center; box-sizing: border-box; }
html[lang="he"] .faq-question { padding: 1.1rem 1.15rem; }
html[lang="he"] .faq-answer { padding: 0 1.15rem 1.1rem 1.15rem; }
html[lang="he"] .nav-container,
html[lang="he"] .container,
html[lang="he"] .faq-container {
padding-inline: 1rem;
}
html[lang="he"] .nav-menu { display: none; }
html[lang="he"] .hamburger-menu { display: flex; }
html[lang="he"] .logo {
font-size: .72rem;
max-width: 144px;
white-space: normal;
}
html[lang="he"] .hero { padding: 2.55rem 0 1.5rem; }
html[lang="he"] .hero-title { margin-bottom: 1.35rem; font-size: 2rem; line-height: 1.15; }
html[lang="he"] .hero-description { margin-bottom: 1.2rem; font-size: 1.08rem; line-height: 1.65; font-weight: 600; }
html[lang="he"] .hero-subheadline-normal { font-size: 1.18rem; line-height: 1.45; font-weight: 800; }
html[lang="he"] .hero-buttons { flex-direction: column; align-items: stretch; justify-content: flex-start; }
html[lang="he"] .btn { width: 100%; }
html[lang="he"] .value-strip { padding: 1rem 0; }
html[lang="he"] .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
html[lang="he"] .stat-card { min-height: 102px; padding: .77rem .55rem; }
html[lang="he"] .stat-number { font-size: clamp(1.04rem, 5.6vw, 1.18rem); }
html[lang="he"] .stat-label { font-size: .79rem; line-height: 1.25; font-weight: 700; }
html[lang="he"] .section { padding: 4rem 0; }
html[lang="he"] .section h2 { font-size: 2.2rem; }
html[lang="he"] .section-lead { font-size: 1.05rem; line-height: 1.7; }
html[lang="he"] .two-card-grid,
html[lang="he"] .compare-grid,
html[lang="he"] .pace-layout { grid-template-columns: 1fr; }
html[lang="he"] .pace-panel,
html[lang="he"] .info-card,
html[lang="he"] .compare-card,
html[lang="he"] .result-card { padding: 1.25rem; }
html[lang="he"] .pace-panel { border-radius: 20px; }
html[lang="he"] .work-copy p { font-size: 1.05rem; }
html[lang="he"] .kpi-value { font-size: 3rem; }
html[lang="he"] .logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
html[lang="he"] .logo-cell { height: 82px; }
html[lang="he"] .faq-box { padding: .75rem 1rem; }
html[lang="he"] .footer-content { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
html[lang="he"] html,
html[lang="he"] body {
overflow-x: hidden;
}
html[lang="he"] .container,
html[lang="he"] .faq-container,
html[lang="he"] .footer-container {
width: 100%;
max-width: 100%;
padding-inline: 1.25rem;
box-sizing: border-box;
}
html[lang="he"] .hero-content,
html[lang="he"] .hero-title,
html[lang="he"] .hero-description,
html[lang="he"] .hero-subheadline-normal,
html[lang="he"] .section h2,
html[lang="he"] .section-lead,
html[lang="he"] .fit-line {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
html[lang="he"] .hero-title { font-size: clamp(2.2rem, 10vw, 2.9rem); line-height: 1.1; }
html[lang="he"] .hero-buttons,
html[lang="he"] .hero .btn {
width: 100%;
max-width: 100%;
}
html[lang="he"] .hero-buttons { flex-direction: column; align-items: stretch; }
html[lang="he"] .hero .btn { white-space: normal; }
html[lang="he"] .stats-row { grid-template-columns: 1fr; }
html[lang="he"] .video-frame { width: 100%; max-width: 100%; box-sizing: border-box; }
html[lang="he"] .final-cta { padding: 3.5rem 0; }
html[lang="he"] .final-cta h2#cta-heading {
font-size: clamp(2rem, 10vw, 2.8rem);
max-width: 100%;
}
html[lang="he"] .final-cta .section-lead,
html[lang="he"] .final-cta .btn.btn-primary { max-width: 100%; }
html[lang="he"] .final-cta .container { align-items: stretch; }
html[lang="he"] .final-cta h2#cta-heading,
html[lang="he"] .final-cta .section-lead { text-align: right; }
html[lang="he"] .quick-links { padding: 1.75rem 0 2rem; }
html[lang="he"] .quick-links ul { flex-direction: column; align-items: stretch; }
html[lang="he"] .quick-links a { width: 100%; justify-content: center; text-align: center; }
html[lang="he"] .footer,
html[lang="he"] .footer .container,
html[lang="he"] .footer .footer-container,
html[lang="he"] .footer .footer-content,
html[lang="he"] .footer-brand,
html[lang="he"] .footer-contact,
html[lang="he"] .footer-menu,
html[lang="he"] .footer-menu li {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
html[lang="he"] .footer .footer-content {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"brand"
"contact"
"menu";
justify-items: stretch;
}
html[lang="he"] .footer-brand h3,
html[lang="he"] .footer-brand p,
html[lang="he"] .footer-contact,
html[lang="he"] .footer-contact h4,
html[lang="he"] .footer-contact p,
html[lang="he"] .footer-menu,
html[lang="he"] .footer-menu a {
max-width: 100%;
overflow-wrap: anywhere;
text-align: center;
}
}
@media (max-width: 480px) {
html[lang="he"] {
--cbs-page-pad: 1rem;
}
}
/* Video-section label */
html[lang="he"] [aria-labelledby="bottle-video-heading"] { padding-top: 2rem; }
html[lang="he"] [aria-labelledby="bottle-video-heading"] h2 {
font-size: clamp(2.35rem, 3.8vw, 3.5rem);
margin: 0 0 0.75rem;
}
/* ===== ENGLISH STYLES ===== */
/* Block 1: scoped */
@font-face {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-style: normal;
font-display: swap;
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");
}
html[lang="en"] .nav-actions{
display: flex;
align-items: center;
gap: 8px;
min-width: 120px; /* Reserve space to prevent layout shift */
}
html[lang="en"] .nav-actions i,
html[lang="en"] .nav-actions svg{
width: 20px;
height: 20px;
flex-shrink: 0;
display: inline-block;
}
html[lang="en"] .nav-actions .language-selector{
min-width: 32px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
html[lang="en"] .language-selector #language-text{
min-width: 20px;
text-align: center;
font-weight: 500;
}
html[lang="en"] .nav-menu.mobile-open{
display: flex;
position: fixed;
top: 72px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 520px;
height: auto;
max-height: 70vh;
overflow: auto;
background: rgba(26, 26, 26, 0.85);
backdrop-filter: blur(3px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 1.25rem;
border-radius: 12px;
z-index: 1000;
}
html[lang="en"] .nav-menu.mobile-open .nav-link{
font-size: 1.25rem;
padding: 0.75rem 1rem;
text-align: center;
width: 100%;
}
/* Block 2: already-scoped */
html[lang="en"] .header {
background: #1a1a1a;
}
html[lang="en"] .nav-menu.mobile-open {
top: 72px;
left: 50%;
right: auto;
transform: translateX(-50%);
width: 90%;
max-width: 520px;
background: rgba(26, 26, 26, 0.85);
backdrop-filter: blur(3px);
}
html[lang="en"] .hero {
background: #ffffff;
color: #111827;
padding: 2rem 0 0.55rem;
}
/* Center like .he-value-strip-inner / nav max-width; without margin:auto the 1200px block sticks to the viewport left */
html[lang="en"] .hero-container,
html[lang="en"] .hero .hero-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
box-sizing: border-box;
}
html[lang="en"] .hero-content.hero-content--single {
grid-template-columns: 1fr;
}
html[lang="en"] .hero-content.hero-content--single .hero-text {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* Match he/index.html: narrower shell than hero; content hugs start (LTR) */
html[lang="en"] .he-real-problem-inner {
text-align: left;
max-width: 62.5rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
box-sizing: border-box;
}
html[lang="en"] .he-real-problem h2 {
max-width: 850px;
}
html[lang="en"] .he-real-problem-lead {
max-width: 52rem;
margin-left: 0;
margin-right: auto;
}
html[lang="en"] .he-real-problem-fit {
max-width: 48rem;
margin-left: 0;
margin-right: auto;
}
html[lang="en"] .hero-title,
html[lang="en"] .hero-description,
html[lang="en"] .hero-subheadline-strong,
html[lang="en"] .hero-eyebrow,
html[lang="en"] .he-real-problem-label,
html[lang="en"] .he-real-problem h2,
html[lang="en"] .he-real-problem-lead,
html[lang="en"] .he-real-problem-fit {
text-align: left;
}
html[lang="en"] .hero-description,
html[lang="en"] .hero-subheadline-strong {
max-width: 54rem;
}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row {
justify-content: flex-start;
direction: ltr;
margin-top: 1.35rem;
margin-bottom: 0;
}
html[lang="en"] .btn-hero-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
border-radius: 10px;
border: 1px solid #C62828;
color: #C62828;
background: transparent;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
line-height: 1;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
html[lang="en"] .btn-hero-secondary:hover {
background: rgba(198, 40, 40, 0.06);
color: #B71C1C;
border-color: #B71C1C;
transform: translateY(-1px);
}
html[lang="en"] .btn-hero-secondary:focus-visible {
outline: 3px solid rgba(198, 40, 40, 0.25);
outline-offset: 2px;
}
html[lang="en"] .hero-divider {
margin-left: 0;
margin-right: auto;
}
html[lang="en"] .hero-stats-strip .stat-item {
text-align: center;
}
.he-value-strip {
background: #fff;
padding: 0.15rem 0 1.25rem;
border-bottom: 1px solid #e5e7eb;
}
.he-value-strip-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem;
--align-hero-max: 60rem;
--align-strip-max: 48rem;
box-sizing: border-box;
}
/* LTR mirror of he/index.html strip margins: align 48rem block to left edge of virtual 60rem hero column */
.he-value-strip .hero-stats-strip {
box-sizing: border-box;
width: 100%;
max-width: var(--align-strip-max);
margin-left: max(0px, calc((100% - var(--align-hero-max)) / 2));
margin-right: max(
0px,
calc(
(100% - var(--align-hero-max)) / 2 +
(var(--align-hero-max) - var(--align-strip-max))
)
);
gap: 0.55rem;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
.he-value-strip .stat-item {
flex: 1 1 0;
min-width: 0;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 11px;
padding: 0.81rem 0.45rem;
box-shadow: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.3rem;
min-height: auto;
}
.he-value-strip .stat-label {
font-weight: 700;
color: #374151;
font-size: 0.81rem;
line-height: 1.35;
}
.he-value-strip-label {
color: #6b7280;
margin-bottom: 0.65rem;
text-align: left;
box-sizing: border-box;
max-width: var(--align-strip-max);
margin-left: max(0px, calc((100% - var(--align-hero-max)) / 2));
margin-right: max(
0px,
calc(
(100% - var(--align-hero-max)) / 2 +
(var(--align-hero-max) - var(--align-strip-max))
)
);
}
.he-real-problem {
background: #f8fafc;
padding: 3.5rem 0;
border-top: 1px solid #e5e7eb;
}
.he-real-problem-inner {
max-width: 62.5rem;
margin: 0 auto;
padding: 0 1.25rem;
box-sizing: border-box;
}
.he-real-problem-label,
.he-real-problem h2,
.he-real-problem-lead,
.he-real-problem-fit {
text-align: left;
}
.he-real-problem h2 {
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
font-weight: 800;
color: #111827;
line-height: 1.25;
margin: 0.35rem 0 1rem;
}
.he-real-problem-lead {
font-size: 1.05rem;
color: #374151;
line-height: 1.7;
margin: 0 0 2rem;
max-width: 52rem;
}
.he-real-problem-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.he-real-problem-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 2rem 1.75rem;
text-align: left;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.he-real-problem-card:hover {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
transform: translateY(-2px);
}
.he-real-problem-card h3 {
font-size: 0.95rem;
font-weight: 800;
color: #111827;
margin: 0 0 0.5rem;
}
.he-real-problem-card p {
font-size: 0.9rem;
color: #4b5563;
margin: 0;
line-height: 1.55;
}
.he-real-problem-fit {
font-size: 0.92rem;
color: #6b7280;
line-height: 1.6;
margin: 0 0 1.5rem;
}
html[lang="en"] .execution-shift-panel::before {
left: 50%;
right: auto;
transform: translateX(-50%);
}
.result-kpi {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
text-align: center;
}
.result-kpi-value {
display: flex;
align-items: flex-end;
justify-content: center;
line-height: 1;
}
.result-kpi-number {
font-size: clamp(3.75rem, 6vw, 5rem);
font-weight: 800;
letter-spacing: -0.06em;
color: #111827;
}
.result-kpi-label {
margin: 0.5rem 0 0;
font-size: 0.95rem;
color: #6b7280;
line-height: 1.4;
}
.result-card .result-metrics {
gap: 0.85rem;
}
.result-card .metric {
align-items: flex-start;
}
.result-card .metric-text,
.result-card .metric-label {
text-align: left;
}
.testimonial-actions {
display: flex;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-top: 2.35rem;
}
.testimonial-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
text-decoration: none;
font-weight: 700;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.testimonial-link-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.42);
transform: translateY(-1px);
}
.testimonial-link-btn--secondary {
border-color: rgba(96, 165, 250, 0.38);
color: #bfdbfe;
}
.he-logos-static {
padding: 3.25rem 0;
background: #fff;
}
.he-logos-static #trusted-heading {
font-size: 1.45rem;
font-weight: 700;
color: #6b7280;
margin: 0 0 1.55rem;
text-align: center;
}
.he-logos-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.25rem;
max-width: 1150px;
margin: 0 auto;
}
.he-logo-cell {
min-height: 110px;
padding: 1rem 1.15rem;
border: 1px solid #e5e7eb;
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
display: flex;
align-items: center;
justify-content: center;
}
.he-logo-cell img {
max-width: 156px;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
}
.quick-links {
background: #f8f9fa;
padding: 1.75rem 1.25rem 2.25rem;
border-top: 1px solid rgba(0,0,0,.06);
}
@media (max-width: 768px) {
html[lang="en"] .hero {
padding: 2.5rem 0 0.45rem;
}
html[lang="en"] .hero-title {
font-size: 2.2rem;
line-height: 1.2;
text-align: left;
}
html[lang="en"] .hero-text,
html[lang="en"] .hero-description {
text-align: left;
}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row {
width: 100%;
max-width: 100%;
margin-top: 1.15rem;
margin-bottom: 0;
}
.he-value-strip .hero-stats-strip .stat-divider {
display: none;
}
.he-value-strip .hero-stats-strip {
margin-left: 0;
margin-right: 0;
}
html[lang="en"] .he-value-strip-label {
margin-left: 0;
margin-right: 0;
max-width: none;
}
html[lang="en"] .he-value-strip .hero-stats-strip {
max-width: 100%;
}
.he-real-problem-grid,
.he-logos-grid,
.execution-shift-layout {
grid-template-columns: 1fr;
}
.testimonial-actions {
gap: 0.85rem;
}
.testimonial-link-btn {
width: 100%;
max-width: 20rem;
}
html[lang="en"] .btn-hero-secondary {
width: auto;
}
}
/* Block 3: scoped */
html[lang="en"] .cbs-demo-video{
background: #f8fafc;
padding: 2rem 0 4.5rem;
}
html[lang="en"] .cbs-demo-video-inner{
max-width: 980px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
html[lang="en"] .cbs-demo-video h2{
color: #1a1a1a;
font-size: clamp(2rem, 3.2vw, 2.85rem);
line-height: 1.15;
margin: 0 0 0.75rem;
}
html[lang="en"] .cbs-demo-video p{
max-width: 720px;
margin: 0 auto 1.25rem;
color: #666;
font-size: 1.15rem;
line-height: 1.7;
}
html[lang="en"] .cbs-demo-video-frame{
overflow: hidden;
border-top: 6px solid #2f80ed;
border-radius: 12px;
background: #111;
box-shadow: 0 10px 30px rgba(0,0,0,.16);
}
html[lang="en"] .cbs-demo-video-frame iframe{
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: none;
}
html[lang="en"] .cbs-demo-video-frame .video-lazy{
display: flex;
width: 100%;
aspect-ratio: 16 / 9;
border: none;
cursor: pointer;
color: #fff;
/* Video preview: show a real frame from the video (was a flat blue
gradient). maxresdefault = 1280x720, sharp at desktop size;
mobile-en.css keeps hqdefault for the small viewport. The dark tint is
a background LAYER (not ::after) so it can't cover the play icon /
label, which are flex children of this button. */
background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
url('https://img.youtube.com/vi/gGS2Yq9BV-4/maxresdefault.jpg') center / cover no-repeat,
#000;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem;
font: inherit;
text-align: center;
}
html[lang="en"] .cbs-demo-video-frame .video-lazy-play{
width: 4.25rem;
height: 4.25rem;
border-radius: 999px;
background: #fff;
display: grid;
place-items: center;
box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
html[lang="en"] .cbs-demo-video-frame .video-lazy-play::before{
content: "";
display: block;
width: 0;
height: 0;
border-block: 0.85rem solid transparent;
border-inline-start: 1.25rem solid #1e3a8a;
margin-inline-start: 0.25rem;
}
html[lang="en"] .cbs-demo-video-frame .video-lazy-label{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 768px) {html[lang="en"] .cbs-demo-video{
padding: 2.75rem 0;
}
html[lang="en"] .cbs-demo-video-inner{
padding: 0 1rem;
}
}
html[lang="en"] body .constraint-visual {
display: none;
}
html[lang="en"] body .hero-content.hero-content--single.cbs-demo-hero-grid {
display: flex;
flex-direction: column;
align-items: center;
}
html[lang="en"] body .hero-content.hero-content--single.cbs-demo-hero-grid .hero-text {
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
html[lang="en"] body .hero-title {
font-size: clamp(2.9rem, 5vw, 4.25rem);
line-height: 1.08;
letter-spacing: -0.045em;
}
html[lang="en"] body .he-value-strip {
padding-top: 1.15rem;
padding-bottom: 1.05rem;
}
html[lang="en"] .cbs-demo-toc-lean-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
}
html[lang="en"] .cbs-demo-toc-lean{
background: #f8fafc;
padding: 4.5rem 0;
}
html[lang="en"] .cbs-demo-toc-lean h2{
color: #1a1a1a;
font-size: clamp(2.1rem, 3.2vw, 3rem);
line-height: 1.14;
margin: 0 0 1rem;
}
html[lang="en"] .cbs-demo-toc-lean-lead{
max-width: 720px;
margin: 0 0 1.6rem;
color: #666;
font-size: 1.15rem;
line-height: 1.7;
}
html[lang="en"] .cbs-demo-compare-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
max-width: 820px;
}
html[lang="en"] .cbs-demo-compare-card{
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 2rem;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
html[lang="en"] .cbs-demo-compare-card:hover{
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}
html[lang="en"] .cbs-demo-compare-card--highlight{
background: #f8fbff;
border-color: #bfdbfe;
}
html[lang="en"] .cbs-demo-compare-card h3{
margin: 0 0 0.65rem;
color: #1a1a1a;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
html[lang="en"] .cbs-demo-compare-card--highlight h3{
color: #1d4ed8;
}
html[lang="en"] .cbs-demo-compare-card p{
margin: 0;
color: #4b5563;
font-size: 1.02rem;
line-height: 1.65;
}
html[lang="en"] .cbs-demo-compare-card--highlight p{
color: #374151;
}
@media (max-width: 768px) {html[lang="en"] .cbs-demo-toc-lean-inner{
padding: 0 1.25rem;
}
html[lang="en"] .cbs-demo-compare-grid{
grid-template-columns: 1fr;
}
}
/* Block 6: scoped */
html[lang="en"] .hero{background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);color:white;padding:2rem 0 0.9rem}
html[lang="en"] .hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem;line-height:1.15}
html[lang="en"] .hero-text{font-size:1.2rem;margin-bottom:2rem;min-height:200px}
html[lang="en"] .hero-content.hero-content--single{grid-template-columns:1fr}
html[lang="en"] .hero-content.hero-content--single .hero-text{max-width:700px}
html[lang="en"] .hero-description{max-width:32rem}
html[lang="en"] .hero-subheadline-strong{display:block;font-weight:600;color:#1f2937;line-height:1.6}
html[lang="en"] .hero-subheadline-normal{display:block;margin-top:0.5rem;color:#6b7280;line-height:1.6}
html[lang="en"] .hero-eyebrow{display:block;font-size:.9rem;font-weight:600;color:#4b5563;margin-bottom:.75rem}
html[lang="en"] .hero-proof{margin-top:.75rem;font-size:.95rem;color:#6b7280}
html[lang="en"] .hero-content.hero-content--single .hero-buttons{justify-content:center}
html[lang="en"] html{scroll-behavior:smooth}
html[lang="en"] .hero-divider{margin-top:0.6rem;height:1px;background:#cbd5e1;max-width:32rem}
html[lang="en"] .hero-stats-strip{margin-top:0.6rem;padding-top:0;border-top:0;display:flex;flex-wrap:nowrap;gap:0.5rem;align-items:flex-start;max-width:32rem}
html[lang="en"] .hero-stats-strip .stat-item{flex:1 1 0;min-width:0;padding:0;border:0;background:transparent;box-shadow:none;text-align:left}
html[lang="en"] .hero-stats-strip .stat-number{font-size:1.5rem;font-weight:800;color:#111827;line-height:1.1}
html[lang="en"] .hero-stats-strip .stat-label{font-size:.9rem;color:#6b7280}
html[lang="en"] .hero-stats-strip .stat-divider{width:1px;background:#cbd5e1}
@media (max-width: 640px){html[lang="en"] .hero-stats-strip{flex-direction:row;flex-wrap:nowrap}
html[lang="en"] .hero-stats-strip .stat-divider{width:1px;height:auto;min-height:28px;background:#cbd5e1}
}
html[lang="en"] .hero-content.hero-content--single .btn{width:auto;max-width:none;padding:0.75rem 1.75rem}
html[lang="en"] .hero-content.hero-content--single .hero-buttons{margin-top:0.75rem}
html[lang="en"] #how-it-works{scroll-margin-top:96px}
@media (max-width: 768px){html[lang="en"] .hero{padding:2.5rem 0 0.55rem;background:#fff}
html[lang="en"] .hero-container{padding:0 1.25rem}
html[lang="en"] .hero-title{font-size:2.2rem;line-height:1.2;text-align:left}
html[lang="en"] .hero-description{font-size:1rem;line-height:1.6;text-align:left}
html[lang="en"] .hero-text{ text-align:left }
html[lang="en"] .hero-content.hero-content--single .hero-buttons{order:1;margin-top:0.85rem;justify-content:center}
html[lang="en"] .hero-divider{order:2;margin-top:0.4rem}
html[lang="en"] .hero-stats-strip{order:3;margin-top:0.35rem;padding-top:0;gap:0.25rem;flex-direction:row;flex-wrap:nowrap}
html[lang="en"] .hero-stats-strip .stat-item{flex:1 1 0;min-width:0;text-align:left;overflow:hidden;box-sizing:border-box}
html[lang="en"] .hero-stats-strip .stat-number{font-size:.9375rem;white-space:nowrap;line-height:1.1}
html[lang="en"] .hero-stats-strip .stat-label{font-size:.8125rem;white-space:normal}
html[lang="en"] .hero-stats-strip .stat-divider{align-self:stretch}
html[lang="en"] .hero-content.hero-content--single .hero-buttons{justify-content:center}
}
@media (max-width: 768px){html[lang="en"] .trusted-by{padding-top:1.75rem}
html[lang="en"] .trusted-by h2{margin-bottom:1rem}
html[lang="en"] .clients-carousel{margin-top:1rem}
}
html[lang="en"] .btn{display:inline-block;padding:1rem 2rem;background:#007bff;color:white;text-decoration:none;border-radius:5px}
html[lang="en"] .hero-image-img{width:100%;max-width:504px;height:auto;border-radius:12px;filter:none;margin-top:-20px;margin-bottom:0;margin-left:0;background:transparent;background-color:transparent;background-image:none;opacity:1;animation:none;display:block;transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94)}
html[lang="en"] .hero-image-img:hover{transform:scale(1.05) translateY(-5px);filter:none;box-shadow:none;opacity:1;transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94)}
html[lang="en"] .header{background:#000;color:white;padding:1rem 0}
html[lang="en"] .nav-container{display:flex;justify-content:space-between;align-items:center}
html[lang="en"] .logo{font-size:1.5rem;font-weight:700}
html[lang="en"] body{margin:0;font-family:'Inter',sans-serif}
html[lang="en"] *{box-sizing:border-box}
@font-face{font-family:'Inter';font-display:swap;src:url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2')}
/* Block 8: scoped */
html[lang="he"] #solution-heading{text-align:right}
html[lang="he"] .solution-text-section{text-align:right}
html[lang="he"] .solution-text{text-align:right;direction:rtl}
/* Block 9: scoped */
html[lang="en"] .solution-content{
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
html[lang="en"] .solution-text-section{
width: 100%;
margin-bottom: 2rem;
}
html[lang="en"] .solution-image-section{
display: flex;
justify-content: center;
margin: 2rem 0;
}
html[lang="en"] .solution-image{
max-width: 400px;
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {html[lang="en"] .solution-content{
padding: 0 15px;
}
html[lang="en"] .solution-image-section{
margin: 1.5rem 0;
}
html[lang="en"] .solution-image{
max-width: 300px;
}
}
@media (max-width: 480px) {html[lang="en"] .solution-image{
max-width: 250px;
}
}
/* Block 10: scoped */
html[lang="en"] .metric-text{
word-wrap: break-word;
hyphens: auto;
line-height: 1.4;
}
html[lang="en"] .metric-label{
word-wrap: break-word;
hyphens: auto;
line-height: 1.4;
white-space: normal;
}
html[lang="he"] .metric-text,
html[lang="he"] .metric-label {
text-align: right;
direction: rtl;
}
/* Block 11: scoped */
html[lang="en"] .hero-image{
display: block;
max-width: 504px; /* תקרת רוחב בדסקטופ, מתאים ל-sizes */
width: 100%;
height: auto;
}
html[lang="en"] .hero-image-img{
width: 100%;
height: auto;
object-fit: contain;
margin: 0;
animation: none;
display: block;
}
@media (max-width: 480px) {html[lang="en"] .hero{
padding-top: 60px; /* נותן מקום לחלק העליון של התמונה */
overflow: visible; /* מאפשר לתמונה להיכנס למעלה */
}
html[lang="en"] .hero-image{
margin-top: -50px; /* מעלה את התמונה במובייל (פחות מדי כדי לא לחתוך) */
margin-bottom: -40px; /* מצמצם רווח מההירו לטקסט הבא */
}
}
html[lang="en"] .hero-image{
max-width: 504px;
width: 100%;
height: auto;
}
html[lang="en"] .hero-image-img{
width: 100%;
max-width: 504px; /* 420px + 20% = 504px */
height: auto;
min-height: 0; /* מבטל את 464px אם נשאר איפשהו */
object-fit: contain;
margin: 0;
}
@media (max-width: 480px){html[lang="en"] .hero-image{ max-width: 309px; }
}
@media (min-width: 481px) and (max-width: 1024px) {html[lang="en"] .hero-image{
max-width: 500px;
margin: -30px auto 0 auto; /* מרכז את התמונה */
display: flex;
justify-content: center;
}
}
/* Block 12: scoped */
@media (min-width: 768px) and (max-width: 820px){html[lang="en"] .nav-container{ padding:0 0.5rem;}
html[lang="en"] .nav-menu{ gap:0.75rem;}
html[lang="en"] .nav-actions{ gap:0.5rem;}
html[lang="en"] .language-selector{ padding:0.25rem 0.5rem;}
html[lang="en"] .nav-link{ font-size:0.9rem;}
}
/* Block 13: scoped */
html[lang="en"] a.language-selector,
html[lang="en"] button.language-selector{text-decoration:none;background:transparent;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;display:flex;align-items:center;gap:0.5rem;color:#fff;padding:0.5rem 1rem;border-radius:6px;font-size:inherit;font-family:inherit}
html[lang="en"] a.language-selector:focus,
html[lang="en"] button.language-selector:focus{outline:2px solid #ff6b6b;outline-offset:2px}
/* Block 14: scoped */
html[lang="en"] .hero-content.hero-content--single .hero-text{max-width:780px}
html[lang="en"] .hero-title{font-size:3.75rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem}
html[lang="en"] .hero-text{text-align:left}
html[lang="en"] .hero-description{margin:0;max-width:40rem}
html[lang="en"] .hero-subheadline-strong{font-size:1.125rem;color:#1a1a1a;line-height:1.6}
html[lang="en"] .hero-subheadline-normal{font-size:1rem;color:#6b7280;line-height:1.6;margin-top:0.5rem}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons.he-hero-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.85rem;width:100%;max-width:100%;margin-right:0;margin-left:0;margin-top:1.75rem;margin-bottom:0}
html[lang="en"] .hero .btn-primary{height:50px;padding:0 24px;border-radius:9px;font-weight:600;transition:all 0.2s ease;width:auto;max-width:none}
html[lang="en"] .hero .btn-primary:hover{transform:translateY(-1px);filter:brightness(0.94)}
html[lang="en"] .hero-divider{margin-top:2rem;background:#e5e7eb}
html[lang="en"] .hero-stats-strip{margin-top:1.2rem;display:flex;flex-wrap:nowrap;gap:0.75rem;align-items:flex-start;max-width:40rem}
html[lang="en"] .hero-stats-strip .stat-item{flex:1 1 0;min-width:0;text-align:left;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;box-shadow:none;padding:1.05rem 1.1rem;min-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.35rem}
html[lang="en"] .hero-stats-strip .stat-number{display:block;font-size:1.6rem;font-weight:800;color:#111827;line-height:1.05;letter-spacing:-0.02em;margin:0}
html[lang="en"] .hero-stats-strip .stat-label{font-weight:700;color:#374151;font-size:1rem;line-height:1.35}
html[lang="en"] .hero-stats-strip .stat-divider{background:#e5e7eb}
html[lang="en"] .hero .hero-text,
html[lang="en"] .he-real-problem-inner{text-align:right}
html[lang="he"] .hero-text{direction:rtl;text-align:right}
html[lang="he"] .hero-buttons,html[lang="he"] .he-hero-cta-row,html[lang="he"] .hero .hero-text .hero-buttons,html[lang="he"] .hero .hero-text .he-hero-cta-row,html[lang="he"] .hero .hero-text .hero-buttons.he-hero-cta-row{direction:rtl;justify-content:flex-start}
html[lang="he"] .hero-stats-strip{direction:rtl}
html[lang="he"] .hero-stats-strip .stat-item{text-align:right}
html[lang="en"] .he-real-problem .he-hero-cta-row{width:100%;max-width:100%;margin-right:0;margin-left:0;direction:rtl;justify-content:flex-start}
html[lang="en"] .testimonial-actions{display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap;margin-top:2.35rem}
html[lang="en"] .real-results h2{text-align:center}
html[lang="en"] .results-subtitle{max-width:620px;margin-left:auto;margin-right:auto;margin-top:1rem;margin-bottom:2rem;color:#6b7280;line-height:1.7;text-align:center}
html[lang="en"] .results-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-bottom:2rem;align-items:stretch}
html[lang="en"] .result-card{position:relative;background:#ffffff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 1px 3px rgba(15,23,42,0.05),0 1px 2px rgba(15,23,42,0.03);padding:1.45rem 1.3rem 1.35rem;text-align:right;display:flex;flex-direction:column;height:100%;overflow:hidden}
html[lang="en"] .company-logo{width:100px;height:100px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px}
html[lang="en"] .company-logo img,
html[lang="en"] .company-logo-img{max-width:72px;max-height:72px;width:auto;height:auto;object-fit:contain}
html[lang="en"] .metric-label{font-size:1.02rem;color:#374151;line-height:1.58}
html[lang="en"] .trusted-by #trusted-heading{font-size:1.45rem;font-weight:700;color:#6b7280;margin:0 0 1.55rem;text-align:center}
html[lang="en"] .carousel-logo{max-width:156px;max-height:60px;width:auto;height:auto;object-fit:contain}
html[lang="en"] .about .card-icon{display:flex;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:1rem;border-radius:999px;background:#f8fafc;border:1px solid #e5e7eb;flex:0 0 80px}
html[lang="en"] .about .card-icon svg,
html[lang="en"] .about .card-icon-img{width:46px;height:46px;object-fit:contain;display:block}
@media (max-width: 768px){html[lang="en"] .hero{padding:2.75rem 0 0.55rem}
html[lang="en"] .hero-container{padding:0 1.25rem}
html[lang="en"] .hero-title{font-size:2.375rem;line-height:1.2;text-align:left}
html[lang="en"] .hero-text{text-align:left}
html[lang="en"] .hero-description{text-align:left}
html[lang="en"] .hero-subheadline-strong{font-size:1rem}
html[lang="en"] .hero-subheadline-normal{font-size:0.9375rem;margin-top:0.5rem}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons.he-hero-cta-row{width:100%;max-width:100%;margin-top:1.4rem;margin-right:0;margin-left:0;margin-bottom:0}
html[lang="en"] .hero-divider{margin-top:2rem}
html[lang="en"] .hero-stats-strip{margin-top:0.95rem;gap:0.5rem}
html[lang="en"] .hero-stats-strip .stat-item{text-align:left}
html[lang="en"] .hero-stats-strip .stat-divider{display:none}
html[lang="en"] .hero-stats-strip .stat-item{min-height:88px;padding:0.95rem 1rem;gap:0.25rem}
html[lang="en"] .hero-stats-strip .stat-number{font-size:1.28rem;line-height:1.05}
html[lang="en"] .hero-stats-strip .stat-label{font-size:0.94rem;line-height:1.3}
html[lang="he"] .hero-text{text-align:right}
html[lang="he"] .hero-description{text-align:right}
html[lang="he"] .hero-title{text-align:right}
html[lang="he"] .hero-buttons,html[lang="he"] .he-hero-cta-row,html[lang="he"] .hero .hero-text .hero-buttons,html[lang="he"] .hero .hero-text .he-hero-cta-row,html[lang="he"] .hero .hero-text .hero-buttons.he-hero-cta-row{direction:rtl;justify-content:flex-start}
html[lang="he"] .hero-stats-strip .stat-item{text-align:right}
html[lang="en"] .result-card{padding:1.15rem}
html[lang="en"] .company-logo{width:92px;height:92px}
html[lang="en"] .company-logo img,
html[lang="en"] .company-logo-img{max-width:68px;max-height:68px}
html[lang="en"] .carousel-logo{max-width:146px;max-height:56px}
html[lang="en"] .about .card-icon{width:72px;height:72px;flex:0 0 72px}
html[lang="en"] .about .card-icon svg,
html[lang="en"] .about .card-icon-img{width:42px;height:42px}
}
/* Block 16: already-scoped */
@media (min-width: 900px) {
html[lang="en"] .hero {
padding: 2.8rem 0 1.4rem;
}
html[lang="en"] .hero-container {
max-width: 1200px;
}
html[lang="en"] .hero-content.hero-content--single.cbs-demo-hero-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
html[lang="en"] .hero-content.hero-content--single.cbs-demo-hero-grid .hero-text {
order: 1;
min-height: 0;
margin-bottom: 0;
max-width: 560px;
text-align: left;
}
html[lang="en"] .hero-title {
font-size: clamp(3.25rem, 5vw, 4.45rem);
line-height: 1.08;
margin-bottom: 1.35rem;
letter-spacing: -0.045em;
}
html[lang="en"] .hero-description {
max-width: 34rem;
margin-bottom: 0;
}
html[lang="en"] .constraint-visual {
order: 2;
width: min(560px, 100%);
margin: 0;
opacity: 0.96;
justify-self: center;
}
html[lang="en"] .he-value-strip {
padding-top: 1.25rem;
padding-bottom: 1.15rem;
}
}
@media (max-width: 899px) {
html[lang="en"] .constraint-visual {
width: min(460px, 100%);
margin: 1rem auto 0;
}
}
/* Block 17: scoped */
.bk-pd{opacity:0}
@keyframes bk-gp{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bk-ring{0%{r:20;opacity:.55}100%{r:62;opacity:0}}
@keyframes bk-pp{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.bk-ggl{animation:bk-gp 2.8s ease-in-out infinite}
.bk-rng1{animation:bk-ring 2.2s ease-out infinite}
.bk-rng2{animation:bk-ring 2.2s ease-out 1.1s infinite}
.bk-pill{animation:bk-pp 2.8s ease-in-out infinite;transform-origin:340px 130px}
@media(min-width:481px){html[lang="en"] .hero-bg-anim{position:absolute;right:0;top:50%;transform:translateY(-50%);width:62%;pointer-events:none;z-index:0}
html[lang="en"] .hero-bg-anim svg{width:100%;height:auto;display:block}
}
html[lang="en"] .hero-text-layer{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.bk-pd,
.bk-ggl,
.bk-rng1,
.bk-rng2,
.bk-pill{animation:none}
}
@media(max-width:1023px) and (min-width:481px){html[lang="en"] .hero-bg-anim{position:relative;top:auto;transform:none;width:100%;margin-top:1.5rem;opacity:0.7}
}
/* Block 18: en-homepage-parity (dead @media removed) */
html[lang="en"] .hero-title,
html[lang="en"] .hero-description,
html[lang="en"] .problem-text,
html[lang="en"] .hero-stats,
html[lang="en"] .hero .btn,
html[lang="en"] .hero .btn-primary,
html[lang="en"] .hero .btn-secondary,
html[lang="en"] .hero .btn-hero-primary,
html[lang="en"] .hero .btn-hero-secondary,
html[lang="en"] .hero-buttons,
html[lang="en"] .hero-buttons > *,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .he-hero-cta-row > *,
html[lang="en"] .hero .hero-text,
html[lang="en"] .hero .hero-text > *,
html[lang="en"] .client-logo {
animation: none;
opacity: 1;
}
html[lang="en"] .hero,
html[lang="en"] .he-value-strip,
html[lang="en"] .he-real-problem,
html[lang="en"] .execution-shift,
html[lang="en"] .solution,
html[lang="en"] .real-results,
html[lang="en"] .testimonial,
html[lang="en"] .he-logos-static,
html[lang="en"] .faq,
html[lang="en"] .final-cta,
html[lang="en"] .quick-links.he-quick-links {
box-shadow: none;
}
html[lang="en"] .hero {
background: #ffffff;
color: #111827;
padding: 1.55rem 0 0.5rem;
border-bottom: 0;
}
html[lang="en"] .hero .hero-container,
html[lang="en"] .he-value-strip-inner,
html[lang="en"] .solution-container,
html[lang="en"] .results-container,
html[lang="en"] .testimonial-container,
html[lang="en"] .trusted-by-container,
html[lang="en"] .faq-container,
html[lang="en"] .cta-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="en"] .hero-content.hero-content--single .hero-text {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
text-align: left;
}
html[lang="en"] .hero-title {
max-width: 100%;
font-size: clamp(3.25rem, 5vw, 4.7rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.045em;
margin: 0 0 1.05rem;
color: #111827;
text-align: left;
}
html[lang="en"] .hero-description,
html[lang="en"] .hero-subheadline-strong {
max-width: 42rem;
text-align: left;
}
html[lang="en"] .hero-subheadline-strong {
font-size: 1.04rem;
line-height: 1.72;
font-weight: 600;
color: #111827;
}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row {
justify-content: flex-start;
gap: 0.75rem;
margin-top: 1.15rem;
margin-bottom: 0;
direction: ltr;
}
html[lang="en"] .btn.btn-primary,
html[lang="en"] .btn-hero-secondary,
html[lang="en"] .cta-button,
html[lang="en"] .results-cta .btn.btn-primary,
html[lang="en"] .final-cta .btn.btn-primary,
html[lang="en"] .testimonial-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
box-shadow: none;
width: auto;
max-width: none;
}
html[lang="en"] .btn.btn-primary,
html[lang="en"] .cta-button,
html[lang="en"] .results-cta .btn.btn-primary,
html[lang="en"] .final-cta .btn.btn-primary,
html[lang="en"] .testimonial-link-btn {
background: #C62828;
border: 1px solid #C62828;
color: #ffffff;
}
html[lang="en"] .btn.btn-primary:hover,
html[lang="en"] .cta-button:hover,
html[lang="en"] .results-cta .btn.btn-primary:hover,
html[lang="en"] .final-cta .btn.btn-primary:hover,
html[lang="en"] .testimonial-link-btn:hover {
background: #B71C1C;
border-color: #B71C1C;
transform: translateY(-1px);
}
html[lang="en"] .btn-hero-secondary,
html[lang="en"] .results-link a {
background: transparent;
color: #111827;
border: 1px solid #e5e7eb;
}
html[lang="en"] .testimonial-link-btn--secondary {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
html[lang="en"] .btn-hero-secondary {
color: #C62828;
border-color: #C62828;
}
html[lang="en"] .btn-hero-secondary:hover {
background: #fef2f2;
color: #B71C1C;
border-color: #B71C1C;
transform: translateY(-1px);
}
html[lang="en"] .results-link a:hover {
background: #f8fafc;
border-color: #d1d5db;
color: #111827;
}
html[lang="en"] .testimonial-link-btn--secondary:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.55);
color: #ffffff;
}
html[lang="en"] .he-value-strip {
background: #ffffff;
padding: 2rem 0;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
html[lang="en"] .he-value-strip-inner {
box-sizing: border-box;
}
html[lang="en"] .he-value-strip-label {
box-sizing: border-box;
max-width: var(--align-strip-max);
margin-left: max(0px, calc((100% - var(--align-hero-max)) / 2));
margin-right: max(
0px,
calc(
(100% - var(--align-hero-max)) / 2 +
(var(--align-hero-max) - var(--align-strip-max))
)
);
margin-top: 0;
margin-bottom: 0.5rem;
color: #6b7280;
text-align: left;
font-size: 1rem;
font-weight: 800;
}
html[lang="en"] .he-value-strip .hero-stats-strip {
width: 100%;
max-width: var(--align-strip-max);
margin-left: max(0px, calc((100% - var(--align-hero-max)) / 2));
margin-right: max(
0px,
calc(
(100% - var(--align-hero-max)) / 2 +
(var(--align-hero-max) - var(--align-strip-max))
)
);
gap: 0.55rem;
}
html[lang="en"] .he-value-strip .stat-item {
justify-content: flex-start;
min-height: 102px;
padding: 0.85rem 0.55rem;
}
html[lang="en"] .he-value-strip .stat-number {
font-size: clamp(1.7rem, 3.4vw, 2.45rem);
line-height: 1;
min-height: 1em;
white-space: nowrap;
}
html[lang="en"] .he-value-strip .stat-label {
font-size: 1rem;
line-height: 1.35;
}
html[lang="en"] .he-real-problem {
padding: 4.5rem 0;
background: #ffffff;
border-top: 0;
}
html[lang="en"] .he-real-problem-inner {
max-width: 62.5rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
box-sizing: border-box;
}
html[lang="en"] .he-real-problem-label {
margin: 0 0 0.4rem;
font-size: 0.9rem;
font-weight: 700;
color: #6b7280;
text-align: left;
}
html[lang="en"] .he-real-problem h2 {
max-width: 850px;
font-size: clamp(2.1rem, 3.2vw, 3rem);
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 1rem;
text-align: center;
}
html[lang="en"] .he-real-problem-lead {
max-width: 52rem;
margin-top: 0;
margin-bottom: 2.1rem;
margin-left: auto;
margin-right: auto;
font-size: 1.1rem;
line-height: 1.78;
color: #4b5563;
text-align: center;
}
html[lang="en"] .he-real-problem-fit {
max-width: 48rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
html[lang="en"] .he-real-problem-grid {
gap: 1rem;
margin-bottom: 1.45rem;
}
html[lang="en"] .he-real-problem-card {
padding: 1.85rem 1.6rem;
text-align: left;
border-radius: 16px;
background: #ffffff;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
}
html[lang="en"] .he-real-problem-card h3 {
font-size: 1.1rem;
line-height: 1.35;
}
html[lang="en"] .he-real-problem-card p,
html[lang="en"] .he-real-problem-fit {
font-size: 1.02rem;
line-height: 1.7;
text-align: left;
}
html[lang="en"] .execution-shift {
background: #f8fafc;
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
html[lang="en"] .execution-shift-container {
max-width: 1180px;
margin: 0 auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="en"] .execution-shift-panel {
position: relative;
margin: 0 auto;
padding: 2.2rem 2.2rem 2.4rem;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
border: 1px solid #e5e7eb;
border-radius: 32px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 50px rgba(15, 23, 42, 0.07);
overflow: hidden;
}
html[lang="en"] .execution-shift-panel::before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: auto;
transform: translateX(-50%);
width: 96px;
height: 4px;
border-radius: 999px;
background: #C62828;
}
html[lang="en"] .execution-shift-header {
max-width: 760px;
margin: 0 auto 2rem;
text-align: center;
}
html[lang="en"] .execution-shift-layout {
display: grid;
grid-template-columns: minmax(320px, 500px) minmax(0, 1fr);
gap: 3rem;
align-items: center;
}
html[lang="en"] .execution-shift-visual {
margin: 0;
border-radius: 26px;
overflow: hidden;
border: 1px solid #e5e7eb;
background: #f8fafc;
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}
html[lang="en"] .execution-shift-visual picture,
html[lang="en"] .execution-shift-visual img {
display: block;
width: 100%;
}
html[lang="en"] .execution-shift-visual img {
height: auto;
}
html[lang="en"] .execution-shift-copy {
max-width: 39rem;
text-align: left;
}
html[lang="en"] .execution-shift-text,
html[lang="en"] .execution-shift-summary {
margin: 0;
font-size: 1.15rem;
line-height: 1.82;
}
html[lang="en"] .execution-shift-text {
color: #4b5563;
}
html[lang="en"] .execution-shift-summary {
margin-top: 1rem;
color: #111827;
}
html[lang="en"] .real-results h2,
html[lang="en"] .faq h2,
html[lang="en"] .final-cta h2 {
text-align: center;
position: static;
}
html[lang="en"] .solution h2 {
width: fit-content;
}
html[lang="en"] .real-results h2::after,
html[lang="en"] .solution h2::after,
html[lang="en"] .faq h2::after,
html[lang="en"] .final-cta h2::after {
content: "";
position: static;
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
margin: 0.85rem auto 0;
background: #C62828;
transform: none;
bottom: auto;
left: auto;
}
html[lang="en"] .solution h2::after {
margin-left: 0;
margin-right: auto;
}
html[lang="en"] .testimonial-content:hover,
html[lang="en"] .testimonial-content.secondary:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: none;
}
html[lang="en"] .testimonial-content.secondary:hover {
transform: translateY(-12px);
}
html[lang="en"] .testimonial-content:hover .testimonial-quote,
html[lang="en"] .testimonial-content:hover .author-info h3,
html[lang="en"] .testimonial-content:hover .author-info p {
transform: none;
}
html[lang="en"] .execution-shift h2,
html[lang="en"] .solution h2,
html[lang="en"] .real-results h2,
html[lang="en"] .testimonial h2,
html[lang="en"] .faq h2,
html[lang="en"] .final-cta h2,
html[lang="en"] .he-logos-static #trusted-heading {
font-size: clamp(2.1rem, 3.2vw, 3rem);
line-height: 1.15;
font-weight: 800;
letter-spacing: -0.02em;
}
html[lang="en"] .execution-shift-subhead,
html[lang="en"] .results-subtitle,
html[lang="en"] .cta-text {
color: #6b7280;
line-height: 1.75;
}
html[lang="en"] .solution,
html[lang="en"] .real-results,
html[lang="en"] .he-logos-static,
html[lang="en"] .faq {
background: #ffffff;
}
html[lang="en"] .testimonial,
html[lang="en"] .final-cta {
background: #111827;
color: #ffffff;
}
html[lang="en"] .testimonial,
html[lang="en"] .real-results,
html[lang="en"] .he-logos-static,
html[lang="en"] .solution,
html[lang="en"] .faq,
html[lang="en"] .final-cta {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
html[lang="en"] .solution-container {
max-width: 62.5rem;
}
html[lang="en"] .solution-content {
display: block;
max-width: none;
padding: 0;
}
html[lang="en"] .solution-text-section {
width: 100%;
margin: 0;
text-align: left;
}
html[lang="en"] .solution-text-content {
max-width: 48rem;
}
html[lang="en"] .solution h2 {
margin: 0 0 1rem;
text-align: center;
color: #111827;
}
html[lang="en"] .solution-text {
font-size: 1.08rem;
line-height: 1.85;
color: #4b5563;
text-align: left;
margin: 0 0 1rem;
max-width: 48rem;
}
html[lang="en"] .solution-text:last-child {
margin-bottom: 0;
}
html[lang="en"] .solution-text-section:last-child .solution-text-content {
padding-top: 1.2rem;
max-width: none;
}
html[lang="en"] .internal-link {
font-weight: 600;
color: #1e40af;
text-decoration-thickness: 1px;
}
html[lang="en"] .results-subtitle {
max-width: 580px;
margin: 1rem auto 1.9rem;
text-align: center;
}
html[lang="en"] .results-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.95rem;
align-items: stretch;
}
html[lang="en"] .result-card {
padding: 1.9rem 1.55rem 1.45rem;
border-radius: 18px;
text-align: left;
display: flex;
flex-direction: column;
min-height: 100%;
align-self: stretch;
}
html[lang="en"] .company-logo {
height: 116px;
min-height: 116px;
margin: 0 0 1.35rem;
width: auto;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
html[lang="en"] .company-logo img,
html[lang="en"] .company-logo-img {
max-width: 312px;
max-height: 78px;
filter: grayscale(75%);
opacity: 0.86;
}
html[lang="en"] .company-logo--army .company-logo-img {
max-width: 338px;
max-height: 78px;
opacity: 0.9;
}
html[lang="en"] .result-card:hover .company-logo img,
html[lang="en"] .result-card:hover .company-logo-img {
filter: grayscale(0%);
opacity: 1;
}
html[lang="en"] .result-kpi {
margin: 0 0 1.05rem;
padding: 0 0 0.95rem;
border-bottom: 1px solid #d1d5db;
}
html[lang="en"] .result-kpi-number {
font-size: clamp(2.9rem, 3.8vw, 4.2rem);
letter-spacing: -0.05em;
}
html[lang="en"] .result-kpi-label {
margin-top: 0.45rem;
font-size: 0.96rem;
line-height: 1.58;
}
html[lang="en"] .result-card .result-metrics {
gap: 0.72rem;
flex: 1 1 auto;
}
html[lang="en"] .result-card .metric {
gap: 0.65rem;
align-items: flex-start;
}
html[lang="en"] .result-card .metric-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(22, 163, 74, 0.12);
color: #16A34A;
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
padding: 0;
font-size: 0;
}
html[lang="en"] .result-card .metric-icon svg {
width: 12px;
height: 12px;
display: block;
}
html[lang="en"] .result-card .metric-text,
html[lang="en"] .result-card .metric-label {
text-align: left;
line-height: 1.52;
}
html[lang="en"] .results-cta {
margin-top: 2.2rem;
gap: 1rem;
}
html[lang="en"] .results-link a {
min-height: 48px;
padding: 12px 24px;
}
html[lang="en"] .testimonial h2,
html[lang="en"] .final-cta h2 {
color: #ffffff;
}
html[lang="en"] .testimonial-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
align-items: stretch;
}
html[lang="en"] .testimonial-content,
html[lang="en"] .testimonial-content.secondary {
position: relative;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
padding: 1.75rem 1.7rem 1.65rem;
min-height: 255px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: none;
}
html[lang="en"] .testimonial-content.secondary {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-10px);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
html[lang="en"] .testimonial-quote {
position: relative;
padding-top: 1.45rem;
margin: 0 0 1.65rem;
font-size: 1.04rem;
line-height: 1.85;
font-style: normal;
font-weight: 500;
color: #f3f4f6;
}
html[lang="en"] .testimonial-quote::before {
content: '\"';
position: absolute;
top: -0.15rem;
left: 0;
right: auto;
width: auto;
height: auto;
background: none;
color: rgba(255, 255, 255, 0.22);
font-size: 3rem;
line-height: 1;
font-weight: 800;
margin: 0;
}
html[lang="en"] .testimonial-author {
justify-content: center;
padding-top: 1.05rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html[lang="en"] .author-info h3 {
color: #ffffff;
margin: 0 0 0.35rem;
font-size: 1.16rem;
}
html[lang="en"] .author-info p {
color: #d1d5db;
font-size: 0.94rem;
line-height: 1.6;
}
html[lang="en"] .testimonial-actions {
margin-top: 3rem;
gap: 1rem;
}
html[lang="en"] .he-logos-static {
background: #f8fafc;
border-top: 1px solid #e5e7eb;
}
html[lang="en"] .he-logos-static #trusted-heading {
color: #111827;
margin-bottom: 1.6rem;
}
html[lang="en"] .he-logos-grid {
max-width: 1020px;
gap: 0.9rem 1rem;
}
html[lang="en"] .he-logo-cell {
height: 80px;
min-height: 80px;
padding: 0.55rem 0.7rem;
overflow: hidden;
border-color: #edf0f4;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 20px rgba(15, 23, 42, 0.035);
}
html[lang="en"] .he-logo-cell img {
max-width: 190px;
max-height: 70px;
opacity: 0.92;
transform: scale(1.16);
}
html[lang="en"] .he-logo-cell img.carousel-logo-iai {
max-width: 150px;
max-height: 56px;
transform: none;
}
html[lang="en"] .he-logo-cell img.carousel-logo-ntrig {
max-width: 190px;
max-height: 70px;
transform: scale(1.75);
}
html[lang="en"] .faq {
background: #ffffff;
}
html[lang="en"] .faq h2 {
color: #111827;
}
html[lang="en"] .final-cta .cta-text {
color: #d1d5db;
}
html[lang="en"] .quick-links.he-quick-links {
background: #f8fafc;
padding: 1.75rem 1.25rem 2.25rem;
border-top: 1px solid rgba(0,0,0,.06);
}
html[lang="en"] .quick-links.he-quick-links h2 {
font-size: 1.2rem;
line-height: 1.3;
font-weight: 700;
color: #111827;
margin: 0 0 0.5rem;
text-align: center;
}
html[lang="en"] .quick-links.he-quick-links .learn-more-text {
max-width: 32rem;
margin: 0 auto 1rem;
color: #6b7280;
line-height: 1.65;
text-align: center;
font-size: 0.95rem;
}
html[lang="en"] .quick-links.he-quick-links ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.6rem 0.75rem;
max-width: 52rem;
}
html[lang="en"] .quick-links.he-quick-links a {
display: inline-block;
padding: 0.55rem 1rem;
font-size: 0.88rem;
font-weight: 600;
color: #111827;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
white-space: nowrap;
}
html[lang="en"] .quick-links.he-quick-links a:hover,
html[lang="en"] .quick-links.he-quick-links a:focus-visible {
background: #f9fafb;
border-color: #d1d5db;
color: #111827;
text-decoration: none;
transform: translateY(-1px);
}
html[lang="en"] .quick-links.he-quick-links a.primary-cta {
background: #C62828;
border-color: #C62828;
color: #ffffff;
}
html[lang="en"] .quick-links.he-quick-links a.primary-cta:hover,
html[lang="en"] .quick-links.he-quick-links a.primary-cta:focus-visible {
background: #B71C1C;
border-color: #B71C1C;
color: #ffffff;
}
html[lang="en"] .footer-menu,
html[lang="en"] .footer-menu li,
html[lang="en"] .footer-menu .footer-link {
text-align: left;
align-items: flex-start;
justify-content: flex-start;
}
@media (max-width: 820px) {
html[lang="en"] .testimonial,
html[lang="en"] .real-results,
html[lang="en"] .he-logos-static,
html[lang="en"] .solution,
html[lang="en"] .faq,
html[lang="en"] .final-cta,
html[lang="en"] .execution-shift {
padding-top: 3.25rem;
padding-bottom: 3.25rem;
}
html[lang="en"] .execution-shift-panel {
padding: 1.7rem 1.3rem 1.9rem;
border-radius: 22px;
}
html[lang="en"] .execution-shift-layout {
grid-template-columns: 1fr;
gap: 1.75rem;
}
html[lang="en"] .execution-shift-header {
margin-bottom: 1.4rem;
}
html[lang="en"] .execution-shift-copy {
max-width: none;
}
html[lang="en"] .results-grid,
html[lang="en"] .testimonial-grid,
html[lang="en"] .he-logos-grid {
grid-template-columns: 1fr;
}
html[lang="en"] .he-logos-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[lang="en"] .testimonial-content.secondary {
transform: none;
}
html[lang="en"] .testimonial-actions,
html[lang="en"] .results-cta {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
html[lang="en"] .testimonial-link-btn,
html[lang="en"] .results-cta .btn.btn-primary,
html[lang="en"] .results-link a {
width: 100%;
max-width: 100%;
}
html[lang="en"] .hero-title {
max-width: none;
font-size: 2.375rem;
line-height: 1.2;
margin-bottom: 1rem;
}
html[lang="en"] .hero-subheadline-strong {
font-size: 1rem;
line-height: 1.72;
}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-top: 1.4rem;
}
html[lang="en"] .btn.btn-primary,
html[lang="en"] .btn-hero-secondary {
width: 100%;
max-width: 100%;
min-height: 52px;
}
}
@media (min-width: 821px) {
html[lang="en"] .header {
background: #1a1a1a;
box-shadow: none;
border-bottom: 0;
height: 84px;
padding: 0;
}
html[lang="en"] .nav-container {
max-width: 1200px;
padding-left: 1.25rem;
padding-right: 1.25rem;
min-height: 84px;
height: 84px;
display: flex;
align-items: center;
justify-content: space-between;
}
html[lang="en"] .nav-menu {
gap: 2rem;
align-items: center;
}
html[lang="en"] .nav-link,
html[lang="en"] .language-selector {
font-weight: 700;
}
html[lang="en"] .footer {
background: #1a1a1a;
color: #ffffff;
border-top: 0;
margin-top: 0;
}
html[lang="en"] .footer-container {
max-width: 1200px;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
html[lang="en"] .footer-content {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.85fr);
align-items: start;
column-gap: 3.25rem;
}
html[lang="en"] .hero {
padding: 1.35rem 0 0.15rem;
}
html[lang="en"] .hero .hero-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
box-sizing: border-box;
}
html[lang="en"] .hero-content.hero-content--single .hero-text {
max-width: 60rem;
}
html[lang="en"] .hero-title {
max-width: 100%;
margin-bottom: 0.9rem;
font-size: clamp(3.4rem, 5vw, 4.85rem);
line-height: 1.02;
}
html[lang="en"] .hero-description,
html[lang="en"] .hero-subheadline-strong {
max-width: 41rem;
}
html[lang="en"] .hero-subheadline-strong {
font-size: 1rem;
line-height: 1.68;
}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row {
gap: 0.8rem;
margin-top: 1rem;
}
html[lang="en"] .he-value-strip {
padding: 2rem 0;
}
html[lang="en"] .he-value-strip-label {
margin-bottom: 0.45rem;
}
html[lang="en"] .he-value-strip .hero-stats-strip {
gap: 0.7rem;
}
html[lang="en"] .he-value-strip .stat-item {
min-height: 102px;
padding: 0.95rem 0.7rem;
}
html[lang="en"] .he-value-strip .stat-number {
font-size: clamp(1.7rem, 3.4vw, 2.45rem);
}
html[lang="en"] .results-subtitle {
margin: 0.95rem auto 1.75rem;
}
html[lang="en"] .results-grid {
gap: 1.1rem;
}
html[lang="en"] .result-card {
padding: 2rem 1.65rem 1.5rem;
border-radius: 22px;
background: #ffffff;
border: 1px solid #dfe5ee;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
html[lang="en"] .company-logo {
min-height: 84px;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}
html[lang="en"] .result-kpi {
text-align: center;
margin-bottom: 1.15rem;
padding-bottom: 1rem;
}
html[lang="en"] .result-kpi-label {
max-width: 13rem;
margin-left: auto;
margin-right: auto;
}
html[lang="en"] .result-card .result-metrics {
margin-top: 0.15rem;
gap: 0.78rem;
}
html[lang="en"] .result-card .metric {
align-items: flex-start;
}
html[lang="en"] .result-card .metric-label {
font-size: 0.94rem;
line-height: 1.5;
}
html[lang="en"] .testimonial {
background: #111827;
}
html[lang="en"] .testimonial-container {
max-width: 1200px;
}
html[lang="en"] .testimonial h2 {
margin-bottom: 1rem;
}
html[lang="en"] .testimonial-grid {
gap: 1.1rem;
}
html[lang="en"] .testimonial-content,
html[lang="en"] .testimonial-content.secondary {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: none;
min-height: 255px;
padding: 1.75rem 1.65rem 1.55rem;
}
html[lang="en"] .testimonial-content.secondary {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-8px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}
html[lang="en"] .testimonial-quote {
font-size: 1.02rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
html[lang="en"] .testimonial-actions {
margin-top: 2.55rem;
}
html[lang="en"] .quick-links.he-quick-links {
background: #f8fafc;
padding: 1.65rem 1.25rem 2.15rem;
}
html[lang="en"] .quick-links.he-quick-links h2 {
margin-bottom: 0.45rem;
}
html[lang="en"] .quick-links.he-quick-links .learn-more-text {
max-width: 30rem;
margin-bottom: 0.95rem;
}
html[lang="en"] .quick-links.he-quick-links ul {
gap: 0.65rem 0.75rem;
max-width: 48rem;
}
html[lang="en"] .quick-links.he-quick-links a {
border-radius: 10px;
padding: 0.58rem 1rem;
color: #1f2937;
}
html[lang="en"] .quick-links.he-quick-links a.primary-cta {
padding-left: 1.15rem;
padding-right: 1.15rem;
color: #ffffff;
}
html[lang="en"] .he-value-strip-inner {
max-width: 1200px;
}
}
@media (max-width: 480px) {
html[lang="en"],
html[lang="en"] body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
html[lang="en"] .nav-container,
html[lang="en"] .hero .hero-container,
html[lang="en"] .he-value-strip-inner,
html[lang="en"] .he-real-problem-inner,
html[lang="en"] .execution-shift-container,
html[lang="en"] .solution-container,
html[lang="en"] .results-container,
html[lang="en"] .testimonial-container,
html[lang="en"] .trusted-by-container,
html[lang="en"] .faq-container,
html[lang="en"] .cta-container {
width: 100%;
max-width: 100%;
padding-left: 1.25rem;
padding-right: 1.25rem;
overflow-x: hidden;
}
html[lang="en"] .he-value-strip-label {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
html[lang="en"] .logo {
font-size: 1.28rem;
line-height: 1.15;
max-width: calc(100vw - 7.5rem);
white-space: normal;
}
html[lang="en"] .nav-actions {
min-width: 0;
gap: 0.6rem;
flex-shrink: 0;
}
html[lang="en"] .language-selector {
min-width: 0;
padding: 0.35rem 0;
}
html[lang="en"] .hero-content,
html[lang="en"] .hero-content.hero-content--single,
html[lang="en"] .hero-content.hero-content--single .hero-text,
html[lang="en"] .hero-title,
html[lang="en"] .hero-description,
html[lang="en"] .hero-subheadline-strong,
html[lang="en"] .he-real-problem h2,
html[lang="en"] .he-real-problem-lead,
html[lang="en"] .he-real-problem-card,
html[lang="en"] .he-real-problem-card p,
html[lang="en"] .he-real-problem-fit {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
word-break: normal;
}
html[lang="en"] .hero-title {
font-size: clamp(2.35rem, 12vw, 2.8rem);
line-height: 1.12;
}
html[lang="en"] .he-value-strip .hero-stats-strip {
display: grid;
grid-template-columns: 1fr;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
gap: 0.65rem;
}
html[lang="en"] .he-value-strip .stat-divider {
display: none;
}
html[lang="en"] .he-value-strip .stat-item {
width: 100%;
min-width: 0;
min-height: 82px;
align-items: flex-start;
text-align: left;
padding: 0.85rem 1rem;
}
html[lang="en"] .he-value-strip .stat-label {
font-size: 0.9rem;
overflow-wrap: anywhere;
}
html[lang="en"] .he-real-problem-grid {
grid-template-columns: 1fr;
}
html[lang="en"] #cookie-note {
left: 1rem;
right: 1rem;
bottom: 1rem;
width: auto;
max-width: calc(100vw - 2rem);
box-sizing: border-box;
}
}
/* Block 19: id="en-logo-treatment" */
html[lang="en"] .header .logo,
html[lang="en"] .logo {
direction: ltr;
unicode-bidi: isolate;
white-space: nowrap;
}
@media (max-width: 1320px) {
html[lang="en"] .header .nav-container,
html[lang="en"] .nav-container {
width: 100%;
max-width: 1200px;
padding-left: 1.25rem;
padding-right: 1.25rem;
gap: 0.75rem;
overflow: visible;
}
html[lang="en"] .header .logo,
html[lang="en"] .logo {
min-width: 0;
max-width: 58vw;
overflow: hidden;
text-overflow: clip;
font-size: 0.9rem;
flex: 0 0 auto;
}
html[lang="en"] .header .nav-actions,
html[lang="en"] .nav-actions {
flex-shrink: 0;
gap: 0.5rem;
}
html[lang="en"] .header .language-selector,
html[lang="en"] .language-selector {
padding: 0.35rem 0.45rem;
}
html[lang="en"] .header .nav-menu,
html[lang="en"] .nav-menu {
display: none;
}
html[lang="en"] .header .nav-menu.mobile-open,
html[lang="en"] .nav-menu.mobile-open {
display: flex;
}
html[lang="en"] .header .hamburger-menu,
html[lang="en"] .hamburger-menu {
display: flex;
}
}
@media (min-width: 700px) and (max-width: 1320px) {
html[lang="en"] .header .logo,
html[lang="en"] .logo {
max-width: 70vw;
font-size: 1.35rem;
}
}
@media (max-width: 820px) {
html[lang="en"] .header {
padding: 0;
}
html[lang="en"] .header .nav-container,
html[lang="en"] .nav-container {
width: 100vw;
max-width: 100vw;
height: 88px;
min-height: 88px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: visible;
margin: 0;
}
html[lang="en"] .header .logo,
html[lang="en"] .logo {
position: fixed;
left: 24px;
right: auto;
top: 44px;
transform: translateY(-50%);
width: 176px;
max-width: 36vw;
display: block;
font-size: 0.84rem;
line-height: 1.08;
letter-spacing: 0.01em;
color: #fff;
white-space: normal;
overflow: visible;
text-overflow: clip;
text-align: left;
flex: 0 0 auto;
z-index: 1002;
}
html[lang="en"] .header .logo .cbs,
html[lang="en"] .logo .cbs {
display: inline;
font-size: 1.08em;
letter-spacing: 0.08em;
color: #2563eb;
}
html[lang="en"] .header .nav-menu,
html[lang="en"] .nav-menu {
display: none;
}
html[lang="en"] .header .nav-menu.mobile-open,
html[lang="en"] .nav-menu.mobile-open {
display: flex;
position: fixed;
top: 88px;
left: 50%;
right: auto;
transform: translateX(-50%);
width: calc(100vw - 32px);
max-width: 520px;
max-height: calc(100vh - 112px);
overflow: auto;
background: rgba(26, 26, 26, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border-radius: 14px;
box-sizing: border-box;
z-index: 1003;
}
html[lang="en"] .header .nav-menu.mobile-open .nav-link,
html[lang="en"] .nav-menu.mobile-open .nav-link {
width: 100%;
text-align: center;
padding: 0.75rem 1rem;
}
html[lang="en"] .header .nav-actions,
html[lang="en"] .nav-actions {
position: fixed;
right: 24px;
left: auto;
top: 44px;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
z-index: 1004;
}
html[lang="en"] .header .language-selector,
html[lang="en"] .language-selector {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0;
font-size: 1rem;
line-height: 1;
}
html[lang="en"] .header .language-selector i,
html[lang="en"] .language-selector i {
font-size: 1.35rem;
}
html[lang="en"] .header .hamburger-menu,
html[lang="en"] .hamburger-menu {
display: flex;
width: 30px;
height: 30px;
flex-shrink: 0;
}
}
@media (max-width: 480px) {
html[lang="en"] .header .nav-container,
html[lang="en"] .nav-container {
height: 84px;
min-height: 84px;
padding: 0 16px;
}
html[lang="en"] .header .logo,
html[lang="en"] .logo {
left: 16px;
top: 42px;
width: 136px;
max-width: 45vw;
font-size: 0.72rem;
line-height: 1.02;
}
html[lang="en"] .header .logo .cbs,
html[lang="en"] .logo .cbs {
display: block;
font-size: 1.05rem;
margin-bottom: 2px;
}
html[lang="en"] .header .nav-actions,
html[lang="en"] .nav-actions {
right: 16px;
top: 42px;
gap: 1rem;
}
html[lang="en"] .header .language-selector,
html[lang="en"] .language-selector {
font-size: 0.95rem;
}
html[lang="en"] .header .language-selector i,
html[lang="en"] .language-selector i {
font-size: 1.25rem;
}
html[lang="en"] .header .hamburger-menu,
html[lang="en"] .hamburger-menu {
width: 28px;
height: 28px;
}
html[lang="en"] .header .nav-menu.mobile-open,
html[lang="en"] .nav-menu.mobile-open {
top: 84px;
width: calc(100vw - 24px);
max-height: calc(100vh - 100px);
}
}
/* Block 20: already-scoped */
html[lang="en"] body .constraint-visual {
display: none;
}
html[lang="en"] body .hero {
background: #f4f7fb;
padding: 4.2rem 0 3.8rem;
}
html[lang="en"] .hero .btn.btn-secondary {
background: #fff;
color: #111827;
border: 1px solid #d9dee7;
border-radius: 8px;
}
html[lang="en"] .hero .btn.btn-secondary:hover {
border-color: #b9c0cf;
background: #f9fafb;
color: #111827;
}
html[lang="en"] body .hero-content.hero-content--single.cbs-demo-hero-grid {
display: flex;
flex-direction: column;
align-items: flex-start;
width: min(1080px, calc(100vw - 96px));
margin-left: 0;
margin-right: auto;
padding: 0 1.5rem;
box-sizing: border-box;
}
html[lang="en"] body .hero-content.hero-content--single.cbs-demo-hero-grid .hero-text {
width: 100%;
max-width: 1080px;
min-height: 0;
height: auto;
margin-left: 0;
margin-right: auto;
text-align: left;
}
html[lang="en"] body .hero-title {
color: #2f3b52;
font-size: 2.95rem;
line-height: 1.17;
font-weight: 680;
margin: 0 0 1.25rem;
letter-spacing: 0;
text-align: left;
}
@media (min-width: 900px) {
html[lang="en"] body .hero-title br {
display: block;
}
html[lang="en"] body .hero-title {
white-space: normal;
}
}
@media (max-width: 899px) {
html[lang="en"] body .hero-title {
white-space: normal;
}
}
html[lang="en"] body .hero-description {
max-width: 620px;
margin: 0;
color: #475467;
text-align: left;
}
html[lang="en"] body .hero-subheadline-strong {
color: #2f3b52;
font-size: 1.18rem;
line-height: 1.55;
font-weight: 620;
text-align: left;
}
html[lang="en"] body .hero-subheadline-normal {
margin-top: 0.7rem;
color: #5f6b7c;
font-size: 1.03rem;
font-weight: 440;
line-height: 1.66;
letter-spacing: 0;
text-align: left;
}
html[lang="en"] body .he-value-strip {
padding: 1rem 0;
}
html[lang="en"] body .he-value-strip-label,
html[lang="en"] body .he-value-strip .hero-stats-strip {
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
html[lang="en"] body .he-value-strip-label {
font-size: 1rem;
font-weight: 800;
}
html[lang="en"] body .hero-buttons,
html[lang="en"] body .he-hero-cta-row {
margin-top: 1.2rem;
justify-content: flex-start;
}
html[lang="en"] body .real-results h2::after {
display: none;
}
html[lang="en"] .faq-item {
border-bottom: 1px solid #edf1f5;
}
html[lang="en"] .faq-item:last-child {
border-bottom: 0;
}
html[lang="en"] .faq-question h3 {
font-weight: 800;
font-size: 1.18rem;
}
html[lang="en"] .faq-answer p {
font-size: 1.08rem;
line-height: 1.75;
}
html[lang="en"] .faq-question[aria-expanded="true"] + .faq-answer {
display: block;
}
html[lang="en"] .faq-question {
width: 100%;
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
text-align: left;
}
/* Final production-demo alignment: one centered 1000px rail, EN text flush-left inside it. */
html[lang="en"] {
--cbs-page-rail: 1000px;
--cbs-page-pad: 1.25rem;
}
html[lang="en"] .hero .hero-container,
html[lang="en"] .he-value-strip-inner,
html[lang="en"] .cbs-demo-video-inner,
html[lang="en"] .he-real-problem-inner,
html[lang="en"] .execution-shift-container,
html[lang="en"] .solution-container,
html[lang="en"] .cbs-demo-toc-lean-inner,
html[lang="en"] .results-container,
html[lang="en"] .testimonial-container,
html[lang="en"] .trusted-by-container,
html[lang="en"] .faq-container,
html[lang="en"] .cta-container,
html[lang="en"] .quick-links.he-quick-links,
html[lang="en"] .footer-container {
width: min(100%, var(--cbs-page-rail));
max-width: var(--cbs-page-rail);
margin-left: auto;
margin-right: auto;
padding-left: var(--cbs-page-pad);
padding-right: var(--cbs-page-pad);
box-sizing: border-box;
}
html[lang="en"] .hero-content.hero-content--single.cbs-demo-hero-grid,
html[lang="en"] .hero-content.hero-content--single.cbs-demo-hero-grid .hero-text {
width: min(1080px, calc(100vw - 96px));
max-width: 1080px;
margin-left: 0;
margin-right: auto;
text-align: left;
}
html[lang="en"] .hero-title,
html[lang="en"] .hero-description,
html[lang="en"] .hero-subheadline-strong,
html[lang="en"] .hero-subheadline-normal,
html[lang="en"] .he-value-strip-label,
html[lang="en"] .cbs-demo-video h2,
html[lang="en"] .cbs-demo-video p,
html[lang="en"] .he-real-problem-label,
html[lang="en"] .he-real-problem h2,
html[lang="en"] .he-real-problem-lead,
html[lang="en"] .he-real-problem-fit,
html[lang="en"] .execution-shift-header,
html[lang="en"] .execution-shift h2,
html[lang="en"] .execution-shift-lead,
html[lang="en"] .solution-text-section,
html[lang="en"] .solution h2,
html[lang="en"] .solution-text,
html[lang="en"] .cbs-demo-toc-lean h2,
html[lang="en"] .cbs-demo-toc-lean-lead,
html[lang="en"] .real-results h2,
html[lang="en"] .results-subtitle,
html[lang="en"] .final-cta h2 {
text-align: left;
margin-left: 0;
margin-right: auto;
}
html[lang="en"] .testimonial h2,
html[lang="en"] .trusted-by h2,
html[lang="en"] .faq h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
html[lang="en"] .cta-text,
html[lang="en"] .quick-links.he-quick-links h2,
html[lang="en"] .quick-links.he-quick-links .learn-more-text {
text-align: center;
margin-left: auto;
margin-right: auto;
}
html[lang="en"] .he-value-strip-label,
html[lang="en"] .he-value-strip .hero-stats-strip,
html[lang="en"] body .he-value-strip-label,
html[lang="en"] body .he-value-strip .hero-stats-strip,
html[lang="en"] .cbs-demo-video-frame,
html[lang="en"] .video-frame {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row,
html[lang="en"] .results-cta {
justify-content: flex-start;
text-align: left;
}
html[lang="en"] .final-cta .cta-container {
text-align: center;
}
html[lang="en"] .final-cta .btn.btn-primary {
display: inline-flex;
visibility: visible;
opacity: 1;
margin-left: 0;
margin-right: auto;
margin-top: 1.25rem;
}
html[lang="en"] body .quick-links.he-quick-links {
width: 100%;
max-width: none;
margin: 0;
padding: 1.75rem 0 2.25rem;
background: #f8fafc;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
html[lang="en"] body .quick-links.he-quick-links h2,
html[lang="en"] body .quick-links.he-quick-links .learn-more-text,
html[lang="en"] body .quick-links.he-quick-links ul {
width: min(100%, var(--cbs-page-rail));
max-width: var(--cbs-page-rail);
margin-left: auto;
margin-right: auto;
padding-left: var(--cbs-page-pad);
padding-right: var(--cbs-page-pad);
box-sizing: border-box;
text-align: center;
}
html[lang="en"] body .quick-links.he-quick-links .learn-more-text {
margin-bottom: 1rem;
}
html[lang="en"] body .quick-links.he-quick-links ul {
justify-content: center;
padding-top: 0;
padding-bottom: 0;
}
html[lang="en"] .footer .footer-container {
width: min(100%, var(--cbs-page-rail));
max-width: var(--cbs-page-rail);
padding-left: var(--cbs-page-pad);
padding-right: var(--cbs-page-pad);
}
html[lang="en"] .footer .footer-content {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(13rem, 0.75fr) minmax(9rem, 0.55fr);
column-gap: 4rem;
align-items: start;
}
html[lang="en"] .footer-brand,
html[lang="en"] .footer-contact,
html[lang="en"] .footer-menu {
min-width: 0;
text-align: left;
}
html[lang="en"] .footer-brand p {
max-width: 30rem;
margin-right: 0;
overflow-wrap: normal;
}
html[lang="en"] .footer-contact p,
html[lang="en"] .footer-contact a {
overflow-wrap: anywhere;
}
@media (max-width: 820px) {
html[lang="en"] .footer .footer-content {
grid-template-columns: 1fr;
row-gap: 2rem;
}
}
@media (max-width: 480px) {
html[lang="en"] {
--cbs-page-pad: 1rem;
}
}
@media (max-width: 640px) {
html[lang="en"],
html[lang="en"] body {
overflow-x: hidden;
}
html[lang="en"] .hero .hero-container,
html[lang="en"] .he-value-strip-inner,
html[lang="en"] .cbs-demo-video-inner,
html[lang="en"] .he-real-problem-inner,
html[lang="en"] .execution-shift-container,
html[lang="en"] .solution-container,
html[lang="en"] .cbs-demo-toc-lean-inner,
html[lang="en"] .results-container,
html[lang="en"] .testimonial-container,
html[lang="en"] .trusted-by-container,
html[lang="en"] .faq-container,
html[lang="en"] .cta-container,
html[lang="en"] .footer-container {
width: 100%;
max-width: 100%;
padding-left: 1.25rem;
padding-right: 1.25rem;
box-sizing: border-box;
}
html[lang="en"] .hero-content.hero-content--single.cbs-demo-hero-grid,
html[lang="en"] .hero-content.hero-content--single.cbs-demo-hero-grid .hero-text,
html[lang="en"] .hero-title,
html[lang="en"] .hero-description,
html[lang="en"] .hero-subheadline-strong,
html[lang="en"] .hero-subheadline-normal,
html[lang="en"] .cbs-demo-video h2,
html[lang="en"] .cbs-demo-video p,
html[lang="en"] .he-real-problem h2,
html[lang="en"] .he-real-problem-lead,
html[lang="en"] .he-real-problem-fit {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
html[lang="en"] .hero-title {
font-size: clamp(2.35rem, 10.5vw, 3rem);
line-height: 1.08;
}
html[lang="en"] .hero-buttons,
html[lang="en"] .he-hero-cta-row,
html[lang="en"] .hero .hero-text .hero-buttons,
html[lang="en"] .hero .hero-text .he-hero-cta-row {
width: 100%;
max-width: 100%;
}
html[lang="en"] .hero .btn,
html[lang="en"] .hero .btn-primary,
html[lang="en"] .hero .btn-secondary,
html[lang="en"] .btn-hero-secondary {
width: 100%;
max-width: 100%;
white-space: normal;
}
html[lang="en"] .he-value-strip .hero-stats-strip {
display: grid;
grid-template-columns: 1fr;
width: 100%;
max-width: 100%;
gap: 0.75rem;
}
html[lang="en"] .he-value-strip .stat-item {
width: 100%;
max-width: 100%;
min-width: 0;
}
html[lang="en"] .he-value-strip .stat-divider {
display: none;
}
html[lang="en"] .cbs-demo-video-frame,
html[lang="en"] .video-frame {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
}
html[lang="en"] .footer {
overflow: hidden;
}
html[lang="en"] .footer .footer-container {
width: min(100%, var(--cbs-page-rail));
max-width: var(--cbs-page-rail);
margin-left: auto;
margin-right: auto;
padding-left: var(--cbs-page-pad);
padding-right: var(--cbs-page-pad);
box-sizing: border-box;
}
html[lang="en"] .footer .footer-content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(13rem, max-content);
grid-template-areas:
"brand brand"
"contact menu";
gap: 2.25rem 4rem;
align-items: start;
}
html[lang="en"] .footer-brand {
grid-area: brand;
max-width: 44rem;
}
html[lang="en"] .footer-contact {
grid-area: contact;
}
html[lang="en"] .footer-menu {
grid-area: menu;
}
html[lang="en"] .footer-brand p {
max-width: 100%;
white-space: normal;
}
html[lang="en"] .footer-contact,
html[lang="en"] .footer-contact h4,
html[lang="en"] .footer-contact p,
html[lang="en"] .footer-contact a {
text-align: left;
}
@media (max-width: 700px) {
html[lang="en"] .footer .footer-content {
grid-template-columns: 1fr;
grid-template-areas:
"brand"
"contact"
"menu";
gap: 1.75rem;
}
}
html[lang="en"] .results-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.05rem;
margin-top: 2.1rem;
}
html[lang="en"] .results-cta .btn.btn-primary {
width: auto;
min-width: 19rem;
max-width: 100%;
margin: 0;
}
html[lang="en"] .results-link {
margin: 0;
}
html[lang="en"] .results-link a {
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
html[lang="en"] .final-cta .cta-text a {
color: inherit;
text-decoration-color: rgba(255, 255, 255, 0.7);
}
html[lang="en"] body .quick-links.he-quick-links {
border-top: 1px solid #e5e7eb;
background: #f8fafc;
padding: 2.1rem 0 2.35rem;
}
html[lang="en"] body .quick-links.he-quick-links h2,
html[lang="en"] body .quick-links.he-quick-links .learn-more-text,
html[lang="en"] body .quick-links.he-quick-links ul {
width: min(100%, var(--cbs-page-rail, 1000px));
max-width: var(--cbs-page-rail, 1000px);
margin-left: auto;
margin-right: auto;
padding-left: var(--cbs-page-pad, 1.25rem);
padding-right: var(--cbs-page-pad, 1.25rem);
box-sizing: border-box;
}
html[lang="en"] body .quick-links.he-quick-links .learn-more-text {
margin-top: 0.45rem;
margin-bottom: 1rem;
}
html[lang="en"] body .quick-links.he-quick-links ul {
justify-content: center;
gap: 0.85rem;
}
/* Block 7: base CSS (nav/header/layout) — scoped */
/* skipped: @font-face (already global) */
html[lang="en"] .header{background:#1a1a1a;color:white;padding:1rem 0;margin:0;position:sticky;top:0;z-index:1000}
html[lang="en"] .nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}
html[lang="en"] .logo{font-size:1.5rem;font-weight:700;text-decoration:none;color:white;transition:color 0.3s ease}
html[lang="en"] .logo:hover{color:#f0f0f0}
html[lang="en"] .logo .cbs{color:#2563eb}
html[lang="en"] .nav-menu{display:flex;list-style:none;gap:2rem}
html[lang="en"] .nav-link{color:white;text-decoration:none;font-weight:500;transition:color 0.3s ease}
html[lang="en"] .nav-link:hover{color:#ff8c00}
html[lang="en"] .nav-menu .nav-link.active,
html[lang="en"] .nav-link.active,
html[lang="en"] a.nav-link.active{ color: #ff6b6b;font-weight: 600;}
html[lang="en"] .nav-actions{ display: flex;align-items: center;gap: 1rem;}
html[lang="en"] .skip-link{ position: absolute;top: -40px;left: 6px;background: #000;color: #fff;padding: 8px;text-decoration: none;z-index: 1000;border-radius: 4px;}
html[lang="en"] .skip-link:focus{ top: 6px;}
html[lang="en"] .language-selector{ color: white;text-decoration: none;display: flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;border-radius: 6px;transition: background-color 0.3s ease;}
html[lang="en"] .language-selector i{ font-size: 1.1rem;color: white;transition: color 0.3s ease, transform 0.3s ease;}
html[lang="en"] .language-selector:hover i{ color: #f0f0f0;transform: rotate(15deg);}
html[lang="en"] .language-selector:hover{ background: rgba(255, 255, 255, 0.1);}
html[lang="en"] .nav-link:focus{ outline: 2px solid #ff6b6b;outline-offset: 2px;}
html[lang="en"] .language-selector:focus{ outline: 2px solid #ff6b6b;outline-offset: 2px;}
html[lang="en"] .hamburger-menu{ display: none;flex-direction: column;justify-content: space-around;width: 30px;height: 30px;background: transparent;border: none;cursor: pointer;padding: 0;z-index: 1001;}
html[lang="en"] .hamburger-line{ width: 100%;height: 3px;background: white;transition: all 0.3s ease;transform-origin: center;}
html[lang="en"] .hamburger-menu[aria-expanded="true"] .hamburger-line:nth-child(1){ transform: rotate(45deg) translate(6px, 6px);}
html[lang="en"] .hamburger-menu[aria-expanded="true"] .hamburger-line:nth-child(2){ opacity: 0;}
html[lang="en"] .hamburger-menu[aria-expanded="true"] .hamburger-line:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px);}
html[lang="en"] .hamburger-menu:focus{ outline: 2px solid #ff6b6b;outline-offset: 2px;}
html[lang="en"] .nav-menu.mobile-open{ display:flex; position:fixed; top:72px; left:50%; transform:translateX(-50%); width:90%; max-width:520px; height:auto; max-height:70vh; overflow:auto; background:rgba(26,26,26,0.85); backdrop-filter: blur(3px); flex-direction:column; justify-content:center; align-items:center; gap:1rem; padding:1.25rem; border-radius:12px; z-index:1000; }
html[lang="en"] .nav-menu.mobile-open .nav-link{ font-size:1.25rem; padding:0.75rem 1rem; text-align:center; width:100%; }
html[lang="en"] .header{ background: #1a1a1a;color: white;padding: 1rem 0;margin: 0;}
html[lang="en"] .nav-container{ max-width: 1200px;margin: 0 auto;padding: 0 2rem;display: flex;justify-content: space-between;align-items: center;}
html[lang="en"] .logo{ font-size: 1.5rem;font-weight: 700;}
html[lang="en"] .logo .cbs{ color: #2563eb;}
html[lang="en"] .nav-menu{ display: flex;list-style: none;gap: 2rem;}
html[lang="en"] .nav-actions{ display: flex;align-items: center;gap: 1rem;}
html[lang="en"] .language-selector{ display: flex;align-items: center;gap: 0.5rem;color: white;text-decoration: none;}
@media (min-width: 768px) and (max-width: 820px){html[lang="en"] .nav-container{ padding: 0 1rem;}
html[lang="en"] .nav-menu{ gap: 1rem;}
html[lang="en"] .nav-actions{ gap: 0.5rem;}
html[lang="en"] .language-selector{ padding: 0.25rem 0.5rem; }
}
@media (max-width: 767px){html[lang="en"] .nav-container{ padding: 0 1rem;}
html[lang="en"] .nav-menu{ display: none;}
html[lang="en"] .hamburger-menu{ display: flex;}
}
html[lang="en"] .hero{ background: transparent;padding: 4rem 0;}
html[lang="en"] .hero-container{ max-width: 1200px;margin: 0 auto;padding: 0 2rem;}
html[lang="en"] .hero-content{ display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: stretch;}
html[lang="en"] .hero-image{ order: 1;}
html[lang="en"] .hero-text{ order: 2;}
@media (max-width: 768px){html[lang="en"] .hero-content{ grid-template-columns: 1fr;}
html[lang="en"] .hero-image{ order: 1;}
html[lang="en"] .hero-text{ order: 2;}
}
html[lang="he"] .hero-content{ direction: ltr;}
html[lang="he"] .hero-text{ direction: rtl;text-align: right;}
html[lang="en"] .hero-text,
html[lang="en"] .hero-image{ height: 100%;display: flex;flex-direction: column;}
html[lang="en"] .problem-text p{ text-align: left;direction: ltr;}
html[lang="he"] .problem-text p{ text-align: right;direction: rtl;}
html[lang="en"] .hero-title{ font-size: 4rem;font-weight: 900;line-height: 1.1;margin-bottom: 2rem;color: #1a1a1a;letter-spacing: -0.04em;animation: fadeInUp 0.8s ease-out;}
html[lang="en"] .title-line{ display: block;margin-bottom: 0.2em;}
html[lang="en"] .highlight-line{ color: #ff6b6b;}
html[lang="en"] .hero-description{ font-size: 1.1rem;margin-bottom: 2rem;color: #666;line-height: 1.6;animation: fadeInUp 0.8s ease-out 0.2s both;}
html[lang="en"] .problem-text{ background: transparent;padding: 0;border-radius: 0;border-left: none;margin-top: calc(0.8rem + 40px);margin-bottom: 3rem;animation: fadeInUp 0.8s ease-out 0.4s both;}
html[lang="en"] .problem-text p{ font-size: 20px;color: #666;margin-bottom: 1rem;}
html[lang="en"] .problem-text p:last-child{ margin-bottom: 1rem;}
html[lang="en"] .results-preview{ margin-top: 1rem;}
html[lang="en"] .result-item{ display: flex;align-items: center;gap: 0.5rem;margin-bottom: 0.5rem;padding: 0.5rem 0;}
html[lang="en"] .result-item:last-child{ margin-bottom: 0;}
html[lang="en"] .result-number{ font-size: 1.2rem;font-weight: 700;color: #ff6b6b;min-width: 60px;}
html[lang="en"] .result-text{ font-size: 0.95rem;color: #666;}
html[lang="en"] .hero-buttons{ display: flex;gap: 1rem;flex-wrap: wrap;justify-content: center;margin-top: 0;}
html[lang="en"] .btn{ display: inline-block;padding: 0.75rem 2rem;border-radius: 6px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;border: none;cursor: pointer;font-size: 1rem;width: 100%;max-width: 300px;}
html[lang="en"] .btn-primary{ background: #C62828;color: #ffffff;animation: fadeInUp 0.8s ease-out 1s both;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);display: inline-flex;align-items: center;justify-content: center;text-align: center;}
html[lang="en"] .btn-primary:hover{ background: #B71C1C;transform: translateY(-2px);}
html[lang="en"] .btn-primary:focus{ outline: 3px solid #dc2626;outline-offset: 2px;}
html[lang="en"] .client-logo:focus{ outline: 2px solid #ff6b6b;outline-offset: 2px;}
@media (prefers-contrast: high){html[lang="en"] .hero-title{ color: #000;}
html[lang="en"] .highlight-line{ color: #d32f2f;}
html[lang="en"] .btn-primary{ background: #d32f2f;border: 2px solid #000;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
}
@media (prefers-reduced-motion: reduce){}
html[lang="en"] .btn-secondary{ background: #C62828;color: #ffffff;border: none;display: inline-flex;align-items: center;justify-content: center;text-align: center;}
html[lang="en"] .btn-secondary:hover{ background: #B71C1C;color: #ffffff;transform: translateY(-2px);}
html[lang="en"] .btn-secondary:focus{ outline: 3px solid #dc2626;outline-offset: 2px;}
html[lang="en"] .hero-image{ text-align: center;background: transparent;background-color: transparent;background-image: none;padding: 0;display: flex;justify-content: flex-start;align-items: center;align-self: start;}
html[lang="en"] .hero-image img{ width: 85%;max-width: 420px;height: auto;min-height: 464px;border-radius: 12px;filter: none;margin-top: -20px;margin-bottom: 0;margin-left: 0;background: transparent;background-color: transparent;background-image: none;opacity: 1;animation: none;display: block;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
html[lang="en"] .hero-image img:hover{ transform: scale(1.05) translateY(-5px);filter: none;box-shadow: none;opacity: 1;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
html[lang="en"] .hero-image .hero-buttons{ text-align: center;display: flex;justify-content: center;margin-left: 4rem;}
html[lang="en"] .hero-stats{ background: transparent;padding: 0;border-radius: 0;text-align: left;animation: fadeInUp 0.8s ease-out 0.8s both;box-shadow: none;max-width: 100%;margin-left: 0;margin-top: 0.75rem;margin-bottom: 2rem;display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;align-items: stretch;}
html[lang="en"] .hero-stats h2{ font-size: 1.8rem;font-weight: 700;color: #1a1a1a;margin-top: 0.6rem;margin-bottom: 1rem;grid-column: 1 / -1;}
html[lang="en"] .problem-text p strong{ font-weight: 800;}
html[lang="en"] .stat-item{ margin-bottom: 0;padding: 1.5rem;border-bottom: none;background: #ffffff;/* improved contrast on white */ border-radius: 12px;border: 1px solid #e2e8f0;min-width: 140px;text-align: center;transition: all 0.3s ease;}
html[lang="en"] .stat-item:hover{ background: #f1f5f9;box-shadow: 0 6px 20px rgba(0,0,0,0.08);transform: translateY(-2px);}
html[lang="en"] .stat-number{ font-size: 1.6rem;font-weight: 900;color: #c81e1e;/* darker red for WCAG contrast */ }
html[lang="en"] .stat-label{ color: #0f172a;}
html[lang="en"] .trusted-by{ background: #f8f9fa;padding: 3rem 0;}
html[lang="en"] .trusted-by-container{ max-width: 1200px;margin: 0 auto;padding: 0 2rem;text-align: center;}
html[lang="en"] .trusted-by h2{ font-size: 1.5rem;font-weight: 600;color: #666;margin-bottom: 2rem;}
html[lang="en"] .clients-grid{ display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 2rem;align-items: center;}
html[lang="en"] .client-logo{ text-align: center;padding: 1rem;background: white;border-radius: 8px;font-weight: 600;color: #666;transition: transform 0.3s ease;animation: fadeInUp 0.8s ease-out both;}
html[lang="en"] .client-logo:hover{ transform: translateY(-2px);}
html[lang="en"] .clients-carousel{
margin-top: 2rem;
position: relative;
overflow: hidden;
width: 100%;
height: 120px;
}
html[lang="en"] .carousel-container{
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 100%;
}
html[lang="en"] .carousel-track{
display: flex;
animation: scroll 20s linear infinite;
gap: 30px;
width: 400%;
height: 100%;
align-items: center;
}
html[lang="en"] .carousel-item{
min-width: 150px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border-radius: 12px;
box-shadow: none;
transition: transform 0.3s ease;
flex-shrink: 0;
cursor: pointer;
}
html[lang="en"] .carousel-item:hover{
transform: scale(1.05) translateY(-5px);
box-shadow: none;
}
html[lang="en"] .carousel-logo{
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: transform 0.3s ease;
}
html[lang="en"] .carousel-item:hover .carousel-logo{
transform: scale(1.02);
}
/* skipped: @keyframes scroll (already global) */
html[lang="en"] .carousel-track:hover{
animation-play-state: paused;
}
@media (max-width: 768px) {html[lang="en"] .clients-carousel{
height: 100px;
margin-top: 1.5rem;
}
html[lang="en"] .carousel-item{
min-width: 80px;
height: 70px;
}
html[lang="en"] .carousel-track{
animation: scrollMobile 15s linear infinite;
gap: 20px;
width: 800%;
}
}
/* skipped: @keyframes scrollMobile (already global) */
@media (max-width: 480px) {html[lang="en"] .clients-carousel{
height: 90px;
}
html[lang="en"] .carousel-item{
min-width: 60px;
height: 60px;
}
html[lang="en"] .carousel-track{
animation: scrollMobile 12s linear infinite;
gap: 15px;
width: 800%;
}
}
html[lang="en"] html[dir="rtl"] .carousel-track{
direction: ltr;
}
@media (prefers-reduced-motion: reduce) {html[lang="en"] .carousel-track{
animation: none;
}
html[lang="en"] .carousel-item{
transition: none;
}
}
html[lang="en"] .testimonial{ background: #1a1a1a;color: white;padding: 2rem 0;text-align: center;}
html[lang="en"] .testimonial-container{ max-width: 1200px;margin: 0 auto;padding: 0 2rem;}
html[lang="en"] .testimonial-grid{ display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;}
@media (max-width: 768px){html[lang="en"] .testimonial-grid{ grid-template-columns: 1fr;gap: 1rem;}
}
html[lang="en"] .testimonial h2{ font-size: 2.5rem;margin-bottom: 3rem;color: white;}
html[lang="en"] .testimonial-content{ background: rgba(255, 255, 255, 0.05);padding: 2rem;border-radius: 12px;border-left: 4px solid #4a90e2;margin-bottom: 1rem;transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);cursor: pointer;display: flex;flex-direction: column;justify-content: space-between;min-height: 200px;}
html[lang="en"] .testimonial-content:hover{ transform: translateY(-8px) scale(1.02);background: rgba(255, 255, 255, 0.08);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);border-left-color: #60a5fa;}
html[lang="en"] .testimonial-content.secondary{ background: rgba(255, 255, 255, 0.03);border-left-color: #4a90e2;transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);cursor: pointer;display: flex;flex-direction: column;justify-content: space-between;min-height: 200px;}
html[lang="en"] .testimonial-content.secondary:hover{ transform: translateY(-8px) scale(1.02);background: rgba(255, 255, 255, 0.08);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);border-left-color: #60a5fa;}
html[lang="en"] .testimonial-quote{ font-size: 1.1rem;line-height: 1.6;font-style: italic;margin-bottom: 1.5rem;color: #f0f0f0;transition: all 0.3s ease;}
html[lang="en"] .testimonial-content:hover .testimonial-quote{ color: #ffffff;transform: translateY(-2px);}
html[lang="en"] .testimonial-quote::before{ content: '';width: 60px;height: 60px;background-image: url('assets/images/icons/green-quotes.png');background-size: contain;background-repeat: no-repeat;background-position: center;display: block;margin-bottom: 1rem;text-align: left;}
html[lang="he"] .testimonial-quote::before{ background: none; }
html[lang="en"] .testimonial-quote::after{ display: none;}
html[lang="en"] .testimonial-author{ display: flex;justify-content: center;align-items: center;margin-top: auto;}
html[lang="en"] .author-info h3{ font-size: 1rem;margin-bottom: 0.3rem;color: white;transition: all 0.3s ease;}
html[lang="en"] .testimonial-content:hover .author-info h3{ color: #60a5fa;transform: translateY(-2px);}
html[lang="en"] .author-info p{ color: #ccc;font-size: 0.9rem;transition: all 0.3s ease;}
html[lang="en"] .testimonial-content:hover .author-info p{ color: #e0e0e0;transform: translateY(-2px);}
html[lang="en"] .about{ background: white;padding: 4rem 0;}
html[lang="en"] .about-container{ max-width: 1200px;margin: 0 auto;padding: 0 2rem;text-align: center;}
html[lang="en"] .about h2{ font-size: 2.5rem;font-weight: 700;color: #1a1a1a;margin-bottom: 1rem;position: relative;}
html[lang="en"] .about h2::after{ content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 60px;height: 4px;background: #2563eb;border-radius: 2px;}
html[lang="en"] .about-subtitle{ font-size: 1.1rem;color: #666;line-height: 1.7;max-width: 600px;margin: 2rem auto 3rem;}
html[lang="en"] .about-cards{ display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;margin-top: 3rem;}
html[lang="en"] .about-card{ background: white;padding: 2rem;border-radius: 12px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease;}
html[lang="en"] .about-card:hover{ transform: translateY(-5px);box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);}
html[lang="en"] .card-icon{ margin-bottom: 1.5rem;display: flex;justify-content: center;align-items: center;}
html[lang="en"] .card-icon svg{ width: 48px;height: 48px;transition: transform 0.3s ease;}
html[lang="en"] .about-card:hover .card-icon svg{ transform: scale(1.1);}
html[lang="en"] .card-icon-img{ width: 48px;height: 48px;object-fit: contain;transition: transform 0.3s ease;}
html[lang="en"] .about-card:hover .card-icon-img{ transform: scale(1.1);}
html[lang="en"] .about-card h3{ font-size: 1.3rem;font-weight: 600;color: #1a1a1a;margin-bottom: 1rem;}
html[lang="en"] .about-card p{ color: #666;line-height: 1.6;margin-bottom: 1.5rem;}
html[lang="en"] .card-text-expanded{ color: #666;line-height: 1.6;margin-bottom: 1.5rem;}
html[lang="en"] .read-more{ color: #2563eb;text-decoration: underline;font-weight: 500;transition: color 0.3s ease;}
html[lang="en"] .read-more:hover{ color: #1d4ed8;}
html[lang="en"] .real-results{ background: #f8f9fa;padding: 4rem 0;}
html[lang="en"] .results-container{ max-width: 1200px;margin: 0 auto;padding: 0 2rem;text-align: center;}
html[lang="en"] .real-results h2{ font-size: 2.5rem;font-weight: 700;color: #1a1a1a;margin-bottom: 1rem;position: relative;}
html[lang="en"] .real-results h2::after{ content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 60px;height: 4px;background: #4CAF50;border-radius: 2px;}
html[lang="en"] .results-subtitle{ font-size: 1.1rem;color: #666;line-height: 1.7;max-width: 600px;margin: 2rem auto 3rem;}
html[lang="en"] .results-grid{ display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;margin-bottom: 3rem;}
@media (max-width: 768px){html[lang="en"] .results-grid{ grid-template-columns: 1fr;gap: 1.5rem;}
}
html[lang="en"] .result-card{ background: white;padding: 2rem;border-radius: 12px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);text-align: left;transition: transform 0.3s ease, box-shadow 0.3s ease;}
html[lang="en"] .result-card:hover{ transform: translateY(-5px);box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);}
html[lang="en"] .company-logo{ width: 100px;height: 100px;background: transparent;border-radius: 8px;display: flex;align-items: center;justify-content: center;margin: 0 auto 1rem auto;}
html[lang="en"] .company-logo-img{ max-width: 100%;max-height: 100%;object-fit: contain;transform: scale(1.6);}
html[lang="en"] .result-card h3{ font-size: 1.4rem;font-weight: 600;color: #1a1a1a;margin-bottom: 1.5rem;}
html[lang="en"] .result-metrics{ display: flex;flex-direction: column;gap: 1rem;}
html[lang="en"] .metric{ display: flex;align-items: flex-start;gap: 0.75rem;}
html[lang="en"] .metric-icon{ font-size: 1.2rem;width: 24px;text-align: center;flex-shrink: 0;margin-top: 2px;}
html[lang="en"] .metric-text{ display: flex;align-items: center;gap: 0.5rem;flex-wrap: wrap;}
html[lang="en"] .metric-label{ font-weight: 500;color: #666;}
html[lang="en"] .metric-before{ color: #999;text-decoration: line-through;}
html[lang="en"] .metric-arrow{ color: #4CAF50;font-weight: 600;}
html[lang="en"] .metric-after{ color: #1a1a1a;font-weight: 600;}
html[lang="en"] .metric-improvement{ color: #4CAF50;font-weight: 600;background: #E8F5E8;padding: 0.2rem 0.5rem;border-radius: 4px;font-size: 0.9rem;}
html[lang="en"] .results-cta{ margin-top: 2rem;text-align: center;}
html[lang="en"] .btn-secondary{ background: #C62828;color: #ffffff;border: none;display: inline-flex;align-items: center;justify-content: center;text-align: center;}
html[lang="en"] .btn-secondary:hover{ background: #B71C1C;color: #ffffff;transform: translateY(-2px);}
html[lang="en"] .btn-secondary:focus{ outline: 3px solid #dc2626;outline-offset: 2px;}
html[lang="en"] .results-link{ margin-top: 0.5rem;}
html[lang="en"] .results-link a{ color: #666;text-decoration: underline;font-size: 0.9rem;transition: color 0.3s ease;}
html[lang="en"] .results-link a:hover{ color: #4CAF50;}
html[lang="en"] .problem-statement{ background: #f3f4f6;padding: 6rem 0;border: none;box-shadow: none;}
html[lang="en"] .problem-statement *{ border: none;box-shadow: none;}
html[lang="en"] .problem-container{ max-width: 1200px;margin: 0 auto;padding: 0 3rem;border: none;}
html[lang="en"] .problem-content{ display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;}
html[lang="en"] .problem-text-section{ text-align: left;}
html[lang="he"] .problem-text-section{ text-align: right;}
html[lang="en"] .problem-statement h2{ font-size: 3rem;font-weight: 700;color: #1a1a1a;margin-bottom: 2rem;line-height: 1.1;letter-spacing: -0.02em;}
html[lang="en"] .problem-text{ font-size: 1.3rem;color: #666;line-height: 1.9;font-weight: 400;}
html[lang="en"] .problem-image-section{ text-align: center;}
html[lang="en"] .problem-image{ max-width: 67%;height: auto;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}
html[lang="en"] .problem-image:hover{ transform: scale(1.05);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);}
html[lang="en"] .solution{ background: #f8f9fa;padding: 6rem 0;}
html[lang="en"] .solution-container{ max-width: 1200px;margin: 0 auto;padding: 0 3rem;}
html[lang="en"] .solution-content{ display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;}
html[lang="en"] .solution-text-section{ text-align: left;}
html[lang="en"] .solution h2{ font-size: 3rem;font-weight: 700;color: #1a1a1a;margin-bottom: 2rem;line-height: 1.1;letter-spacing: -0.02em;}
html[lang="en"] .solution-text-content{ max-width: 100%;}
html[lang="en"] .solution-text{ font-size: 1.3rem;color: #666;line-height: 1.9;margin-bottom: 2rem;text-align: left;}
html[lang="en"] .solution-text:last-child{ margin-bottom: 0;}
html[lang="en"] .solution-image-section{ text-align: center;}
html[lang="en"] .solution-image{ max-width: 100%;height: auto;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}
html[lang="en"] .solution-image:hover{ transform: scale(1.05);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);}
html[lang="en"] .faq{ background: #f8fafc;padding: 6rem 0;}
html[lang="en"] .faq-container{ max-width: 1000px;margin: 0 auto;padding: 0 3rem;}
html[lang="en"] .faq h2{ font-size: 2.5rem;font-weight: 600;color: #1a1a1a;text-align: center;margin-bottom: 3rem;line-height: 1.2;letter-spacing: -0.01em;}
html[lang="en"] .faq-content{ background: white;border-radius: 12px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);overflow: hidden;}
html[lang="en"] .faq-item{ border: none;border-top: none;border-bottom: none;border-left: none;border-right: none;}
@media (max-width: 768px){html[lang="en"] .faq-item{ margin-bottom: 0.5rem;}
html[lang="en"] .faq-question h3{ font-size: 1.1rem;line-height: 1.4;}
html[lang="en"] .faq-answer p{ font-size: 0.95rem;line-height: 1.5;}
}
html[lang="en"] .faq-question{ display: flex;justify-content: space-between;align-items: center;padding: 2rem;cursor: pointer;transition: background-color 0.3s ease;border: none;border-top: none;border-bottom: none;border-left: none;border-right: none;}
html[lang="en"] .faq-question:hover{ background-color: #f8f9fa;}
html[lang="en"] .faq-question:focus{ }
html[lang="en"] .faq-question h3{ font-size: 1.1rem;font-weight: 500;color: #374151;margin: 0;flex: 1;padding-right: 1rem;}
html[lang="en"] .faq-icon{ font-size: 1.5rem;font-weight: bold;color: #3b82f6;min-width: 20px;text-align: center;transition: transform 0.3s ease;}
html[lang="en"] .faq-question[aria-expanded="true"] .faq-icon{ transform: rotate(45deg);}
html[lang="en"] .faq-question[aria-expanded="true"]{ border: none;border-top: none;border-bottom: none;border-left: none;border-right: none;}
html[lang="en"] .faq-item:has(.faq-question[aria-expanded="true"]){ border: none;border-top: none;border-bottom: none;border-left: none;border-right: none;}
html[lang="en"] .faq-question[aria-expanded="false"]{ border: none;border-top: none;border-bottom: none;border-left: none;border-right: none;}
html[lang="en"] .faq-item:has(.faq-question[aria-expanded="false"]){ border: none;border-top: none;border-bottom: none;border-left: none;border-right: none;}
html[lang="en"] .faq-answer{ padding: 0 2rem 2rem 2rem;display: none;border-top: none;border-bottom: none;border-left: none;border-right: none;}
html[lang="en"] .faq-answer p{ font-size: 1rem;color: #6b7280;line-height: 1.6;margin-bottom: 1rem;}
html[lang="en"] .faq-answer p:last-child{ margin-bottom: 0;}
html[lang="en"] .final-cta{ background: #f8f9fa;padding: 6rem 0;}
html[lang="en"] .cta-container{ max-width: 1000px;margin: 0 auto;padding: 0 3rem;text-align: center;}
html[lang="en"] .final-cta h2{ font-size: 3.5rem;font-weight: 700;color: #1a1a1a;margin-bottom: 2rem;line-height: 1.1;letter-spacing: -0.02em;}
html[lang="en"] .cta-text{ font-size: 1.4rem;color: #666;line-height: 1.7;margin-bottom: 3rem;max-width: 800px;margin-left: auto;margin-right: auto;}
html[lang="en"] .btn-cta{ background: #1e40af;color: white;padding: 1.2rem 2.5rem;font-size: 1.2rem;font-weight: 600;border-radius: 8px;text-decoration: none;display: inline-block;transition: all 0.3s ease;border: none;cursor: pointer;}
html[lang="en"] .btn-cta:hover{ background: #1d4ed8;transform: translateY(-2px);box-shadow: 0 10px 25px rgba(30, 64, 175, 0.3);}
html[lang="en"] .btn-cta:focus{ outline: 3px solid #1e40af;outline-offset: 2px;}
/* skipped: @keyframes fadeInUp (already global) */
html[lang="en"] .nav-menu li a.nav-link.active{ color: #ff6b6b;font-weight: 600;}
@media (prefers-reduced-motion: reduce){html[lang="en"] .carousel-track{ animation: none;}
}
@media (max-width: 1024px){html[lang="en"] .hero-content{ grid-template-columns: 1fr;text-align: center;gap: 2rem;}
html[lang="en"] .hero-title{ font-size: 3rem;}
html[lang="en"] .hero-image img{ max-width: 85%;width: 85%;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
html[lang="en"] .hero-image img:hover{ transform: scale(1.05) translateY(-5px);filter: none;box-shadow: none;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
html[lang="en"] .about-cards{ grid-template-columns: 1fr;gap: 2rem;}
html[lang="en"] .results-grid{ grid-template-columns: 1fr;gap: 2rem;}
html[lang="en"] .problem-content{ gap: 3rem;}
html[lang="en"] .solution-content{ gap: 3rem;}
html[lang="en"] .faq-content{ margin: 0 1rem;}
}
@media (max-width: 768px){html[lang="en"] .hero-content{ display: flex;flex-direction: column;gap: 2rem;padding: 0 1rem;}
html[lang="en"] .hero .hero-image{ order: 1;}
html[lang="en"] .hero .hero-text{ order: 2;}
html[lang="en"] .hero .hero-image img{ display: block;height: auto;}
html[lang="en"] .hero-stats{ order: 3;margin-top: 0;padding: 0;margin-left: 0;grid-template-columns: 1fr;gap: 1rem;align-items: stretch;}
html[lang="en"] .hero-buttons{ order: 4;margin-top: 1rem;margin-left: 0;}
}
@media (max-width: 480px){html[lang="en"] .hero-content{ display: flex;flex-direction: column;}
html[lang="en"] .hero-text{ order: 1;}
html[lang="en"] .hero-image{ order: 2;}
html[lang="en"] .hero-stats{ order: 3;align-items: stretch;}
html[lang="en"] .hero-buttons{ order: 4;}
html[lang="en"] .hero-title{ font-size: 2rem;line-height: 1.1;text-align: center;}
html[lang="en"] .hero-image img{ max-width: 85%;width: 85%;}
html[lang="en"] .results-grid{ grid-template-columns: 1fr;gap: 1.5rem;}
html[lang="en"] .problem-content{ grid-template-columns: 1fr;gap: 2rem;}
html[lang="en"] .solution-content{ grid-template-columns: 1fr;gap: 2rem;}
html[lang="en"] .faq-question{ padding: 1.5rem;}
html[lang="en"] .faq-question h3{ font-size: 1.1rem;}
html[lang="en"] .faq-answer{ padding: 0 1.5rem 1.5rem 1.5rem;}
html[lang="en"] .nav-menu{ display: none;}
html[lang="en"] .hero-stats{ margin-top: 2rem;align-items: stretch;}
}
@media (max-width: 480px){html[lang="en"] .hero-title{ font-size: 2rem;text-align: center;}
html[lang="en"] .hero-image img{ max-width: 85%;width: 85%;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
html[lang="en"] .hero-image img:hover{ transform: scale(1.05) translateY(-5px);filter: none;box-shadow: none;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
html[lang="en"] .hero-stats h2{ font-size: 1.3rem;}
html[lang="en"] .stat-number{ font-size: 2rem;}
html[lang="en"] .clients-grid{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));gap: 1rem;}
html[lang="en"] .testimonial-quote{ font-size: 1.1rem;}
html[lang="en"] .testimonial-quote::before{ width: 50px;height: 50px;}
html[lang="he"] .testimonial-quote::before{ background: none; }
html[lang="en"] .testimonial-content{ padding: 1.5rem;min-height: 180px;}
html[lang="en"] .testimonial-grid{ grid-template-columns: 1fr;gap: 1rem;}
html[lang="en"] .hero-content{ padding: 0 0.5rem;}
html[lang="en"] .hero-stats{ padding: 1rem;margin-top: 1.5rem;margin-left: 0;align-items: stretch;}
html[lang="en"] .about-cards{ gap: 1rem;}
html[lang="en"] .about-card{ padding: 1.5rem;}
html[lang="en"] .results-grid{ gap: 1rem;}
html[lang="en"] .result-card{ padding: 1.5rem;}
html[lang="en"] .problem-content{ gap: 1.5rem;}
html[lang="en"] .solution-content{ gap: 1.5rem;}
html[lang="en"] .faq-question{ padding: 1rem;}
html[lang="en"] .faq-question h3{ font-size: 1rem;}
html[lang="en"] .faq-answer{ padding: 0 1rem 1rem 1rem;}
html[lang="en"] .problem-text-section{ text-align: center;}
html[lang="en"] .solution h2{ font-size: 2.5rem;}
html[lang="en"] .solution-text{ font-size: 1.2rem;text-align: center;}
html[lang="en"] .solution-text-section{ text-align: center;}
html[lang="en"] .faq h2{ font-size: 2.5rem;}
html[lang="en"] .faq-question h3{ font-size: 1.2rem;}
html[lang="en"] .faq-answer p{ font-size: 1rem;}
html[lang="en"] .final-cta h2{ font-size: 2.5rem;}
html[lang="en"] .cta-text{ font-size: 1.2rem;}
html[lang="en"] .btn-cta{ font-size: 1.1rem;padding: 1rem 2rem;}
html[lang="en"] .nav-container{ padding: 0 0.5rem;}
html[lang="en"] .hero-container{ padding: 0 1rem;}
html[lang="en"] .trusted-by-container{ padding: 0 1rem;}
html[lang="en"] .testimonial-container{ padding: 0 1rem;}
html[lang="en"] .about-container{ padding: 0 1rem;}
html[lang="en"] .results-container{ padding: 0 1rem;}
html[lang="en"] .problem-container{ padding: 0 1rem;}
html[lang="en"] .solution-container{ padding: 0 1rem;}
html[lang="en"] .faq-container{ padding: 0 1rem;}
html[lang="en"] .cta-container{ padding: 0 1rem;}
}
/* === Base nav/header fixes from Block 7 (parser-safe extraction) === */
html[lang="en"] .logo{font-size:1.5rem;font-weight:700;text-decoration:none;color:white;transition:color 0.3s ease}
html[lang="en"] .logo:hover{color:#f0f0f0}
html[lang="en"] .logo .cbs{color:#2563eb}
html[lang="en"] .nav-menu{display:flex;list-style:none;gap:2rem}
html[lang="en"] .nav-link{color:white;text-decoration:none;font-weight:500;transition:color 0.3s ease}
html[lang="en"] .nav-link:hover{color:#ff8c00}
html[lang="en"] .nav-actions{ display: flex;align-items: center;gap: 1rem;}
html[lang="en"] .language-selector{ color: white;text-decoration: none;display: flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;border-radius: 6px;transition: background-color 0.3s ease;}
html[lang="en"] .language-selector i{ font-size: 1.1rem;color: white;transition: color 0.3s ease, transform 0.3s ease;}
html[lang="en"] .language-selector:hover{ background: rgba(255, 255, 255, 0.1);}
html[lang="en"] .hamburger-menu{ display: none;flex-direction: column;justify-content: space-around;width: 30px;height: 30px;background: transparent;border: none;cursor: pointer;padding: 0;z-index: 1001;}
html[lang="en"] .hamburger-line{ width: 100%;height: 3px;background: white;transition: all 0.3s ease;transform-origin: center;}
html[lang="en"] .nav-menu.mobile-open .nav-link{ font-size:1.25rem; padding:0.75rem 1rem; text-align:center; width:100%; }
html[lang="en"] .logo{ font-size: 1.5rem;font-weight: 700;}
html[lang="en"] .logo .cbs{ color: #2563eb;}
html[lang="en"] .nav-menu{ display: flex;list-style: none;gap: 2rem;}
html[lang="en"] .nav-actions{ display: flex;align-items: center;gap: 1rem;}
html[lang="en"] .language-selector{ display: flex;align-items: center;gap: 0.5rem;color: white;text-decoration: none;}
/* Hero mobile scroll-link: hidden on desktop, shown by mobile-en.css at ≤480px */
.hero__scroll-link { display: none; }
/* ============================================================================
EN homepage parity (restored 2026-07-12)
Ported verbatim from the LIVE site's inline