/* Homepage layout: one content grid, dark surfaces and the existing green accent. */
.home-page {
  --home-width: 1240px;
  --home-gutter: clamp(18px, 4vw, 40px);
  --home-line: rgba(255, 255, 255, .11);
  --home-surface: #101510;
  --home-surface-raised: #171e17;
  overflow-x: clip;
}

.home-page .r-container,
.home-page #header > .r-container,
.home-page footer .r-container {
  width: min(100%, var(--home-width));
  max-width: var(--home-width);
  padding-inline: var(--home-gutter);
  margin-inline: auto;
}

.home-page main > .section {
  padding-block: clamp(72px, 8vw, 120px);
  border-top: 1px solid var(--home-line);
}

.home-page main > .section:nth-of-type(even) {
  background-color: #080b08;
}

.home-page main > .section h3 {
  max-width: 970px;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.home-page .home-about h3 {
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
}

.home-page .home-about .col-xl-7 > .d-flex > .d-flex > p {
  width: 100%;
  max-width: none;
}

.home-page main > .section p {
  line-height: 1.7;
}

.home-page main > .section .sub-heading.second {
  color: rgba(36, 109, 36, .22);
  pointer-events: none;
}

.home-page main > .section .border-bottom.border-4.border-accent {
  flex: 0 0 54px;
  width: 54px !important;
  margin: .55em 0 0 !important;
  align-self: flex-start;
}

/* Hero and client logo carousel retain every existing graphic. */
.home-page .home-hero {
  padding-block: clamp(140px, 15vw, 210px) 90px;
  background-color: #000;
}

.home-page .home-hero > .r-container {
  min-height: 0 !important;
}

.home-page .home-hero > .r-container > .row {
  width: 100%;
  margin-inline: 0;
  align-items: center;
}

.home-page .home-hero h1 {
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.02;
  letter-spacing: -.065em;
}

.home-page .home-hero .row > .col-xl-10 > .row:first-child h1 {
  max-width: 900px;
  margin-inline: 0;
  text-align: left !important;
}

.home-page .home-hero .row > .col-xl-10 > .row:nth-child(2) {
  padding-top: clamp(30px, 5vw, 70px);
  border-top: 1px solid var(--home-line);
}

.home-page .home-hero .float-icon img {
  width: clamp(90px, 13vw, 180px);
}

/* Banner composition based on the supplied reference, using DigiAir branding. */
.home-page .home-hero {
  background-color: #050705;
  background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 100% 285px, 285px 100%;
  background-position: center 80px;
}

.home-page .home-hero .row > .col-xl-10 > .row:first-child {
  align-items: center;
}

.home-page .home-hero .row > .col-xl-10 > .row:first-child h1 {
  max-width: none;
  margin: 0 !important;
  font-size: clamp(3.3rem, 6.5vw, 7.3rem);
  font-weight: 750;
  line-height: 1.08;
  text-align: left !important;
}

.home-page .home-hero .row > .col-xl-10 > .row:first-child h1 span {
  display: block;
  white-space: nowrap;
}

.home-page .home-hero .row > .col-xl-10 > .row:first-child h1 span:last-child {
  position: relative;
  margin-left: clamp(0px, 4vw, 70px);
}

.home-page .home-hero .hero-headline {
  position: relative;
}

.home-page .home-hero .hero-headline::before {
  content: '\2731';
  position: absolute;
  left: -.23em;
  top: .58em;
  color: #343bf2;
  font-family: Arial, sans-serif;
  font-size: clamp(8rem, 12vw, 11rem);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

.home-page .home-hero .row > .col-xl-10 > .row:nth-child(2) {
  align-items: end;
  padding-top: clamp(24px, 4vw, 56px);
}

.home-page .home-hero .row > .col-xl-10 > .row:nth-child(2) h1 {
  font-size: clamp(3.3rem, 6.3vw, 7rem);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.home-page .home-hero .row > .col-xl-10 > .row:nth-child(2) p {
  max-width: 280px;
  margin: 0;
  color: #d3ded3;
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
}

.home-page .home-hero .row > .col-xl-10 > .row:nth-child(2) .btn-play__circle {
  background-color: #72c548;
}

.home-page .home-hero .btn-play { margin-left: 5rem; }

.home-page .home-hero .float-icon { margin-right: 0; }

.home-page .home-marquee {
  width: 100%;
  max-width: none;
  min-height: 280px;
}

/* Section content follows the same left and right edges. */
.home-page .home-why > div,
.home-page .home-cta > div {
  width: min(calc(100% - 2 * var(--home-gutter)), calc(var(--home-width) - 2 * var(--home-gutter)));
  max-width: none !important;
  margin-inline: auto;
}

.home-page .home-about .row.gap-5 {
  gap: 0 !important;
  row-gap: 2rem !important;
}

.home-page .home-about .row,
.home-page .home-services .row,
.home-page .home-portfolio .row,
.home-page .home-blog .row {
  row-gap: clamp(20px, 3vw, 36px);
}

.home-page .home-about img,
.home-page .home-services img,
.home-page .home-portfolio img,
.home-page .home-why img,
.home-page .home-blog img {
  border-radius: 16px;
}

.home-page .home-about .bg-color-2,
.home-page .home-why .bg-color-2,
.home-page .home-cta .bg-color-2 {
  background: linear-gradient(145deg, #171f17, #0f120f);
  border: 1px solid rgba(36, 109, 36, .35);
}

.home-page .home-services .navigation {
  min-height: 118px;
  margin-block: 8px;
  padding: 20px 24px;
  background: var(--home-surface);
  border: 1px solid var(--home-line);
  border-radius: 14px;
}

.home-page .home-services .navigation h4 {
  font-size: clamp(1.4rem, 2.4vw, 2.3rem);
  line-height: 1.15;
}

.home-page .home-services .navigation:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}

.home-page .home-services .navigation:hover h4,
.home-page .home-services .navigation a,
.home-page .home-services .navigation:hover a {
  color: #fff;
}

.home-page .home-services .navigation a i,
.home-page .home-services .navigation:hover a i {
  color: #fff;
}

/* Each complete statement line, including its original image, reveals on scroll. */
.home-page .home-statement {
  background: #000;
  border-block: 1px solid rgba(36, 109, 36, .5);
}

.home-page .home-statement .statement-line {
  width: 100%;
  min-height: clamp(150px, 23vh, 250px);
  padding: 24px 0;
  border-bottom: 1px solid var(--home-line);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}

.home-page .home-statement .statement-line:first-child {
  border-top: 1px solid var(--home-line);
}

.home-page .home-statement .statement-line.statement-pending {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
}

.home-page .home-statement .textual-showcase {
  font-size: clamp(1.8rem, 4.35vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -.05em;
  white-space: nowrap;
}

.home-page .home-statement .statement-line img {
  max-width: min(26vw, 360px);
  object-fit: cover;
  flex-shrink: 1;
}

.home-page .home-statement .icon-textual i {
  color: #fff;
}

.home-page .home-portfolio .card {
  overflow: hidden;
  border-radius: 18px;
  background: var(--home-surface);
  border: 1px solid var(--home-line);
}

.home-page .home-portfolio .card > img {
  width: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.home-page .home-portfolio .card:hover > img {
  transform: scale(1.04);
}

.home-page .home-pricing h3[style],
.home-page .home-portfolio p[style] {
  max-width: 100% !important;
}

.home-page .home-pricing .card-pricing,
.home-page .home-testimonials .testimonial-container,
.home-page .home-blog .card-blog-detail {
  background: var(--home-surface);
  border: 1px solid var(--home-line);
  border-radius: 16px;
}

.home-page .home-pricing .card-pricing:hover {
  transform: translateY(-8px);
}

.home-page .home-pricing .card-pricing-detail i {
  color: #fff;
}

.home-page .home-pricing .card-pricing.bg-accent-color-4,
.home-page .home-pricing .card-pricing.bg-accent-color-4 h4,
.home-page .home-pricing .card-pricing.bg-accent-color-4 h6,
.home-page .home-pricing .card-pricing.bg-accent-color-4 p,
.home-page .home-pricing .card-pricing.bg-accent-color-4 span,
.home-page .home-pricing .card-pricing.bg-accent-color-4 .price-text {
  color: #fff;
}

.home-page .home-pricing .card-pricing.bg-accent-color-4 .btn-accent-3 {
  color: #fff;
  background: rgba(0, 0, 0, .16);
  outline-color: #fff;
}

.home-page .home-pricing .card-pricing.bg-accent-color-4 .btn-accent-3:hover {
  color: #fff;
  outline-color: #fff;
  background: rgba(0, 0, 0, .32);
}

.home-page .home-pricing .card-pricing.bg-accent-color-4 .card-pricing-detail i {
  color: #fff;
  background: #174717;
}

.home-page .home-faq .w-75 {
  width: min(100%, 900px) !important;
}

.home-page .home-faq .accordion-item {
  border: 1px solid var(--home-line);
  border-radius: 12px;
  overflow: hidden;
}

.home-page .home-cta > div > .bg-color-2 {
  padding: clamp(48px, 7vw, 100px) clamp(20px, 5vw, 70px) !important;
}

.home-page .home-blog .card-blog,
.home-page .home-blog .card-blog-row {
  border-radius: 16px;
  overflow: hidden;
}

@media (max-width: 1199px) {
  .home-page .home-hero .social-wrapper {
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
  }

  .home-page .home-services .navigation img {
    max-width: 160px;
  }

  .home-page .home-statement .textual-showcase {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
  }
}

@media (max-width: 991px) {
  .home-page .home-hero {
    padding-top: 125px;
  }

  .home-page .home-hero h1 {
    font-size: clamp(3rem, 9vw, 5.5rem);
  }

  .home-page .home-statement .statement-line {
    min-height: 0;
    padding-block: 42px;
  }

  .home-page .home-statement .textual-showcase {
    white-space: normal;
    text-align: center;
    font-size: clamp(2rem, 7vw, 4rem);
  }

  .home-page .home-statement .statement-line img {
    max-width: min(75vw, 400px);
  }

  .home-page .home-pricing .row,
  .home-page .home-blog .row {
    row-gap: 24px;
  }
}

@media (max-width: 767px) {
  .home-page .home-hero .btn-play { margin-left: 0; }
  .home-page main > .section {
    padding-block: 64px;
  }

  .home-page .home-hero {
    padding-top: 105px;
  }

  .home-page .home-hero .row > .col-xl-10 > .row:first-child h1,
  .home-page .home-hero .row > .col-xl-10 > .row:nth-child(2) h1 {
    text-align: left !important;
    font-size: clamp(2.8rem, 11vw, 4.4rem);
  }

  .home-page .home-hero .row > .col-xl-10 > .row:first-child h1 span { white-space: normal; }
  .home-page .home-hero .row > .col-xl-10 > .row:first-child h1 span:last-child { margin-left: 0; }
  .home-page .home-hero .hero-headline::before { left: -.12em; top: .8em; font-size: clamp(5rem, 16vw, 8rem); }

  .home-page .home-marquee {
    min-height: 230px;
  }

  .home-page .home-services .navigation {
    min-height: 92px;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 16px;
  }

  .home-page .home-services .navigation img {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    opacity: 1;
    width: min(100%, 360px);
    max-width: 100%;
    margin: 0;
    justify-self: start;
    transform: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .home-page .home-services .navigation a {
    grid-column: 2;
    grid-row: 1;
    width: 54px;
    height: 54px;
    font-size: 34px;
  }

  .home-page .home-services .navigation h4 {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1.15rem, 5vw, 1.7rem);
  }

  .home-page .home-about .row > .col,
  .home-page .home-portfolio .row > .col,
  .home-page .home-blog .row > .col {
    width: 100%;
  }

  .home-page .home-cta .row > .col-2 {
    display: none;
  }

  .home-page .home-cta .row > .col-8 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .home-page .home-hero h1,
  .home-page .home-hero .row > .col-xl-10 > .row:first-child h1,
  .home-page .home-hero .row > .col-xl-10 > .row:nth-child(2) h1 {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }

  .home-page .home-hero .float-icon img {
    width: 90px;
  }

  .home-page .home-statement .textual-showcase {
    font-size: clamp(1.85rem, 8vw, 2.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-statement .statement-line {
    transition: none;
  }
}