/* =========================================================
   HOME PAGE
   MAIN INNER FRAME = 1200PX
========================================================= */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {
  overflow-x: hidden;

  background: #ffffff;

  color: #111111;

  font-family:
    "Gilroy",
    "Helvetica Neue",
    Arial,
    sans-serif;
}


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


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


button {
  font-family: inherit;
}


:root {
  --primary: #063767;
  --secondary: #0096d5;
  --green: #0c6b38;
  --white: #ffffff;
  --text: #111111;
  --muted: #555555;
  --light-bg: #f7f9fb;
  --border: #dfe5e9;
  --container: 1200px;
}


/* =========================================
   1200PX CONTAINER
========================================= */

.container {
  width: calc(100% - 64px);

  max-width: 1200px;

  margin: 0 auto;
}


/* =========================================
   COMMON TYPOGRAPHY
========================================= */

.section-eyebrow {
  margin: 0;

  color: #0096d5;

  font-size: 12px;
  font-weight: 600;

  line-height: 18px;

  letter-spacing: 1.7px;

  text-transform: uppercase;

  text-align: center;
}


.section-eyebrow--left {
  text-align: left;
}


.section-title {
  margin: 14px 0 0;

  color: #063767;

  font-size: 36px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.3px;

  text-align: center;
}


/* =========================================================
   HERO
   UPDATED TO MATCH REFERENCE
========================================================= */

.hero {
  width: 100%;

  padding-top: 78px;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(125deg,
      #073967 0%,
      #075291 54%,
      #079ed7 100%);
}


.hero__content {
  width: calc(100% - 40px);

  max-width: 900px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* MAIN HERO TITLE */

.hero__title {
  max-width: 850px;

  margin: 0;

  color: #ffffff;

  font-size: 54px;

  font-weight: 700;

  line-height: 1.13;

  letter-spacing: -0.7px;
}


.hero__title span {
  color: #6dd2f5;
}


/* SMALL EYEBROW */

.hero__eyebrow {
  margin: 19px 0 0;

  color: #ffffff;

  font-size: 11px;

  font-weight: 600;

  line-height: 17px;

  letter-spacing: 1.6px;

  text-transform: uppercase;
}


/* HERO PARAGRAPH */

.hero__description {
  max-width: 700px;

  margin: 25px auto 0;

  color:
    rgba(255, 255, 255, 0.76);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.55;
}


/* HERO BUTTON */

.hero__button {
  min-width: 186px;

  height: 54px;

  margin-top: 37px;

  padding: 0 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  background: #009fd9;

  border-radius: 6px;

  color: #ffffff;

  font-size: 14px;

  font-weight: 600;
}


.hero__button img {
  width: 18px;
  height: 18px;

  object-fit: contain;

  filter:
    brightness(0) invert(1);
}


/* HERO VIDEO */

.hero__video-wrap {
  width: 920px;

  max-width:
    calc(100% - 64px);

  margin-top: 96px;

  overflow: hidden;

  background: #000000;

  border-radius:
    40px 40px 0 0;
}


.hero__video {
  width: 100%;

  aspect-ratio: 16 / 9;

  display: block;

  object-fit: cover;
}


/* =========================================================
   TRUST BAR
========================================================= */

.trust {
  width: 100%;

  padding: 48px 0 68px;

  overflow: hidden;

  background: #ffffff;

  border-bottom:
    1px solid #d8d8d8;
}


.trust__inner {
  width: calc(100% - 64px);

  max-width: 1200px;

  margin: 0 auto;
}


.trust__heading {
  margin: 0;

  color: #5a5a5a;

  font-size: 17px;

  font-weight: 400;

  line-height: 25px;

  text-align: center;
}


.trust__heading strong {
  margin-left: 4px;

  color: #063767;

  font-size: 19px;

  font-weight: 700;
}


.trust__marquee {
  width: 100%;

  margin-top: 72px;

  overflow: hidden;
}


.trust__track {
  width: max-content;

  display: flex;

  align-items: center;

  gap: 95px;

  animation:
    trust-scroll 36s linear infinite;
}


.trust__logo {
  width: 145px;

  height: 62px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;
}


.trust__logo img {
  width: auto;

  max-width: 145px;

  max-height: 54px;

  object-fit: contain;
}


@keyframes trust-scroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* =========================================================
   WHY WHISTLEDRIVE
========================================================= */

.why {
  width: 100%;

  padding: 96px 0;

  background: #ffffff;
}


.why__inner {
  display: grid;

  grid-template-columns:
    0.92fr 1.08fr;

  align-items: center;

  gap: 74px;
}


.why__content {
  width: 100%;

  max-width: 500px;
}


.why__title {
  margin: 18px 0 0;

  color: #063767;

  font-size: 38px;

  font-weight: 700;

  line-height: 1.17;

  letter-spacing: -0.4px;
}


.why__description {
  margin: 30px 0 0;

  color: #535353;

  font-size: 17px;

  font-weight: 400;

  line-height: 1.62;
}


.why__image-wrap {
  width: 100%;
}


.why__image-wrap img {
  width: 100%;

  height: 305px;

  object-fit: cover;

  border-radius: 10px;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem {
  width: 100%;

  padding: 92px 0 105px;

  background: #f7f9fb;
}


.ecosystem__header {
  text-align: center;
}


.ecosystem__description {
  max-width: 630px;

  margin: 18px auto 0;

  color: #535353;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.65;

  text-align: center;
}


.ecosystem__cards {
  margin-top: 62px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 30px;
}


.ecosystem-card {
  min-height: 300px;

  padding: 30px 28px;

  display: flex;

  flex-direction: column;

  align-items: center;

  background: #ffffff;

  border:
    1px solid #dfe5e9;

  border-radius: 14px;

  box-shadow:
    0 6px 18px rgba(6, 55, 103, 0.04);

  text-align: center;
}


.ecosystem-card__icon {
  width: 72px;

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #e8f7fd;

  border-radius: 9px;
}


.ecosystem-card__icon img {
  width: 46px;

  height: 46px;

  object-fit: contain;
}


.ecosystem-card__title {
  margin: 20px 0 19px;

  color: #063767;

  font-size: 18px;

  font-weight: 600;

  line-height: 26px;
}


.ecosystem-card__text {
  max-width: 270px;

  margin: 0;

  color: #535353;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.6;
}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions {
  width: 100%;

  padding: 92px 0px;

  background: #ffffff;
}


.solutions__title {
  margin: 14px 0 0;

  color: #063767;

  font-size: 38px;

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.4px;
}


.solutions__cards {
  margin-top: 36px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 32px;
}


.solution-card {
  min-height: 230px;

  padding: 28px 34px;

  display: flex;

  flex-direction: column;

  background: #f8fafc;

  border:
    1px solid #dfe5e9;

  border-radius: 16px;
}


.solution-card__title {
  margin: 0;

  color: #063767;

  font-size: 25px;

  font-weight: 600;

  line-height: 32px;
}


.solution-card__text {
  margin: 19px 0 0;

  color: #535353;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.62;
}


.solution-card__link {
  margin-top: auto;

  display: inline-flex;

  align-items: center;

  gap: 11px;

  width: fit-content;

  color: #0096d5;

  font-size: 14px;

  font-weight: 600;
}


.solution-card__link img {
  width: 18px;

  height: 18px;

  object-fit: contain;
}


/* =========================================================
   WHISTLE GREEN
========================================================= */

.whistle-green {
  width: 100%;

  padding: 115px 0;

  background: #0b6938;
}


.whistle-green__inner {
  display: grid;

  grid-template-columns:
    0.82fr 1.18fr;

  align-items: center;

  gap: 72px;
}


.whistle-green__content {
  max-width: 470px;
}


.whistle-green__eyebrow {
  margin: 0 0 26px;

  color: #ffffff;

  font-size: 11px;

  font-weight: 600;

  line-height: 18px;

  letter-spacing: 2.4px;

  text-transform: uppercase;
}


.whistle-green__title {
  margin: 0;

  color: #ffffff;

  font-size: 36px;

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: -0.4px;
}


.whistle-green__description {
  margin: 27px 0 0;

  color:
    rgba(255, 255, 255, 0.95);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.55;
}


.whistle-green__button {
  width: 185px;

  height: 58px;

  margin-top: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  background: #ffffff;

  border-radius: 8px;

  color: #3a9d49;

  font-size: 15px;

  font-weight: 600;
}


.whistle-green__button img {
  width: 17px;

  height: 17px;

  object-fit: contain;
}


.whistle-green__image {
  width: 100%;

  overflow: hidden;

  border-radius: 10px;
}


.whistle-green__image img {
  width: 100%;

  aspect-ratio: 1.9 / 1;

  object-fit: cover;
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.technology {
  width: 100%;

  padding: 105px 0;

  background:
    linear-gradient(112deg,
      #073562 0%,
      #07508a 53%,
      #032947 100%);
}


.technology__inner {
  display: grid;

  grid-template-columns:
    0.78fr 1.22fr;

  align-items: center;

  gap: 65px;
}


.technology__content {
  max-width: 390px;
}


.technology__eyebrow {
  margin: 0 0 22px;

  color: #00a0dc;

  font-size: 11px;

  font-weight: 600;

  line-height: 18px;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}


.technology__title {
  margin: 0;

  color: #ffffff;

  font-size: 36px;

  font-weight: 700;

  line-height: 1.27;

  letter-spacing: -0.4px;
}


.technology__description {
  margin: 26px 0 0;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.6;
}


.technology__button {
  height: 56px;

  margin-top: 38px;

  padding: 0 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 13px;

  background: #009fd9;

  border-radius: 7px;

  color: #ffffff;

  font-size: 14px;

  font-weight: 600;
}


.technology__button img {
  width: 17px;

  height: 17px;

  object-fit: contain;

  filter:
    brightness(0) invert(1);
}


.technology__grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 16px;
}


.tech-card {
  min-height: 170px;

  padding: 20px;

  background:
    rgba(255, 255, 255, 0.055);

  border:
    1px solid rgba(255, 255, 255, 0.11);

  border-radius: 12px;
}


.tech-card__icon {
  width: 39px;

  height: 39px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(0, 150, 213, 0.16);

  border-radius: 8px;
}


.tech-card__icon img {
  width: 21px;

  height: 21px;

  object-fit: contain;

  filter:
    brightness(0) invert(1);
}


.tech-card__title {
  margin: 10px 0 0;

  color: #ffffff;

  font-size: 16px;

  font-weight: 600;

  line-height: 23px;
}


.tech-card__text {
  margin: 5px 0 0;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 13px;

  font-weight: 400;

  line-height: 1.55;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials {
  width: 100%;
  padding: 82px 0 88px;
  background: #f7f9fb;
}


.testimonials__title {
  margin: 0;

  color: #063767;

  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
}


.testimonials__cards {
  margin-top: 60px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  align-items: stretch;
}


.testimonial-card {
  min-height: 0;
  height: 100%;

  padding: 30px 30px 28px;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  border: 1px solid #dfe5e9;
  border-radius: 15px;

  box-shadow: 0 5px 15px rgba(6, 55, 103, 0.04);
}


.testimonial-card__quote {
  margin: 0;

  color: #111111;

  font-size: 15px;
  font-weight: 400;

  line-height: 1.55;
}


.testimonial-card__person {
  margin-top: auto;
  padding-top: 30px;

  display: flex;
  align-items: center;
  gap: 15px;
}


.testimonial-card__avatar {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f1f1f1;

  border-radius: 50%;

  color: #111111;

  font-size: 11px;
  font-weight: 500;
}


.testimonial-card__person strong {
  display: block;

  margin: 0;

  color: #111111;

  font-size: 14px;
  font-weight: 600;

  line-height: 1.25;
}


.testimonial-card__person small {
  display: block;

  margin-top: 5px;

  color: #666666;

  font-size: 12px;
  font-weight: 400;

  line-height: 17px;
}

/* =========================================================
   FAQ
========================================================= */

.faq {
  width: 100%;
  padding: 95px 0 105px;

  background: #ffffff;
}


.faq__inner {
  display: grid;

  grid-template-columns: 1fr 0.9fr;

  align-items: start;

  gap: 80px;
}

.faq__image {
  width: 100%;
  margin-top: 82px;
}

.faq__image img {
  width: 100%;
  height: 330px;

  display: block;
  object-fit: cover;

  border-radius: 10px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.faq__content {
  width: 100%;
}


.faq__title {
  margin: 0 0 58px;

  color: #063767;

  font-size: 38px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.4px;
}


/* =========================================
   FAQ LIST
========================================= */

.faq__list {
  width: 100%;
}


.faq__item {
  border-bottom: 1px solid #999999;
}


.faq__item:first-child {
  border-top: none;
}


/* =========================================
   QUESTION
========================================= */

.faq__question {
  width: 100%;
  min-height: 70px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  background: transparent;

  border: 0;

  color: #111111;

  cursor: pointer;

  text-align: left;

  font-size: 15px;
  font-weight: 400;

  line-height: 1.45;
}


.faq__question span {
  flex: 1;
}


/* =========================================
   CHEVRON
========================================= */

.faq__chevron {
  width: 16px;
  height: 16px;

  flex-shrink: 0;

  object-fit: contain;

  transition: transform 0.25s ease;
}


/* Rotate when FAQ is open */

.faq__item.is-open .faq__chevron {
  transform: rotate(180deg);
}


/* =========================================
   ANSWER
========================================= */

.faq__answer {
  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    padding 0.35s ease;
}


.faq__answer p {
  max-width: 580px;

  margin: 0;

  padding: 0 0 26px;

  color: #526277;

  font-size: 15px;
  font-weight: 400;

  line-height: 1.7;
}


/* OPEN ANSWER */

.faq__item.is-open .faq__answer {
  max-height: 220px;

  opacity: 1;
}


/* =========================================
   RIGHT IMAGE
========================================= */

.faq__image {
  width: 100%;
}


.faq__image img {
  width: 100%;
  height: 330px;

  display: block;

  object-fit: cover;

  border-radius: 10px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

  .faq__inner {
    grid-template-columns: 1fr;

    gap: 50px;
  }


  .faq__image img {
    height: auto;
  }

}


@media (max-width: 600px) {

  .faq {
    padding: 65px 0;
  }


  .faq__title {
    margin-bottom: 35px;

    font-size: 30px;
  }


  .faq__question {
    min-height: 64px;

    font-size: 14px;
  }


  .faq__answer p {
    font-size: 14px;
  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

  .why__inner,
  .whistle-green__inner,
  .technology__inner,
  .faq__inner {
    grid-template-columns: 1fr;
  }


  .ecosystem__cards,
  .solutions__cards,
  .testimonials__cards {
    grid-template-columns: 1fr;
  }


  .why__content,
  .technology__content,
  .whistle-green__content {
    max-width: 100%;
  }


  .technology__grid {
    margin-top: 30px;
  }

}


@media (max-width: 700px) {

  .container {
    width: calc(100% - 32px);
  }


  .hero__title {
    font-size: 34px;
  }


  .hero__description {
    font-size: 14px;
  }


  .hero__video-wrap {
    width: calc(100% - 32px);

    margin-top: 65px;
  }


  .section-title,
  .why__title,
  .solutions__title,
  .whistle-green__title,
  .technology__title,
  .testimonials__title,
  .faq__title {
    font-size: 30px;
  }


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

}