/* =========================================================
   Homepage — "Why we are the Best" (about) + "Why Saihasoft" (dark list)
   Animations live in 2026js/home-why.js; without JS everything is visible.
   ========================================================= */

/* ---------- about: "watching you". A full-bleed parrot clip whose frame follows the cursor —
   cursor at the far left, the parrot looks left; centre, it faces you; far right, it looks right.
   Dressed to continue the testimonial section above it: the same #07070c ground the sky fades out
   of, the same 1140px column, meta bar, Poppins headline with the gradient word, divider rules and
   orange / violet light. ---------- */
.ab26 {
  --ink: #07070c;
  --grad: linear-gradient(120deg, #C42E1B 0%, #E0303C 45%, #ff6b00 100%);   /* the astronaut banner's red */
  --accent: #ff4a55;
  --font: var(--sx-font, "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --x: 140px; --x-right: 64px;   /* same left / right edges as the banner (.mvx --mvx-x, specs panel) */
  --copy: 600px;
  position: relative; background: #fff; font-family: var(--font); color: #fff;
  margin-bottom: -20px;
}
.ab26 p { margin: 0; }
/* a soft dark band laid over the join, so the two sections meet without an edge */
.ab26::before {
  content: ""; position: absolute; left: 0; right: 0; top: -90px; height: 180px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 12, 0) 0, rgba(7, 7, 12, .7) 50%, rgba(7, 7, 12, 0) 100%);
}
.ab26__stage {
  position: relative; isolation: isolate; overflow: hidden; height: 100vh; min-height: 680px; max-height: 1440px;
  background: var(--ink); display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 120px;   /* keeps the stats clear of the cloud bank below */
}
/* A bank of soft clouds along the bottom edge, so the parrot's sky dissolves into the white of
   "What we do" instead of ending on a straight line. White puffs of different sizes are blurred
   into cloud shapes and settle into solid white at the very bottom; they drift very slowly. */
.ab26__stage::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: -8%; right: -8%; bottom: -60px; height: 300px;
  background:
    radial-gradient(14% 42% at 4% 72%, #fff 55%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(11% 34% at 15% 62%, #fff 50%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(16% 46% at 27% 76%, #fff 55%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(10% 30% at 39% 60%, #fff 48%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(15% 44% at 50% 74%, #fff 55%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(12% 36% at 62% 63%, #fff 50%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(16% 46% at 74% 76%, #fff 55%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(11% 32% at 86% 61%, #fff 48%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(15% 44% at 97% 73%, #fff 55%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(0deg, #fff 0, #fff 22%, rgba(255, 255, 255, .85) 34%, rgba(255, 255, 255, 0) 70%);
  filter: blur(14px);
  animation: ab26-clouds 38s ease-in-out infinite alternate;
}
@keyframes ab26-clouds { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.ab26__poster, .ab26__video, .ab26__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
/* Desktop: the clip sits in the space right of the text column and fades in from the dark on its
   left edge, so the copy reads on the same dark ground as the testimonial above. Sizing follows the
   stage (container units), keeping the clip near 16:9 so the head is never cropped. */
@media (min-width: 901px) {
  .ab26__stage { container-type: size; }
  .ab26__poster, .ab26__video, .ab26__canvas { width: 124%; }
  @supports (width: 1cqw) {
    .ab26__poster, .ab26__video, .ab26__canvas {
      --box: calc(100cqh * 16 / 9 * 1.12);
      --text-right: calc(var(--x) + var(--copy));
      width: var(--box);
      left: calc((var(--text-right) + 100cqw) / 2 - var(--box) / 2);
    }
  }
  .ab26__poster, .ab26__video, .ab26__canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 12%, #000 26%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 12%, #000 26%);
  }
}
.ab26__poster { z-index: 0; }
.ab26__video { z-index: 1; opacity: 0; transition: opacity .4s ease; }
.ab26__video.is-ready { opacity: 1; }
.ab26__canvas { z-index: 1; opacity: 0; transition: opacity .4s ease; }
.ab26__canvas.is-ready { opacity: 1; }
.ab26__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, var(--ink) 0, rgba(7, 7, 12, .82) 10%, rgba(7, 7, 12, .35) 24%, transparent 40%),   /* out of the testimonial */
    linear-gradient(90deg, var(--ink) 0, rgba(7, 7, 12, .78) 26%, rgba(7, 7, 12, .25) 46%, transparent 62%);
}
/* the same orange / violet light the testimonial is lit with */
.ab26__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ab26__glow::before, .ab26__glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); }
/* violet carries on from the testimonial's bottom-left light, straddling the join; orange warms the stats */
.ab26__glow::before { width: 45vw; height: 45vw; max-width: 700px; max-height: 700px; left: -15vw; top: calc(-1 * min(22.5vw, 350px)); background: radial-gradient(circle, rgba(123, 92, 255, .4), transparent 65%); opacity: .55; }
.ab26__glow::after { width: 36vw; height: 36vw; max-width: 560px; max-height: 560px; left: -10vw; bottom: -14vw; background: radial-gradient(circle, rgba(224, 48, 60, .32), transparent 65%); }

.ab26__inner { position: relative; z-index: 3; width: 100%; padding: 0 var(--x-right) 0 var(--x); }
.ab26__meta {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.ab26__scene { color: var(--accent); }
.ab26__hint { color: rgba(255, 255, 255, .55); }
.ab26__copy { max-width: var(--copy); }
.ab26__title {
  margin: 0 0 24px !important; font-family: var(--font) !important; font-weight: 700 !important; text-transform: none !important; text-align: left;
  font-size: clamp(34px, 3.6vw, 58px) !important; line-height: 1.08 !important; letter-spacing: -.035em !important; color: #fff !important;
}
.ab26__title em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ab26__lead { font-size: 17px !important; line-height: 1.75 !important; color: rgba(255, 255, 255, .62) !important; text-align: left; }
.ab26__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.ab26__btn {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--grad); color: #fff !important; font: 600 15px/1 var(--font); text-decoration: none !important;
  box-shadow: 0 14px 34px -12px rgba(224, 48, 60, .75); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ab26__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(224, 48, 60, .9); }
.ab26__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--accent) !important; font-weight: 600; font-size: 15px;
  text-decoration: none !important; border-bottom: 1.5px solid rgba(224, 48, 60, .4); padding-bottom: 3px; transition: border-color .3s;
}
.ab26__link:hover { border-color: var(--accent); }

.ab26__stats {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 44px;
  margin: 48px 0 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); max-width: var(--copy);
}
.ab26__stats dt { font: 700 40px/1 var(--font); letter-spacing: -.03em; color: #fff; }
.ab26__stats dt small { font-size: .55em; margin-left: 2px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ab26__stats dd { margin: 10px 0 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* entrance — armed by JS, plays once (same word-rise feel as the testimonial) */
.ab26.is-armed .ab26__meta, .ab26.is-armed .ab26__copy > *, .ab26.is-armed .ab26__stats > div { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.ab26.is-armed .ab26__meta, .ab26.is-armed .ab26__copy > *, .ab26.is-armed .ab26__stats > div { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.ab26.is-in .ab26__meta, .ab26.is-in .ab26__copy > *, .ab26.is-in .ab26__stats > div { opacity: 1; transform: none; filter: none; }
.ab26__copy > :nth-child(1) { transition-delay: .1s !important; }
.ab26__copy > :nth-child(2) { transition-delay: .2s !important; }
.ab26__copy > :nth-child(3) { transition-delay: .3s !important; }
.ab26__stats > div:nth-child(1) { transition-delay: .42s !important; }
.ab26__stats > div:nth-child(2) { transition-delay: .5s !important; }
.ab26__stats > div:nth-child(3) { transition-delay: .58s !important; }

@media (max-width: 1599px) { .ab26 { --copy: 550px; } }
@media (max-width: 1199px) { .ab26 { --x: 56px; --x-right: 40px; } }
@media (max-width: 900px) {
  .ab26 { --x: 24px; --x-right: 24px; }
  .ab26__stage { height: auto; min-height: 0; max-height: none; justify-content: flex-end; padding: 66vw 0 150px; }
  .ab26__stage::after { height: 190px; bottom: -30px; filter: blur(10px); }
  .ab26__poster, .ab26__video, .ab26__canvas { height: 78vw; bottom: auto; object-position: 60% 50%; }
  .ab26__shade {
    background:
      linear-gradient(180deg, var(--ink) 0, rgba(7, 7, 12, 0) 16vw),
      linear-gradient(180deg, transparent 0, transparent 38vw, rgba(7, 7, 12, .85) 64vw, var(--ink) 78vw, var(--ink) calc(100% - 110px), #fff 100%);
  }
  .ab26__meta { margin-bottom: 32px; letter-spacing: .16em; }
  .ab26__hint { display: none; }
  .ab26__copy, .ab26__stats { max-width: none; }
  .ab26__title { font-size: clamp(30px, 8.4vw, 46px) !important; }
  .ab26__lead { font-size: 16px !important; }
  .ab26__stats { grid-template-columns: repeat(3, 1fr); gap: 0 12px; margin-top: 36px; }
  .ab26__stats dt { font-size: 30px; }
  .ab26__stats dd { font-size: 9.5px; letter-spacing: .12em; }
}
@media (max-width: 767px) { .ab26 { --x: 20px; --x-right: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .ab26__stage::after { animation: none; }
  .ab26.is-armed .ab26__meta, .ab26.is-armed .ab26__copy > *, .ab26.is-armed .ab26__stats > div { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- dark "Why Saihasoft" ---------- */
.wy26 {
  position: relative; overflow: hidden; background: #121214; color: #fff;
  padding: 130px 24px; font-family: "Poppins", system-ui, sans-serif;
}
.wy26__mark { position: absolute; z-index: 0; width: 46%; max-width: 640px; opacity: 1; pointer-events: none; will-change: transform; }
.wy26__mark--l { left: -12%; top: -18%; }
.wy26__mark--r { right: -14%; bottom: -26%; }
.wy26__grid { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.wy26__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #ee5b2f; }
.wy26__kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.wy26__title {
  margin: 18px 0 26px !important; font-size: clamp(30px, 3.3vw, 50px); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
  text-align: left;
}
.wy26__line { display: block; overflow: hidden; padding-bottom: .05em; }
.wy26__line > span {
  display: inline-block;
  background: linear-gradient(to bottom, #ee5b2f 0%, #fe3d01 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wy26__copy p { margin: 0 0 16px !important; font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, .62); text-align: left; }

.wy26__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.wy26__list li {
  position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 30px 18px 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .1); transition: background .4s, padding .4s;
}
.wy26__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.wy26__list li::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, #fe3d01, rgba(254, 61, 1, 0)); transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.wy26__num { font-size: 14px; font-weight: 600; color: #ee5b2f; letter-spacing: .06em; padding-top: 4px; }
.wy26__list h3 { margin: 0 0 8px !important; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: #fff; text-align: left; transition: color .3s; }
.wy26__list p { margin: 0 !important; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .55); text-align: left; }
.wy26__list li:hover { background: linear-gradient(90deg, rgba(254, 61, 1, .08), transparent 70%); padding-left: 14px; }
.wy26__list li:hover h3 { color: #ee5b2f; }

/* entrance (only once JS has armed the section, so no-JS visitors still see everything) */
.wy26.is-armed .wy26__line > span { transform: translateY(105%); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.wy26.is-armed .wy26__kicker, .wy26.is-armed .wy26__copy p { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.wy26.is-armed .wy26__list li { opacity: 0; transform: translateX(40px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1), background .4s, padding .4s; }
.wy26.is-in .wy26__line > span { transform: none; }
.wy26.is-in .wy26__line:nth-child(2) > span { transition-delay: .12s; }
.wy26.is-in .wy26__line:nth-child(3) > span { transition-delay: .24s; }
.wy26.is-in .wy26__kicker { opacity: 1; transform: none; }
.wy26.is-in .wy26__copy p { opacity: 1; transform: none; transition-delay: .45s; }
.wy26.is-in .wy26__copy p + p { transition-delay: .6s; }
.wy26.is-in .wy26__list li { opacity: 1; transform: none; }
.wy26.is-in .wy26__list li:nth-child(1) { transition-delay: .35s, .35s, 0s, 0s; }
.wy26.is-in .wy26__list li:nth-child(2) { transition-delay: .5s, .5s, 0s, 0s; }
.wy26.is-in .wy26__list li:nth-child(3) { transition-delay: .65s, .65s, 0s, 0s; }
.wy26.is-in .wy26__list li::before { transform: scaleX(1); }
.wy26.is-in .wy26__list li:nth-child(1)::before { transition-delay: .45s; }
.wy26.is-in .wy26__list li:nth-child(2)::before { transition-delay: .6s; }
.wy26.is-in .wy26__list li:nth-child(3)::before { transition-delay: .75s; }

@media (max-width: 991px) {
  .wy26 { padding: 96px 20px; }
  .wy26__grid { grid-template-columns: 1fr; gap: 48px; }
  .wy26__mark { width: 80%; }
}
@media (max-width: 600px) {
  .wy26 { padding: 80px 16px; }
  .wy26__list li { grid-template-columns: 44px 1fr; padding: 24px 0; }
  .wy26__list li:hover { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wy26.is-armed .wy26__line > span, .wy26.is-armed .wy26__kicker, .wy26.is-armed .wy26__copy p, .wy26.is-armed .wy26__list li { opacity: 1; transform: none; transition: none; }
}

/* ---------- banner carousel: hold its height before Owl starts ----------
   Owl hides the slider (display: none) until it initialises, so for a moment the page is one
   screen shorter and every scroll trigger below is measured a screen too high. Reserving the
   height (only the first slide shows; it is behind the intro wipe anyway) keeps them right. */
@media (min-width: 768px) {
  #home_slider.owl-carousel:not(.owl-loaded) { display: block; height: 100vh; overflow: hidden; }
}