:root {
  --blue: #3b439f;
  --pale: #e7e8f3;
  --text: #090909;
  --white: #fff;
  --desktop-gutter: 240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Raleway", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  background: var(--white);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3,
.button,
.brand,
.stats strong,
.footer-button {
  font-family: "Poppins", Arial, sans-serif;
}

.hero {
  min-height: 1060px;
  padding: 58px 0 116px;
  background: radial-gradient(circle at 50% 42%, #fff 0 42%, #d8dbea 62%, var(--blue) 100%);
}

.hero__inner {
  width: min(1390px, calc(100% - var(--desktop-gutter)));
  margin: 0 auto;
}

.brand {
  width: 240px;
  height: auto;
}

.brand--dark {
  margin: 0 0 78px 12px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 100px;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 942 / 530;
  overflow: hidden;
  background: #000;
}

.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Video.js player fills the frame ── */
.video-frame .video-js,
.pip-container .video-js {
  width: 100% !important;
  height: 100% !important;
}

/* ── vjs-ghl skin ── */
.vjs-ghl.video-js {
  font-family: "Raleway", Arial, sans-serif;
  color: #fff;
}

/* Control bar: gradient bg + 5em height (matching GHL).
   Do NOT override display/flex — Video.js handles that internally. */
.vjs-ghl.video-js .vjs-control-bar {
  background: linear-gradient(180deg, rgba(43,51,63,0) 0%, rgba(43,51,63,0.7) 100%);
  height: 5em;
}

/* Center the SVG icon within its button.
   .vjs-control already has position:relative so absolute inset:0 works. */
.vjs-ghl.video-js .vjs-button > .vjs-icon-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vjs-ghl.video-js .vjs-button > .vjs-icon-placeholder:before {
  line-height: 1;
  font-size: inherit;
}

/* Progress bar */
.vjs-ghl.video-js .vjs-progress-holder {
  border-radius: 0.2em;
  height: 0.4em;
}

.vjs-ghl.video-js .vjs-play-progress,
.vjs-ghl.video-js .vjs-volume-level {
  background: #fff;
}

.vjs-ghl.video-js .vjs-play-progress:before {
  font-size: 1.2em;
}

.vjs-ghl.video-js .vjs-remaining-time-display,
.vjs-ghl.video-js .vjs-playback-rate-value {
  font-family: "Raleway", Arial, sans-serif;
  font-size: 1.3em;
  font-weight: 700;
}

.vjs-ghl.video-js .vjs-load-progress div {
  background: #fff;
  opacity: 0.5;
}

/* Custom SVG icons matching GHL */
.vjs-ghl .vjs-play-control .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M6.92773 6.82001V17.18C6.92773 17.97 7.79773 18.45 8.46773 18.02L16.6077 12.84C17.2277 12.45 17.2277 11.55 16.6077 11.15L8.46773 5.98001C7.79773 5.55001 6.92773 6.03001 6.92773 6.82001Z"/></svg>');
}

.vjs-ghl .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="26" height="26" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M8 19C9.1 19 10 18.1 10 17V7C10 5.9 9.1 5 8 5C6.9 5 6 5.9 6 7V17C6 18.1 6.9 19 8 19ZM14 7V17C14 18.1 14.9 19 16 19C17.1 19 18 18.1 18 17V7C18 5.9 17.1 5 16 5C14.9 5 14 5.9 14 7Z"/></svg>');
}

.vjs-ghl .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9619 5.64249V2.85249C11.9619 2.40249 11.4219 2.18249 11.1119 2.50249L7.31194 6.29249C7.11194 6.49249 7.11194 6.80249 7.31194 7.00249L11.1019 10.7925C11.4219 11.1025 11.9619 10.8825 11.9619 10.4325V7.64249C15.6919 7.64249 18.6419 11.0625 17.8219 14.9325C17.3519 17.2025 15.5119 19.0325 13.2519 19.5025C9.68194 20.2525 6.50194 17.8025 6.02194 14.4925C5.95194 14.0125 5.53194 13.6425 5.04194 13.6425C4.44194 13.6425 3.96194 14.1725 4.04194 14.7725C4.66194 19.1625 8.84194 22.4125 13.5719 21.4925C16.6919 20.8825 19.2019 18.3725 19.8119 15.2525C20.8019 10.1225 16.9019 5.64249 11.9619 5.64249Z" fill="white"/></svg>');
}

.vjs-ghl .vjs-mute-control .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 10.0018V14.0018C3 14.5518 3.45 15.0018 4 15.0018H7L10.29 18.2918C10.92 18.9218 12 18.4718 12 17.5818V6.41179C12 5.52179 10.92 5.07179 10.29 5.70179L7 9.00179H4C3.45 9.00179 3 9.45179 3 10.0018ZM16.5 12.0018C16.5 10.2318 15.48 8.71179 14 7.97179V16.0218C15.48 15.2918 16.5 13.7718 16.5 12.0018ZM14 4.45179V4.65179C14 5.03179 14.25 5.36179 14.6 5.50179C17.18 6.53179 19 9.06179 19 12.0018C19 14.9418 17.18 17.4718 14.6 18.5018C14.24 18.6418 14 18.9718 14 19.3518V19.5518C14 20.1818 14.63 20.6218 15.21 20.4018C18.6 19.1118 21 15.8418 21 12.0018C21 8.16179 18.6 4.89179 15.21 3.60179C14.63 3.37179 14 3.82179 14 4.45179Z" fill="white"/></svg>');
}

.vjs-ghl .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.63 3.63503C3.24 4.02503 3.24 4.65503 3.63 5.04503L7.29 8.70503L7 9.00503H4C3.45 9.00503 3 9.45503 3 10.005V14.005C3 14.555 3.45 15.005 4 15.005H7L10.29 18.295C10.92 18.925 12 18.475 12 17.585V13.415L16.18 17.595C15.69 17.965 15.16 18.275 14.58 18.505C14.22 18.655 14 19.035 14 19.425C14 20.145 14.73 20.605 15.39 20.335C16.19 20.005 16.94 19.565 17.61 19.025L18.95 20.365C19.34 20.755 19.97 20.755 20.36 20.365C20.75 19.975 20.75 19.345 20.36 18.955L5.05 3.63503C4.66 3.24503 4.03 3.24503 3.63 3.63503ZM19 12.005C19 12.825 18.85 13.615 18.59 14.345L20.12 15.875C20.68 14.705 21 13.395 21 12.005C21 8.17503 18.6 4.89503 15.22 3.60503C14.63 3.37503 14 3.83503 14 4.46503V4.65503C14 5.03503 14.25 5.36503 14.61 5.50503C17.18 6.54503 19 9.06503 19 12.005ZM10.29 5.71503L10.12 5.88503L12 7.76503V6.41503C12 5.52503 10.92 5.08503 10.29 5.71503ZM16.5 12.005C16.5 10.235 15.48 8.71503 14 7.97503V9.76503L16.48 12.245C16.49 12.165 16.5 12.085 16.5 12.005Z" fill="white"/></svg>');
}

.vjs-ghl .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 10.005V14.005C7.5 14.555 7.95 15.005 8.5 15.005H11.5L14.79 18.295C15.42 18.925 16.5 18.475 16.5 17.585V6.41502C16.5 5.52502 15.42 5.07502 14.79 5.70502L11.5 9.00502H8.5C7.95 9.00502 7.5 9.45502 7.5 10.005Z" fill="white"/></svg>');
}

.vjs-ghl .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 12.005C18.75 10.235 17.73 8.71502 16.25 7.97502V16.025C17.73 15.295 18.75 13.775 18.75 12.005ZM5.25 10.005V14.005C5.25 14.555 5.7 15.005 6.25 15.005H9.25L12.54 18.295C13.17 18.925 14.25 18.475 14.25 17.585V6.41502C14.25 5.52502 13.17 5.07502 12.54 5.70502L9.25 9.00502H6.25C5.7 9.00502 5.25 9.45502 5.25 10.005Z" fill="white"/></svg>');
}

.vjs-ghl .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 16H8V18C8 18.55 8.45 19 9 19C9.55 19 10 18.55 10 18V15C10 14.45 9.55 14 9 14H6C5.45 14 5 14.45 5 15C5 15.55 5.45 16 6 16ZM8 8H6C5.45 8 5 8.45 5 9C5 9.55 5.45 10 6 10H9C9.55 10 10 9.55 10 9V6C10 5.45 9.55 5 9 5C8.45 5 8 5.45 8 6V8ZM15 19C15.55 19 16 18.55 16 18V16H18C18.55 16 19 15.55 19 15C19 14.45 18.55 14 18 14H15C14.45 14 14 14.45 14 15V18C14 18.55 14.45 19 15 19ZM16 8V6C16 5.45 15.55 5 15 5C14.45 5 14 5.45 14 6V9C14 9.55 14.45 10 15 10H18C18.55 10 19 9.55 19 9C19 8.45 18.55 8 18 8H16Z" fill="white"/></svg>');
}

.vjs-ghl.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 14C5.45 14 5 14.45 5 15V18C5 18.55 5.45 19 6 19H9C9.55 19 10 18.55 10 18C10 17.45 9.55 17 9 17H7V15C7 14.45 6.55 14 6 14ZM6 10C6.55 10 7 9.55 7 9V7H9C9.55 7 10 6.55 10 6C10 5.45 9.55 5 9 5H6C5.45 5 5 5.45 5 6V9C5 9.55 5.45 10 6 10ZM17 17H15C14.45 17 14 17.45 14 18C14 18.55 14.45 19 15 19H18C18.55 19 19 18.55 19 18V15C19 14.45 18.55 14 18 14C17.45 14 17 14.45 17 15V17ZM14 6C14 6.55 14.45 7 15 7H17V9C17 9.55 17.45 10 18 10C18.55 10 19 9.55 19 9V6C19 5.45 18.55 5 18 5H15C14.45 5 14 5.45 14 6Z" fill="white"/></svg>');
}

.vjs-ghl .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
  content: url('data:image/svg+xml;utf8,<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 8H11C10.45 8 10 8.45 10 9V13C10 13.55 10.45 14 11 14H17C17.55 14 18 13.55 18 13V9C18 8.45 17.55 8 17 8ZM22 16V1.98C22 0.88 21.1 0 20 0H2C0.9 0 0 0.88 0 1.98V16C0 17.1 0.9 18 2 18H20C21.1 18 22 17.1 22 16ZM19 16.02H3C2.45 16.02 2 15.57 2 15.02V2.97C2 2.42 2.45 1.97 3 1.97H19C19.55 1.97 20 2.42 20 2.97V15.02C20 15.57 19.55 16.02 19 16.02Z" fill="white"/></svg>');
}

/* ── Enable-sound pill button (GHL exact) ── */
.enable-sound-button {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  left: 12px;
  top: 12px;
  line-height: 1;
  padding: 6px 10px;
  position: absolute;
  z-index: 98;
  color: #fff;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s;
}

.enable-sound-button:hover {
  background: rgba(0, 0, 0, 0.75);
}

.enable-sound-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Scroll PiP container (GHL exact dimensions & animation) ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: none; }
}

.pip-container {
  position: fixed;
  inset: auto 3px 3px auto;
  width: 280px;
  height: 158px;
  z-index: 9999;
  overflow: hidden;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
}

.pip-container.is-visible {
  animation: fadeInUp 1s both;
  pointer-events: auto;
  opacity: 1;
}

/* ── Close button above PiP (GHL style) ── */
.close-button-pip-scroll {
  position: fixed;
  inset: auto 3px 164px auto;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.close-button-pip-scroll.is-visible {
  display: flex;
  animation: fadeInUp 1s both;
}

.close-button-pip-scroll:hover {
  background: rgba(0, 0, 0, 0.9);
}

@media (max-width: 640px) {
  .pip-container {
    width: 200px;
    height: 113px;
  }

  .close-button-pip-scroll {
    inset: auto 3px 118px auto;
  }
}

.hero h1 {
  margin-top: 15px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0;
}

.hero p {
  max-width: 820px;
  margin-top: 28px;
  font-size: 18px;
}

.button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 420px;
  min-height: 82px;
  margin-top: 38px;
  padding: 13px 40px;
  color: var(--white);
  background: var(--blue);
  border-radius: 40px;
  text-align: center;
  font-size: 17px;
  line-height: 1.25;
}

.button strong {
  font-size: 20px;
  font-weight: 800;
}

.button span {
  font-family: "Raleway", Arial, sans-serif;
  font-size: 18px;
}

.button--small {
  min-width: 312px;
  min-height: 82px;
}

.button--outline {
  background: transparent;
  border: 2px solid var(--blue);
  color: var(--blue);
}

.button--outline:hover {
  background: var(--blue);
  color: #fff;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.hero__actions .button {
  margin-top: 0;
  flex: 1 1 auto;
}

.hero__products {
  width: 360px;
  justify-self: center;
  margin-top: 18px;
}

.intro {
  padding: 82px 0 88px;
  background: #fff;
  text-align: center;
}

.section-heading {
  width: min(1060px, calc(100% - var(--desktop-gutter)));
  margin: 0 auto;
}

.section-heading h2,
.gallery h2,
.testimonials h2 {
  color: var(--blue);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
}

.section-heading p {
  margin-top: 20px;
  font-size: 18px;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 78px;
  width: min(1370px, calc(100% - var(--desktop-gutter)));
  margin: 92px auto 0;
}

.features article {
  text-align: center;
}

.features img {
  width: 58px;
  height: 58px;
  margin: 0 auto 26px;
}

.features span,
.short-rule,
.center-rule {
  display: block;
  width: 100px;
  height: 5px;
  background: var(--blue);
}

.features span {
  margin: 0 auto 30px;
}

.features h3 {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 800;
}

.features p {
  max-width: 430px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.25;
}

.blue-promo {
  height: 310px;
  background: var(--blue);
  color: #fff;
}

.blue-promo__inner {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 70px;
  width: min(1360px, calc(100% - var(--desktop-gutter)));
  margin: 0 auto;
  align-items: start;
}

.blue-promo img {
  width: 275px;
  margin-top: 88px;
  justify-self: center;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .22));
}

.blue-promo h2 {
  margin-top: 86px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.blue-promo p {
  max-width: 900px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.35;
}

.blue-promo p + p {
  margin-top: 3px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  width: min(820px, calc(100% - var(--desktop-gutter)));
  margin: 74px auto 126px;
  transform: translateX(150px);
  color: var(--blue);
  text-align: center;
}

.stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border: 3px solid var(--blue);
  border-radius: 50%;
  font-size: 32px;
  font-weight: 800;
}

.stats p {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.split-cta {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 560px);
  gap: 80px;
  align-items: center;
  width: min(1310px, calc(100% - var(--desktop-gutter)));
  margin: 0 auto;
  padding: 20px 0 62px;
}

.split-cta img {
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

.short-rule {
  margin-bottom: 22px;
}

.split-cta h2 {
  font-size: 38px;
  line-height: 1.5;
  font-weight: 800;
}

.split-cta em {
  color: var(--blue);
  font-style: italic;
}

.split-cta p {
  margin-top: 34px;
  font-size: 18px;
}

.testimonials {
  padding: 64px 0 38px;
  background: var(--pale);
  text-align: center;
}

.center-rule {
  margin: 18px auto 38px;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1410px, calc(100% - var(--desktop-gutter)));
  min-height: 500px;
  margin: 0 auto;
  padding: 72px 52px 54px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.review-content::before {
  content: "";
  position: absolute;
  inset: 2px -26px 52px;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  box-shadow: 0 10px 14px rgba(30, 40, 70, .08);
  pointer-events: none;
}

.stars,
.testimonial-card p,
.testimonial-card a {
  position: relative;
  z-index: 1;
}

.stars {
  color: #f7b627;
  text-align: left;
  padding: 40px 0 0 0;
  letter-spacing: 7px;
}

.testimonial-card p {
  margin-top: 24px;
  color: #4c5562;
  font-size: 20px;
  font-style: italic;
  line-height: 1.55;
  text-align: left;
}

.review-content {
  position: relative;
  z-index: 1;
  flex: 1;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.review-content.slide-out-left {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.review-content.slide-out-right {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.review-content.slide-in-right {
  transform: translateX(100%);
  opacity: 0;
  transition: none;
}

.review-content.slide-in-left {
  transform: translateX(-100%);
  opacity: 0;
  transition: none;
}

.testimonial-card a {
  display: block;
  margin-top: 10px;
  color: #4c5562;
  font-size: 18px;
  font-weight: 800;
  text-align: left;
}

.arrow {
  position: absolute;
  z-index: 2;
  top: 220px;
  border: 0;
  background: transparent;
  color: #121820;
  font-size: 58px;
  line-height: 1;
}

.arrow--left {
  left: 36px;
}

.arrow--right {
  right: 36px;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  display: flex;
  justify-content: center;
  gap: 11px;
}

.dots span {
  display: block;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dce1e7;
  cursor: pointer;
}

.dots .active {
  background: #929aa5;
}

.gallery {
  padding: 22px 0 84px;
  text-align: center;
  background: #fff;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1440px, calc(100% - var(--desktop-gutter)));
  margin: 82px auto 0;
}

.gallery__grid img {
  width: 100%;
  height: 270px;
  object-fit: cover;
}

.clients {
  padding: 86px 0 100px;
  background: var(--pale);
}

.clients__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 48px;
  align-items: center;
  justify-content: center;
  width: min(1200px, calc(100% - var(--desktop-gutter)));
  margin: 0 auto;
}

.clients h2 {
  flex: 0 0 100%;
  text-align: center;
  color: var(--blue);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
}

.clients img {
  flex: 0 1 180px;
  max-height: 110px;
  max-width: 180px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.clients__inner img:nth-of-type(3) {
  max-height: 180px;
  max-width: 280px;
  flex-basis: 280px;
}

.footer {
  background: var(--blue);
  color: #fff;
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
  align-items: center;
  width: min(1390px, calc(100% - var(--desktop-gutter)));
  min-height: 266px;
  margin: 0 auto;
}

.brand--light {
  color: #fff;
}


.footer address {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-style: normal;
  font-size: 20px;
}

.footer address strong {
  margin-bottom: 16px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 23px;
}

.offer p {
  font-size: 20px;
}

.offer strong {
  display: block;
  margin-top: 8px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 22px;
}

.footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 54px;
  margin-top: 20px;
  border: 2px solid #fff;
  border-radius: 32px;
  font-size: 19px;
  font-weight: 800;
}

.copyright {
  padding: 17px 24px 18px;
  background: #f4f4f4;
  color: #6b7280;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
}

.footer__est {
  font-family: "Raleway", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-left: 12px;
}


/* ── Contact modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 48px 48px 44px;
  transform: translateY(16px);
  transition: transform 0.25s ease;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.modal-overlay.is-open .modal {
  transform: translateY(0);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f0f0f0;
  color: #555;
  cursor: pointer;
  transition: background 0.2s;
}

.modal__close:hover {
  background: #e0e0e0;
}

.modal #modalTitle {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
}

.modal__subtitle {
  margin: 0 0 28px;
  color: #555;
  font-size: 16px;
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal__field label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.modal__field label span {
  color: var(--blue);
}

.modal__field input {
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid #d0d4e8;
  border-radius: 8px;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}

.modal__field input:focus {
  border-color: var(--blue);
}

.modal__field input.is-invalid {
  border-color: #e93d3d;
}

.modal__privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #444;
  line-height: 1.4;
}

.modal__privacy input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--blue);
  cursor: pointer;
}

.modal__privacy a {
  color: var(--blue);
  text-decoration: underline;
}

.modal__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.modal__submit {
  height: 52px;
  margin-top: 6px;
  border: 0;
  border-radius: 32px;
  background: var(--blue);
  color: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.modal__submit:disabled {
  background: #8d93c4;
  cursor: wait;
  transform: none;
}

.modal__submit:hover {
  background: #2f3690;
}

.modal__submit:disabled:hover {
  background: #8d93c4;
}

.modal__submit:active {
  transform: scale(0.98);
}

.modal__error {
  margin: -4px 0 0;
  color: #c62828;
  font-size: 14px;
  line-height: 1.4;
}

.modal__success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0 8px;
  gap: 12px;
  color: var(--blue);
}

.modal__success:not([hidden]) {
  display: flex;
}

.modal__success svg {
  color: #37ca37;
}

.modal__success h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
}

.modal__success p {
  color: #555;
  font-size: 16px;
}

@media (max-width: 640px) {
  .modal {
    padding: 36px 24px 32px;
  }

  .modal__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .hero {
    min-height: 0;
  }

  .hero__grid,
  .blue-promo__inner,
  .split-cta,
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero__products {
    width: 360px;
  }

  .blue-promo {
    height: auto;
    padding: 54px 0;
  }

  .blue-promo img,
  .blue-promo h2 {
    margin-top: 0;
  }

  .blue-promo h2 {
    white-space: normal;
  }

  .features,
  .stats {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .hero,
  .intro,
  .testimonials,
  .gallery,
  .clients {
    padding-left: 0;
    padding-right: 0;
  }

  .brand {
    width: 210px;
  }

  .hero h1,
  .section-heading h2,
  .blue-promo h2,
  .split-cta h2,
  .gallery h2,
  .testimonials h2 {
    font-size: 28px;
  }

  .hero__inner,
  .section-heading,
  .features,
  .blue-promo__inner,
  .stats,
  .split-cta,
  .testimonial-card,
  .gallery__grid,
  .clients__inner,
  .footer__inner {
    width: min(100% - 28px, 520px);
  }

  .button {
    min-width: 0;
    width: 100%;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
  }

  .gallery__grid img {
    height: 260px;
  }

  .testimonial-card {
    min-height: 470px;
    padding: 54px 28px;
  }

  .review-content::before {
    inset: 4px -14px 38px;
  }

  .testimonial-card p {
    font-size: 17px;
  }

  .arrow {
    top: auto;
    bottom: 118px;
  }

}

/* ── Montenegro visit banner ───────────────────────────────────────────────── */
@keyframes me-banner-slide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.me-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--blue);
  color: var(--white);
  animation: me-banner-slide 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.me-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 56px 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.me-banner__text {
  font-family: "Raleway", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.me-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: #25d366;
  color: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 100px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.me-banner__cta:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
}

.me-banner__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  transition: color 0.15s;
}

.me-banner__close:hover {
  color: #fff;
}

body.me-banner-visible {
  padding-top: 52px;
}

@media (max-width: 640px) {
  .me-banner__inner {
    gap: 10px;
    padding: 10px 44px 10px 16px;
  }

  .me-banner__text {
    font-size: 13px;
    flex: 1 1 100%;
  }

  .me-banner__cta {
    font-size: 12px;
    padding: 6px 14px;
  }

  body.me-banner-visible {
    padding-top: 80px;
  }
}