/* ==========================================================
   Home (new) — page-specific styles
   Loaded only on home-new.html. Everything is scoped under
   .home-new (main) or .hn-footer so nothing leaks into other
   pages. Brand values mirror css/style.css (#e11d07 / #282828,
   Mulish headings, Roboto body).
   ========================================================== */

.home-new,
.hn-footer {
  --hn-red: #e11d07;
  --hn-red-dark: #b81605;
  --hn-red-soft: rgba(225, 29, 7, 0.08);
  --hn-dark: #282828;
  --hn-ink: #181e23;
  --hn-text: #62605c;
  --hn-soft: #f6f6f6;
  --hn-line: #e4e4e4;
  --hn-radius: 12px;
  --hn-shadow: 0 18px 44px rgba(24, 30, 35, 0.09);
}

.home-new {
  color: var(--hn-text);
  overflow-x: hidden;
}

.home-new .hn-wrap {
  max-width: 1240px;
  margin: 0 auto;
}

.home-new .hn-section {
  padding: 110px 0;
}

.home-new .hn-soft {
  background: var(--hn-soft);
}

.home-new p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--hn-text);
  margin-bottom: 18px;
}

.home-new p:last-child {
  margin-bottom: 0;
}

/* ---------- Section headings ---------- */
.home-new .hn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hn-red);
  margin-bottom: 16px;
}

.home-new .hn-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: currentColor;
}

.home-new .hn-head-center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.home-new .hn-head-center .hn-eyebrow::after {
  content: "";
  width: 32px;
  height: 2px;
  background: currentColor;
}

.home-new .hn-title {
  font-size: 42px;
  line-height: 1.22;
  font-weight: 800;
  color: var(--hn-dark);
  margin-bottom: 20px;
}

/* ---------- Buttons ---------- */
.home-new .hn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 36px;
  border-radius: 50px;
  border: 2px solid var(--hn-red);
  background: var(--hn-red);
  color: #fff;
  font-family: "Mulish", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.home-new .hn-btn:hover {
  background: var(--hn-red-dark);
  border-color: var(--hn-red-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(225, 29, 7, 0.35);
}

.home-new .hn-btn:focus-visible {
  outline: 3px solid var(--hn-dark);
  outline-offset: 3px;
}

.home-new .hn-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
}

.home-new .hn-btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--hn-dark);
  box-shadow: none;
}

.home-new .hn-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--hn-red);
}

.home-new .hn-btn--white:hover {
  background: var(--hn-ink);
  border-color: var(--hn-ink);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.home-new .hn-btn .hn-arrow {
  transition: transform 0.25s ease;
}

.home-new .hn-btn:hover .hn-arrow {
  transform: translateX(4px);
}

/* ---------- Icon badge ---------- */
.home-new .hn-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hn-red-soft);
  color: var(--hn-red);
  font-size: 26px;
  transition: background 0.25s ease, color 0.25s ease;
}

/* ==========================================================
   1. Hero — 3-slide carousel (slick, fade)
   ========================================================== */
.home-new .hn-hero {
  --hn-content-w: 820px;  /* width of the heading / CTA column */
  --hn-arrow: 56px;       /* arrow button size */
  --hn-arrow-gap: 26px;   /* space between CTA buttons and arrows */
  --hn-arrow-bottom: 108px; /* arrows' distance from the hero's bottom edge (clears the trust card) */
  position: relative;
  background: var(--hn-ink);
  overflow: hidden;
}

.home-new .hn-slide {
  position: relative;
  display: flex !important; /* slick sets display on slides */
  align-items: flex-end; /* CTA row sits at the same height on every slide, arrows go right below it */
  height: calc(100vh - 60px); /* leaves room for the trust card on first view */
  min-height: 640px;
  max-height: 940px;
  padding: 130px 0 calc(var(--hn-arrow-bottom) + var(--hn-arrow) + var(--hn-arrow-gap)); /* header overlay on top; arrows + trust card at the bottom */
  overflow: hidden;
  outline: none;
}

/* background photo — slow, subtle zoom while the slide is active */
.home-new .hn-slide-bg {
  position: absolute;
  inset: 0;
  background-color: var(--hn-ink);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hn-pos, center);
  transform: scale(1.08);
  transition: transform 8s ease-out;
  will-change: transform;
}

.home-new .slick-current .hn-slide-bg,
.home-new .hn-slider:not(.slick-initialized) .hn-slide:first-child .hn-slide-bg {
  transform: scale(1);
}

.home-new .hn-slide--1 { --hn-pos: 60% center; }
.home-new .hn-slide--2 { --hn-pos: center 68%; }
.home-new .hn-slide--3 { --hn-pos: 0% center; }

/* readability overlay: dark on the text side, photo stays visible on the right */
.home-new .hn-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(14, 17, 20, 0.6) 0%, rgba(14, 17, 20, 0) 26%),
    linear-gradient(0deg, rgba(14, 17, 20, 0.75) 0%, rgba(14, 17, 20, 0) 38%),
    linear-gradient(90deg, rgba(14, 17, 20, 0.94) 0%, rgba(14, 17, 20, 0.8) 38%, rgba(14, 17, 20, 0.25) 75%, rgba(14, 17, 20, 0.1) 100%);
}

.home-new .hn-slide > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.home-new .hn-slide-content {
  max-width: var(--hn-content-w);
}

/* short brand accent bar above the headline */
.home-new .hn-slide-content::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background: var(--hn-red);
  margin-bottom: 28px;
  transform-origin: left;
}

.home-new .hn-slide-title {
  font-family: "Mulish", sans-serif;
  font-size: 58px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 40px;
}

.home-new .hn-slide-title span {
  color: var(--hn-red);
}

.home-new .hn-slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* entrance animation — runs each time a slide becomes current.
   Base state is visible, so outgoing slides fade out intact
   and the hero still reads fine without JS. */
@keyframes hnRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes hnGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.home-new .slick-current .hn-slide-content::before {
  animation: hnGrow 0.8s ease 0.15s both;
}

.home-new .slick-current .hn-slide-title {
  animation: hnRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.home-new .slick-current .hn-slide-actions {
  animation: hnRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

/* ---------- carousel controls ----------
   Arrows sit directly below the CTA buttons, at the right edge of the
   hero content container. One shared pair serves all slides, so it is
   placed with the same measurements that set the slides' bottom padding. */
.home-new .hn-hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--hn-arrow-bottom);
  z-index: 3;
  pointer-events: none;
}

.home-new .hn-hero-controls-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* dots are not shown; slick still builds them, so nothing else changes */
.home-new .hn-hero-dots {
  display: none;
}

.home-new .hn-hero-dots,
.home-new .hn-hero-arrows {
  pointer-events: auto;
}

.home-new .hn-hero-dots .slick-dots {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-new .hn-hero-dots button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.home-new .hn-hero-dots button:hover,
.home-new .hn-hero-dots .slick-active button {
  color: #fff;
}

.home-new .hn-dot-bar {
  position: relative;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.home-new .hn-dot-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hn-red);
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes hnProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* progress fill tracks the autoplay timer (duration set from JS) */
.home-new .hn-hero-dots .slick-active .hn-dot-bar::after {
  animation: hnProgress var(--hn-autoplay, 6s) linear both;
}

.home-new .hn-hero.is-paused .hn-hero-dots .slick-active .hn-dot-bar::after,
.home-new .hn-hero.no-autoplay .hn-hero-dots .slick-active .hn-dot-bar::after {
  animation: none;
  transform: scaleX(1);
}

.home-new .hn-hero-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%; /* right edge of the hero's content container */
}

.home-new .hn-hero-arrows button {
  width: var(--hn-arrow);
  height: var(--hn-arrow);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(14, 17, 20, 0.35);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.home-new .hn-hero-arrows button:hover {
  background: var(--hn-red);
  border-color: var(--hn-red);
}

.home-new .hn-hero-dots button:focus-visible,
.home-new .hn-hero-arrows button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ==========================================================
   2. Trust strip — card overlapping the hero's bottom edge
   ========================================================== */
.home-new .hn-trust {
  position: relative;
  z-index: 4;
  background: transparent; /* the card overlaps the hero; keep the hero visible behind it */
}

.home-new .hn-trust-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: -86px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-radius: 16px;
  border-bottom: 4px solid var(--hn-red);
  box-shadow: 0 30px 70px rgba(24, 30, 35, 0.14);
  overflow: hidden;
}

.home-new .hn-trust-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 38px 32px;
  transition: background 0.3s ease;
}

/* vertical separators */
.home-new .hn-trust-item + .hn-trust-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--hn-line);
}

.home-new .hn-trust-item:hover {
  background: #fbfbfb;
}

.home-new .hn-trust-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hn-red-soft);
  color: var(--hn-red);
  font-size: 23px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.home-new .hn-trust-item:hover .hn-trust-icon {
  background: var(--hn-red);
  color: #fff;
  transform: translateY(-3px);
}

.home-new .hn-trust-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-new .hn-trust-num {
  display: inline-grid; /* ghost + live value share one cell: no layout shift */
  justify-items: start;
  font-family: "Mulish", sans-serif;
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  color: var(--hn-dark);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.home-new .hn-trust-num > span {
  grid-area: 1 / 1;
}

.home-new .hn-trust-num .hn-ghost {
  visibility: hidden;
}

.home-new .hn-trust-num em {
  font-style: normal;
  color: var(--hn-red);
}

.home-new .hn-trust-label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--hn-text);
}

/* reveal when scrolled into view (class added by JS only) */
.home-new .hn-trust.hn-reveal .hn-trust-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease, background 0.3s ease;
}

.home-new .hn-trust.hn-reveal.is-visible .hn-trust-item {
  opacity: 1;
  transform: none;
}

.home-new .hn-trust.hn-reveal.is-visible .hn-trust-item:nth-child(2) { transition-delay: 0.1s, 0.1s, 0s; }
.home-new .hn-trust.hn-reveal.is-visible .hn-trust-item:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s; }
.home-new .hn-trust.hn-reveal.is-visible .hn-trust-item:nth-child(4) { transition-delay: 0.3s, 0.3s, 0s; }

/* ---------- hero + trust responsive ---------- */
@media (max-width: 1399px) {
  .home-new .hn-hero { --hn-content-w: 720px; }
  .home-new .hn-trust-item { padding: 34px 24px; gap: 14px; }
  .home-new .hn-trust-num { font-size: 38px; }
}

@media (max-width: 1199px) {
  .home-new .hn-slide { min-height: 620px; max-height: 820px; }
  .home-new .hn-slide-title { font-size: 52px; }
  .home-new .hn-hero { --hn-content-w: 640px; }

  /* still one row: icon sits above the text */
  .home-new .hn-trust-item { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
  .home-new .hn-trust-icon { flex-basis: auto; width: 52px; height: 52px; font-size: 21px; }
  .home-new .hn-trust-num { font-size: 36px; }
}

@media (max-width: 991px) {
  .home-new .hn-hero { --hn-arrow: 48px; --hn-arrow-bottom: 106px; }
  .home-new .hn-slide { height: auto; min-height: 600px; min-height: min(100svh, 760px); max-height: none; padding-top: 120px; }
  .home-new .hn-slide-title { font-size: 46px; margin-bottom: 34px; }
  .home-new .hn-slide::before {
    background:
      linear-gradient(180deg, rgba(14, 17, 20, 0.6) 0%, rgba(14, 17, 20, 0) 26%),
      linear-gradient(0deg, rgba(14, 17, 20, 0.8) 0%, rgba(14, 17, 20, 0) 45%),
      linear-gradient(90deg, rgba(14, 17, 20, 0.9) 0%, rgba(14, 17, 20, 0.65) 60%, rgba(14, 17, 20, 0.35) 100%);
  }
}

@media (max-width: 767px) {
  /* the shared mobile header pulls the hero up ~66px more than its own height, so pad for it */
  .home-new .hn-hero { --hn-content-w: none; --hn-arrow: 44px; --hn-arrow-bottom: 100px; }
  .home-new .hn-slide { padding-top: 150px; min-height: 540px; min-height: min(100svh, 760px); }
  .home-new .hn-slide--1 { --hn-pos: 64% center; }
  .home-new .hn-slide--2 { --hn-pos: 62% 68%; }
  .home-new .hn-slide--3 { --hn-pos: 36% center; }
  .home-new .hn-slide::before {
    background: linear-gradient(180deg, rgba(14, 17, 20, 0.55) 0%, rgba(14, 17, 20, 0.72) 55%, rgba(14, 17, 20, 0.92) 100%);
  }
  .home-new .hn-slide-title { font-size: 40px; }
  .home-new .hn-slide-content::before { margin-bottom: 22px; }
  .home-new .hn-hero-arrows button { font-size: 13px; }
  .home-new .hn-dot-bar { width: 40px; }

  /* trust strip: 2 x 2 */
  .home-new .hn-trust-card { grid-template-columns: 1fr 1fr; margin-top: -70px; }
  .home-new .hn-trust-item { padding: 26px 22px; }
  .home-new .hn-trust-item + .hn-trust-item::before { display: none; }
  .home-new .hn-trust-item:nth-child(even) { border-left: 1px solid var(--hn-line); }
  .home-new .hn-trust-item:nth-child(n + 3) { border-top: 1px solid var(--hn-line); }
}

@media (max-width: 599px) {
  .home-new .hn-slide-title { font-size: 34px; margin-bottom: 28px; }
  .home-new .hn-slide-actions { flex-direction: column; gap: 12px; }
  .home-new .hn-slide-actions .hn-btn { width: 100%; padding: 16px 24px; }

  .home-new .hn-trust-item { align-items: center; text-align: center; padding: 24px 12px; gap: 12px; }
  .home-new .hn-trust-num { justify-items: center; font-size: 32px; margin-bottom: 6px; }
  .home-new .hn-trust-label { font-size: 14px; }
}

@media (max-width: 374px) {
  .home-new .hn-hero { --hn-arrow: 40px; --hn-arrow-gap: 16px; --hn-arrow-bottom: 84px; }
  .home-new .hn-slide { padding-top: 146px; }
  .home-new .hn-slide-title { font-size: 27px; margin-bottom: 22px; }
  .home-new .hn-slide-content::before { width: 56px; margin-bottom: 16px; }
  .home-new .hn-slide-actions { gap: 10px; }
  .home-new .hn-slide-actions .hn-btn { padding: 14px 20px; font-size: 16px; }
  .home-new .hn-dot-bar { width: 28px; }
  .home-new .hn-trust-item { padding: 20px 8px; }
  .home-new .hn-trust-icon { width: 46px; height: 46px; font-size: 18px; border-radius: 13px; }
  .home-new .hn-trust-num { font-size: 28px; }
  .home-new .hn-trust-label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-new .hn-slide-bg { transform: none !important; }
  .home-new .slick-current .hn-slide-content::before,
  .home-new .slick-current .hn-slide-title,
  .home-new .slick-current .hn-slide-actions { animation: none; }
}

/* ==========================================================
   3. Who we are
   ========================================================== */
.home-new .hn-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.home-new .hn-who-media {
  position: relative;
  padding: 0 0 28px 28px;
}

.home-new .hn-who-media::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 75%;
  background: var(--hn-red);
  border-radius: var(--hn-radius);
}

.home-new .hn-who-media img {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--hn-radius);
  box-shadow: var(--hn-shadow);
}

.home-new .hn-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 30px 0 38px;
  padding: 0;
  list-style: none;
}

.home-new .hn-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Mulish", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--hn-dark);
}

.home-new .hn-points i {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hn-red);
  color: #fff;
  font-size: 10px;
}

/* ==========================================================
   4. Why DigiLogix
   ========================================================== */
.home-new .hn-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.home-new .hn-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--hn-line);
  border-radius: var(--hn-radius);
  padding: 38px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

.home-new .hn-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--hn-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.home-new .hn-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--hn-shadow);
}

.home-new .hn-card:hover::after {
  transform: scaleX(1);
}

.home-new .hn-card:hover .hn-icon {
  background: var(--hn-red);
  color: #fff;
}

.home-new .hn-card h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--hn-dark);
  margin: 26px 0 12px;
}

.home-new .hn-card p {
  font-size: 16px;
  line-height: 1.7;
}

/* ==========================================================
   5. Services
   ========================================================== */
.home-new .hn-services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.home-new .hn-service {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* centre the last two cards on the 3-column layout */
.home-new .hn-service:nth-child(4) {
  grid-column: 2 / span 2;
}

.home-new .hn-service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 30px 0;
}

.home-new .hn-service-no {
  font-family: "Mulish", sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #d6d6d6;
  transition: -webkit-text-stroke-color 0.3s ease;
}

.home-new .hn-service:hover .hn-service-no {
  -webkit-text-stroke-color: var(--hn-red);
}

.home-new .hn-service-body {
  padding: 4px 30px 34px;
}

.home-new .hn-service h3 {
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.home-new .hn-center-cta {
  text-align: center;
  margin-top: 56px;
}

/* ==========================================================
   6. How it works — flow
   ========================================================== */
.home-new .hn-flow-section {
  position: relative;
  background: var(--hn-ink);
  overflow: hidden;
}

.home-new .hn-flow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(225, 29, 7, 0.22) 0%, rgba(225, 29, 7, 0) 45%);
  pointer-events: none;
}

.home-new .hn-flow-section .container {
  position: relative;
}

.home-new .hn-flow-section .hn-title {
  color: #fff;
}

.home-new .hn-flow-section .hn-eyebrow {
  color: #ff6a55;
}

.home-new .hn-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* the road connecting the step markers */
.home-new .hn-flow::before,
.home-new .hn-flow::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 12.5%;
  right: 12.5%;
  height: 4px;
  border-radius: 4px;
}

.home-new .hn-flow::before {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 14px, transparent 14px 26px);
}

.home-new .hn-flow::after {
  background: var(--hn-red);
  transform-origin: left;
  transform: scaleX(1);
}

.home-new .hn-flow.hn-animate::after {
  transform: scaleX(0);
  transition: transform 1.6s ease;
}

.home-new .hn-flow.hn-animate.is-visible::after {
  transform: scaleX(1);
}

.home-new .hn-step {
  position: relative;
  text-align: center;
  z-index: 1;
}

.home-new .hn-step-marker {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hn-ink);
  border: 2px solid var(--hn-red);
  color: #fff;
  font-size: 30px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.home-new .hn-step:hover .hn-step-marker {
  background: var(--hn-red);
  transform: scale(1.06);
}

.home-new .hn-step-no {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--hn-red);
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 900;
}

/* arrow head between steps (sits in the gap, on the road) */
.home-new .hn-step-arrow {
  position: absolute;
  top: 32px;
  right: -29px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hn-red);
  color: #fff;
  font-size: 12px;
  z-index: 2;
}

.home-new .hn-step-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--hn-radius);
  padding: 28px 24px;
  height: calc(100% - 122px);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.home-new .hn-step:hover .hn-step-card {
  border-color: rgba(225, 29, 7, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

.home-new .hn-step-label {
  display: block;
  font-family: "Mulish", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff6a55;
  margin-bottom: 8px;
}

.home-new .hn-step h3 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.home-new .hn-step p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================
   7. CTA container
   ========================================================== */
.home-new .hn-cta-box {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 40px;
  align-items: center;
  padding: 70px 70px;
  border-radius: 20px;
  background: var(--hn-red);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(225, 29, 7, 0.25);
}

.home-new .hn-cta-box::before {
  content: "\f4df";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  position: absolute;
  right: -30px;
  bottom: -60px;
  font-size: 260px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.home-new .hn-cta-box > * {
  position: relative;
}

.home-new .hn-cta-box h2 {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}

.home-new .hn-cta-box p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
}

/* ==========================================================
   8. Testimonials — reuses the index.html slider (.testimonial-active,
      styled by style.css and started by main.js). The rules below only
      fine-tune it inside this section: equal card heights, a divider,
      round photos, and arrows that stay inside the page.
   ========================================================== */
.home-new #testimonials .hn-testi-slider {
  position: relative;
}

/* equal-height cards */
.home-new #testimonials .testimonial-active .slick-track {
  display: flex;
}

.home-new #testimonials .testimonial-active .slick-slide {
  height: auto;
}

.home-new #testimonials .single-testimonial {
  display: flex !important; /* slick sets inline display on slides */
  flex-direction: column;
}

/* same text treatment as the index.html cards */
.home-new #testimonials .testimonial-active p {
  font-size: 15px;
  line-height: 26px;
  color: #777;
  margin-bottom: 30px;
}

/* divider + author row kept on one line at every width */
.home-new #testimonials .testi-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--hn-line);
}

.home-new #testimonials .testi-author img {
  float: none;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.home-new #testimonials .testimonial-active .ta-info {
  float: none;
  margin-left: 0;
  min-width: 0;
}

/* arrows: same buttons as index.html, given room inside the section
   (index places them outside the cards, which overflows narrower pages) */
@media (min-width: 992px) {
  .home-new #testimonials .hn-testi-slider {
    padding: 0 76px;
  }
  .home-new #testimonials .testimonial-active .slick-arrow {
    display: block !important; /* responsive.css hides them at 992–1200px */
    left: -76px;
  }
  .home-new #testimonials .testimonial-active .slick-next {
    left: auto;
    right: -76px;
  }
}

@media (max-width: 991px) {
  /* index.html's slider has no dots here and its arrows fall off-screen,
     so the same arrow buttons sit centred below the card instead */
  .home-new #testimonials .hn-testi-slider {
    padding-bottom: 76px;
  }
  .home-new #testimonials .testimonial-active {
    position: static;
  }
  .home-new #testimonials .testimonial-active .slick-arrow {
    display: block !important;
    top: auto;
    bottom: 0;
    transform: none;
    width: 52px;
    height: 52px;
    font-size: 20px;
    left: calc(50% - 60px);
  }
  .home-new #testimonials .testimonial-active .slick-next {
    left: auto;
    right: calc(50% - 60px);
  }
}

@media (max-width: 599px) {
  .home-new #testimonials .testimonial-active .slick-slide {
    padding: 52px 24px 30px;
  }
  .home-new #testimonials .testimonial-active .qt-img {
    left: 20px;
  }
}

/* ==========================================================
   Footer (new content, existing footer design)
   ========================================================== */
.hn-footer .hn-footer-tagline {
  color: #c6c6c6;
  font-size: 16px;
  line-height: 1.7;
  max-width: 320px;
}

.hn-footer .footer-link ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hn-footer .footer-link ul li {
  margin-bottom: 10px;
}

.hn-footer .f-widget-title.hn-logo {
  max-width: 200px;
}

.hn-footer .f-widget-title.hn-logo img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1399px) {
  .home-new .hn-title { font-size: 38px; }
  .home-new .hn-who-grid { gap: 60px; }
}

@media (max-width: 1199px) {
  .home-new .hn-section { padding: 90px 0; }
  .home-new .hn-title { font-size: 34px; }
  .home-new .hn-why-grid { grid-template-columns: repeat(2, 1fr); }
  .home-new .hn-who-grid { gap: 50px; }
  .home-new .hn-points { grid-template-columns: 1fr; }
  .home-new .hn-step-card { padding: 24px 18px; }
  .home-new .hn-cta-box { padding: 56px 50px; }
  .home-new .hn-cta-box h2 { font-size: 34px; }
}

@media (max-width: 991px) {
  .home-new .hn-section { padding: 80px 0; }
  .home-new .hn-who-grid { grid-template-columns: 1fr; }
  .home-new .hn-who-media { max-width: 560px; }
  .home-new .hn-points { grid-template-columns: 1fr 1fr; }

  .home-new .hn-services-grid { grid-template-columns: repeat(4, 1fr); }
  .home-new .hn-service:nth-child(4) { grid-column: span 2; }
  .home-new .hn-service:nth-child(5) { grid-column: 2 / span 2; }


  .home-new .hn-cta-box { grid-template-columns: 1fr; gap: 28px; text-align: left; }

  /* How it works becomes a vertical timeline */
  .home-new .hn-flow {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 640px;
    margin: 0 auto;
  }

  .home-new .hn-flow::before,
  .home-new .hn-flow::after { display: none; }

  /* connector from each marker down to the next one */
  .home-new .hn-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--hn-marker) / 2 - 2px);
    top: var(--hn-marker);
    bottom: 0;
    width: 4px;
    background: var(--hn-red);
  }

  .home-new .hn-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: start;
    text-align: left;
    padding-bottom: 28px;
    --hn-marker: 80px;
  }

  .home-new .hn-step:last-child { padding-bottom: 0; }

  .home-new .hn-step-marker {
    width: 80px;
    height: 80px;
    margin: 0;
    font-size: 26px;
  }

  .home-new .hn-step-card { height: auto; }
  .home-new .hn-step-arrow { display: none; }
}

@media (max-width: 767px) {
  .home-new .hn-section { padding: 64px 0; }
  .home-new .hn-title { font-size: 30px; }
  .home-new p { font-size: 16px; }
  .home-new .hn-head-center { margin-bottom: 40px; }

  .home-new .hn-who-media { padding: 0 0 18px 18px; }
  .home-new .hn-why-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-new .hn-card { padding: 30px 24px; }

  .home-new .hn-services-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-new .hn-service,
  .home-new .hn-service:nth-child(4),
  .home-new .hn-service:nth-child(5) { grid-column: auto; }
  .home-new .hn-service-top { padding: 24px 24px 0; }
  .home-new .hn-service-body { padding: 4px 24px 28px; }


  .home-new .hn-cta-box { padding: 44px 28px; border-radius: 16px; }
  .home-new .hn-cta-box h2 { font-size: 28px; }
  .home-new .hn-cta-box::before { font-size: 180px; right: -40px; bottom: -40px; }
}

@media (max-width: 599px) {
  .home-new .hn-center-cta .hn-btn,
  .home-new .hn-cta-box .hn-btn,
  .home-new .hn-who-content .hn-btn { width: 100%; }
  .home-new .hn-points { grid-template-columns: 1fr; }
  .home-new .hn-icon { width: 56px; height: 56px; font-size: 22px; border-radius: 14px; }

  .home-new .hn-step { grid-template-columns: 66px 1fr; gap: 18px; --hn-marker: 66px; }
  .home-new .hn-step-marker { width: 66px; height: 66px; font-size: 22px; }
  .home-new .hn-step-no { min-width: 30px; height: 30px; font-size: 12px; right: -10px; }
  .home-new .hn-step-card { padding: 20px 18px; }
}

@media (max-width: 374px) {
  .home-new .hn-title { font-size: 26px; }
  .home-new .hn-btn { padding: 16px 20px; font-size: 16px; }
  .home-new .hn-cta-box { padding: 36px 20px; }
  .home-new .hn-cta-box h2 { font-size: 25px; }
  .home-new .hn-step { grid-template-columns: 56px 1fr; gap: 14px; --hn-marker: 56px; }
  .home-new .hn-step-marker { width: 56px; height: 56px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-new *,
  .home-new *::before,
  .home-new *::after {
    transition: none !important;
  }
  .home-new .hn-flow.hn-animate::after { transform: none !important; }
}