/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   SaaS / MVP SERVICE

   Story Direction:
   Idea
   Validate
   Build
   Use
   Learn
   Grow

   Visual Direction:
   Product Launch
   Startup Energy
   UI Product Showcase
   Electric Blue / Cyan
   ========================================================= */


/* =========================================================
   01. PAGE
   ========================================================= */

.page-saas-mvp {
  background:
    var(--bg-main);
}


/* =========================================================
   02. HERO
   ========================================================= */

.saas-hero {
  position:
    relative;

  min-height:
    calc(100svh - var(--navbar-height));

  padding:
    clamp(90px, 8vw, 140px)
    var(--page-inline)
    clamp(80px, 9vw, 140px);

  overflow:
    hidden;
}


/* =========================================================
   03. HERO BACKGROUND
   ========================================================= */

.saas-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    min(65vw, 1050px);

  aspect-ratio:
    1;

  right:
    -22%;

  top:
    -28%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.14),
      rgba(7, 92, 255, 0.07) 42%,
      transparent 72%
    );

  pointer-events:
    none;
}


/* =========================================================
   04. HERO TOP
   ========================================================= */

.saas-hero__top {
  position:
    relative;

  z-index:
    4;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    50px;
}

.saas-hero__index {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

.saas-hero__index strong {
  color:
    var(--abpe-blue);

  font-size:
    0.72rem;

  font-weight:
    600;
}

.saas-hero__index span {
  color:
    var(--text-muted);

  font-size:
    0.7rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.saas-hero__meta {
  max-width:
    440px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* =========================================================
   05. HERO COMPOSITION
   ========================================================= */

.saas-hero__main {
  position:
    relative;

  min-height:
    clamp(760px, 78vw, 1120px);

  margin-top:
    clamp(80px, 9vw, 140px);
}


/* =========================================================
   06. HERO TITLE
   ========================================================= */

.saas-hero__title {
  position:
    relative;

  z-index:
    5;

  max-width:
    1460px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.2rem, 9.4vw, 10.6rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;

  pointer-events:
    none;
}

.saas-hero__title span {
  display:
    block;
}

.saas-hero__title .indent {
  padding-left:
    clamp(85px, 15vw, 275px);
}

.saas-hero__title .accent {
  color:
    var(--abpe-blue);
}


/* =========================================================
   07. HERO PRODUCT UI
   ========================================================= */

.saas-hero__product {
  position:
    absolute;

  z-index:
    2;

  right:
    0;

  bottom:
    0;

  width:
    min(64vw, 1040px);

  aspect-ratio:
    16 / 10;

  overflow:
    hidden;

  background:
    var(--abpe-navy);

  box-shadow:
    0 40px 100px
    rgba(6, 23, 47, 0.14);
}

.saas-hero__product img {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}


/* =========================================================
   08. HERO PRODUCT BADGE
   ========================================================= */

.saas-hero__badge {
  position:
    absolute;

  z-index:
    6;

  left:
    1%;

  bottom:
    8%;

  width:
    min(310px, 25vw);

  padding:
    24px;

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

  border:
    1px solid
    rgba(219, 228, 238, 0.86);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.saas-hero__badge-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    55px;
}

.saas-hero__badge-label {
  color:
    var(--abpe-blue);

  font-size:
    0.6rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.saas-hero__badge-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--text-muted);

  font-size:
    0.56rem;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.saas-hero__badge-status::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);

  box-shadow:
    0 0 12px
    rgba(0, 200, 255, 0.55);
}

.saas-hero__badge-title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.3rem, 2vw, 2.2rem);

  font-weight:
    400;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}


/* =========================================================
   09. HERO BOTTOM
   ========================================================= */

.saas-hero__bottom {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.35fr);

  gap:
    clamp(50px, 9vw, 150px);

  align-items:
    end;

  margin-top:
    clamp(80px, 9vw, 140px);

  padding-top:
    24px;

  border-top:
    1px solid var(--line);
}

.saas-hero__statement {
  max-width:
    900px;

  color:
    var(--text-heading);

  font-size:
    clamp(1.8rem, 3vw, 3.7rem);

  font-weight:
    400;

  line-height:
    1.02;

  letter-spacing:
    -0.045em;
}

.saas-hero__copy {
  max-width:
    430px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   10. PRODUCT PATH
   ========================================================= */

.saas-path {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-blue);

  overflow:
    hidden;
}

.saas-path__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(270px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.saas-path__title {
  max-width:
    980px;

  margin-top:
    28px;

  color:
    #ffffff;

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.saas-path__copy {
  max-width:
    410px;

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

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   11. PRODUCT PATH TRACK
   ========================================================= */

.saas-path__track {
  display:
    grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  border-top:
    1px solid
    rgba(255, 255, 255, 0.2);

  border-left:
    1px solid
    rgba(255, 255, 255, 0.2);
}

.saas-path-step {
  position:
    relative;

  min-height:
    300px;

  padding:
    26px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.2);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.2);

  transition:
    opacity var(--transition),
    background var(--transition);
}

.saas-path-step__number {
  color:
    rgba(255, 255, 255, 0.45);

  font-size:
    0.6rem;

  transition:
    color var(--transition);
}

.saas-path-step__body {
  position:
    absolute;

  left:
    26px;

  right:
    26px;

  bottom:
    26px;
}

.saas-path-step__title {
  color:
    #ffffff;

  font-size:
    clamp(1.6rem, 2.5vw, 3rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.saas-path-step__description {
  margin-top:
    16px;

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

  font-size:
    0.75rem;

  line-height:
    1.65;
}

.saas-path-step.is-completed {
  background:
    rgba(255, 255, 255, 0.055);
}

.saas-path-step.is-completed
.saas-path-step__number {
  color:
    var(--abpe-cyan);
}

.saas-path-step.is-active {
  background:
    rgba(255, 255, 255, 0.12);
}

.saas-path-step.is-active
.saas-path-step__number {
  color:
    var(--abpe-cyan);
}

.saas-path-step.is-active
.saas-path-step__title {
  color:
    var(--abpe-cyan);

  transform:
    translateX(6px);
}

.saas-path-step.is-muted {
  opacity:
    0.3;
}


/* =========================================================
   12. MVP PRINCIPLE
   ========================================================= */

.saas-principle {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.saas-principle__grid {
  display:
    grid;

  grid-template-columns:
    minmax(190px, 0.3fr)
    minmax(0, 1fr);

  gap:
    clamp(70px, 11vw, 190px);
}

.saas-principle__content {
  max-width:
    1160px;
}

.saas-principle__title {
  color:
    var(--text-heading);

  font-size:
    clamp(3.2rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.saas-principle__title strong {
  color:
    var(--abpe-blue);

  font-weight:
    inherit;
}

.saas-principle__copy {
  display:
    grid;

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

  gap:
    clamp(30px, 6vw, 90px);

  margin-top:
    clamp(60px, 8vw, 110px);
}

.saas-principle__copy p {
  color:
    var(--text-muted);

  font-size:
    0.92rem;

  line-height:
    1.75;
}


/* =========================================================
   13. PRODUCT PROJECT
   ========================================================= */

.saas-project {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}

.saas-project__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.saas-project__title {
  max-width:
    980px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.saas-project__meta {
  max-width:
    390px;

  padding-top:
    22px;

  border-top:
    1px solid var(--line);

  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.7;
}


/* =========================================================
   14. KASSIA MAIN VISUAL
   ========================================================= */

.saas-project__media {
  position:
    relative;

  width:
    100%;

  min-height:
    680px;

  height:
    min(84vh, 980px);

  overflow:
    hidden;

  background:
    var(--abpe-navy);
}

.saas-project__media img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.saas-project__caption {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    16px;

  color:
    var(--text-muted);

  font-size:
    0.68rem;
}

.saas-project__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   15. PRODUCT LOOP
   ========================================================= */

.saas-loop {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.saas-loop__header {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    50px;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.saas-loop__title {
  max-width:
    940px;

  margin-top:
    28px;

  color:
    #ffffff;

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.saas-loop__copy {
  max-width:
    400px;

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

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   16. PRODUCT LOOP GRID
   ========================================================= */

.saas-loop__grid {
  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  border-top:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-left:
    1px solid
    rgba(255, 255, 255, 0.16);
}

.saas-loop-card {
  position:
    relative;

  min-height:
    320px;

  padding:
    28px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.16);

  overflow:
    hidden;

  transition:
    opacity var(--transition),
    background var(--transition);
}

.saas-loop-card::before {
  content:
    "";

  position:
    absolute;

  left:
    28px;

  top:
    58px;

  width:
    8px;

  height:
    8px;

  border:
    1px solid
    rgba(0, 200, 255, 0.55);

  border-radius:
    50%;

  transition:
    background var(--transition),
    box-shadow var(--transition);
}

.saas-loop-card__number {
  color:
    rgba(255, 255, 255, 0.35);

  font-size:
    0.6rem;
}

.saas-loop-card__body {
  position:
    absolute;

  left:
    28px;

  right:
    28px;

  bottom:
    28px;
}

.saas-loop-card__title {
  color:
    #ffffff;

  font-size:
    clamp(1.7rem, 2.8vw, 3.3rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.saas-loop-card__description {
  margin-top:
    18px;

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

  font-size:
    0.77rem;

  line-height:
    1.65;
}

.saas-loop-card.is-muted {
  opacity:
    0.28;
}

.saas-loop-card.is-active {
  background:
    rgba(7, 92, 255, 0.13);
}

.saas-loop-card.is-active::before {
  background:
    var(--abpe-cyan);

  box-shadow:
    0 0 20px
    rgba(0, 200, 255, 0.7);
}

.saas-loop-card.is-active
.saas-loop-card__title {
  color:
    var(--abpe-cyan);

  transform:
    translateX(7px);
}


/* =========================================================
   17. PRODUCT ARCHITECTURE
   ========================================================= */

.saas-architecture {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.saas-architecture__grid {
  display:
    grid;

  grid-template-columns:
    minmax(280px, 0.38fr)
    minmax(0, 1fr);

  gap:
    clamp(70px, 11vw, 180px);

  align-items:
    start;
}

.saas-architecture__side {
  position:
    sticky;

  top:
    calc(var(--navbar-height) + 40px);
}

.saas-architecture__title {
  max-width:
    450px;

  margin-top:
    30px;

  color:
    var(--text-heading);

  font-size:
    clamp(2.8rem, 4.8vw, 5.6rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}

.saas-architecture__copy {
  max-width:
    370px;

  margin-top:
    35px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   18. PRODUCT CHAPTERS
   ========================================================= */

.saas-architecture__content {
  border-top:
    1px solid var(--line);
}

.saas-architecture__chapter {
  min-height:
    54vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    clamp(70px, 8vw, 120px)
    0;

  border-bottom:
    1px solid var(--line);

  opacity:
    0.3;

  transition:
    opacity 600ms var(--ease-out);
}

.saas-architecture__chapter.is-active {
  opacity:
    1;
}

.saas-architecture__number {
  margin-bottom:
    clamp(38px, 5vw, 70px);

  color:
    var(--text-soft);

  font-size:
    0.64rem;

  transition:
    color 600ms var(--ease-out);
}

.saas-architecture__chapter.is-active
.saas-architecture__number {
  color:
    var(--abpe-blue);
}

.saas-architecture__chapter-title {
  max-width:
    880px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.6vw, 6.4rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;

  transition:
    transform 600ms var(--ease-out);
}

.saas-architecture__chapter.is-active
.saas-architecture__chapter-title {
  transform:
    translateX(10px);
}

.saas-architecture__description {
  max-width:
    620px;

  margin-top:
    34px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   19. PRODUCT UI SPREAD
   ========================================================= */

.saas-interface {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-soft);
}

.saas-interface__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.saas-interface__title {
  max-width:
    940px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.saas-interface__copy {
  max-width:
    400px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   20. INTERFACE GALLERY
   ========================================================= */

.saas-interface__grid {
  display:
    grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  gap:
    clamp(20px, 3vw, 48px);

  row-gap:
    clamp(100px, 12vw, 190px);
}

.saas-interface__item {
  position:
    relative;
}

.saas-interface__item--one {
  grid-column:
    1 / 9;
}

.saas-interface__item--two {
  grid-column:
    9 / 13;

  margin-top:
    clamp(110px, 13vw, 200px);
}

.saas-interface__item--three {
  grid-column:
    2 / 7;
}

.saas-interface__item--four {
  grid-column:
    7 / 13;

  margin-top:
    clamp(90px, 11vw, 170px);
}

.saas-interface__media {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  background:
    var(--abpe-navy);

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

.saas-interface__item--one
.saas-interface__media {
  aspect-ratio:
    16 / 10;
}

.saas-interface__item--two
.saas-interface__media {
  aspect-ratio:
    4 / 5;
}

.saas-interface__item--three
.saas-interface__media {
  aspect-ratio:
    4 / 5;
}

.saas-interface__item--four
.saas-interface__media {
  aspect-ratio:
    16 / 10;
}

.saas-interface__media img {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}

.saas-interface__caption {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.66rem;
}

.saas-interface__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   21. ITERATION STATEMENT
   ========================================================= */

.saas-statement {
  position:
    relative;

  min-height:
    92vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-blue);

  overflow:
    hidden;
}

.saas-statement::before {
  content:
    "01";

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  color:
    transparent;

  font-size:
    clamp(14rem, 35vw, 42rem);

  font-weight:
    500;

  line-height:
    0.7;

  letter-spacing:
    -0.1em;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.12);

  transform:
    translate(-50%, -50%);

  user-select:
    none;

  pointer-events:
    none;
}

.saas-statement__content {
  position:
    relative;

  z-index:
    2;

  width:
    min(100%, 1350px);

  text-align:
    center;
}

.saas-statement__title {
  margin-top:
    clamp(45px, 6vw, 80px);

  color:
    #ffffff;

  font-size:
    clamp(3.5rem, 7.5vw, 8.8rem);

  font-weight:
    400;

  line-height:
    0.85;

  letter-spacing:
    -0.07em;

  text-transform:
    uppercase;
}

.saas-statement__copy {
  max-width:
    610px;

  margin:
    clamp(45px, 6vw, 75px)
    auto
    0;

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

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   22. SCOPE
   ========================================================= */

.saas-scope {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}

.saas-scope__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 0.4fr);

  align-items:
    end;

  gap:
    clamp(60px, 10vw, 160px);

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.saas-scope__title {
  max-width:
    960px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.saas-scope__copy {
  max-width:
    410px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.7;
}


/* =========================================================
   23. SCOPE GRID
   ========================================================= */

.saas-scope-list {
  display:
    grid;

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

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.saas-scope-item {
  position:
    relative;

  min-height:
    240px;

  padding:
    30px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  transition:
    background var(--transition);
}

.saas-scope-item:hover {
  background:
    var(--bg-white);
}

.saas-scope-item__number {
  color:
    var(--text-soft);

  font-size:
    0.62rem;
}

.saas-scope-item__title {
  position:
    absolute;

  left:
    30px;

  right:
    30px;

  bottom:
    30px;

  color:
    var(--text-heading);

  font-size:
    clamp(1.8rem, 3vw, 3.6rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.saas-scope-item:hover
.saas-scope-item__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(8px);
}


/* =========================================================
   24. TIMELINE
   ========================================================= */

.saas-timeline {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.saas-timeline__grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.4fr);

  gap:
    clamp(70px, 10vw, 170px);

  align-items:
    end;
}

.saas-timeline__title {
  max-width:
    960px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.6rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.saas-timeline__duration {
  display:
    block;

  color:
    var(--abpe-blue);

  font-size:
    clamp(3.7rem, 7.2vw, 8rem);

  font-weight:
    400;

  line-height:
    0.84;

  letter-spacing:
    -0.07em;
}

.saas-timeline__label {
  display:
    block;

  margin-top:
    22px;

  color:
    var(--text-heading);

  font-size:
    0.72rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.saas-timeline__copy {
  max-width:
    410px;

  margin-top:
    30px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   25. RELATED
   ========================================================= */

.saas-related {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-soft);
}

.saas-related__header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    24px;

  border-bottom:
    1px solid var(--line);
}

.saas-related__link {
  display:
    grid;

  grid-template-columns:
    80px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    30px;

  min-height:
    clamp(180px, 16vw, 260px);

  border-bottom:
    1px solid var(--line);
}

.saas-related__index {
  color:
    var(--text-soft);

  font-size:
    0.66rem;
}

.saas-related__title {
  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.06em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.saas-related__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    72px;

  height:
    72px;

  border:
    1px solid var(--line);

  border-radius:
    50%;

  color:
    var(--text-heading);

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.saas-related__link:hover
.saas-related__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(14px);
}

.saas-related__link:hover
.saas-related__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  border-color:
    var(--abpe-blue);

  transform:
    rotate(45deg);
}


/* =========================================================
   26. CTA
   ========================================================= */

.saas-cta {
  position:
    relative;

  padding:
    clamp(110px, 13vw, 210px)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.saas-cta::before {
  content:
    "";

  position:
    absolute;

  width:
    75vw;

  height:
    75vw;

  right:
    -25%;

  top:
    -45%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.2),
      rgba(7, 92, 255, 0.09) 40%,
      transparent 70%
    );

  pointer-events:
    none;
}

.saas-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(90px, 11vw, 170px);
}

.saas-cta__copy {
  max-width:
    410px;

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

  font-size:
    0.82rem;

  line-height:
    1.7;
}

.saas-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    60px;
}

.saas-cta__title {
  max-width:
    1400px;

  color:
    #ffffff;

  font-size:
    clamp(4rem, 9vw, 10.2rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}

.saas-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(95px, 10vw, 155px);

  height:
    clamp(95px, 10vw, 155px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    var(--abpe-cyan);

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.saas-cta__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  transform:
    rotate(45deg)
    scale(1.04);
}

.saas-cta__action svg {
  width:
    34%;

  height:
    34%;
}